函数是 JavaScript 中的基本组件之一。 一个函数是 JavaScript 过程 — 一组执行任务或计算值的语句。要使用一个函数，你必须将其定义在你希望调用它的作用域内。一个JavaScript 函数用function关键字定义，后面跟着函数名和圆括号。
函数上下文：当浏览器首次载入你的脚本，它将默认进入全局执行上下文。如果，你在你的全局代码中调用一个函数，你程序的时序将进入被调用的函数，并创建一个新的执行上下文，并将新创建的上下文压入执行栈的顶部。
如果你调用当前函数内部的其他函数，相同的事情会在此上演。代码的执行流程进入内部函数，创建一个新的执行上下文并把它压入执行栈的顶部。浏览器总会执行位于栈顶的执行上下文，一旦当前上下文函数执行结束，它将被从栈顶弹出，并将上下文控制权交给当前的栈。这样，堆栈中的上下文就会被依次执行并且弹出堆栈，直到回到全局的上下文。
在JavaScript中，可以简单的认为this就是函数的上下文，
- 函数直接用
()调用，this指向window对象
function fun() {
var a = 666;
console.log(this.a);
}
var a = 6;
fun()
- 函数作为一个对象
obj的方法，由对象调用obj.function(),this指向这个对象obj
function fun() {
var a = 666;
console.log(this.a);
}
var obj = {
"a" : 10,
"b" : 20,
"c" : fun,
}
obj.c()
- 函数是事件处理函数，由事件触发调用，this指向这个事件对象
function fun() {
this.style.background = red;
}
var box = document.getElementById("box");
box.onclick = fun;
- 函数由定时器调用，this指向window对象
var box = document.getElementById("box");
box.onclick = function(){
var self = this
setTimeout(function () {
self.style.background = red;
},2000)
};
- 数组中存放的函数，由数组索引调用，this指向这个数据对象
var arr = [
{"a":10},
function fun() {
var a = 666;
console.log(`this.a: ${this.a}`);
console.log(`this.length: ${this.length}`);
},
"hi"
]
var a = 6;
arr[1]()
总结：函数的上下文取决于函数
最终的调用形式，可以利用上面的五个规律做判断
小测试1：
function fn(){
console.log(this.a);
}
var obj = {
"a" : 1,
"b" : [{
"a" : 3,
"b" : fn
}]
}
var a = 4;
obj.b[0].b()
最终调用形式为对象调用，符合规律2，提问：那个对象调用的？
小测试2：
function countArguments(a,b){
console.log(this.length);
}
arr = [countArguments,'123',10,'hi'];
arr[0](1,2,3)
最终调用形式为数组索引调用，符合规律5
小测试3：
var length = 10;
function fn(){
console.log(this.length);
}
var obj = {
length : 5,
method : function(fn) {
fn();
arguments[0]();
}
}
obj.method(fn);
提问1：有几个结果?
提问2：结果代表的是什么？
答案：
会有
两个结果
结果1是window对象的length
结果2是实参个数
脑洞测试1：
function fun2(a,b,c){
arguments[0](5,6,7,8);
}
function fun(m,n){
console.log(`this.length: ${this.length}`);
console.log(`arguments.length: ${arguments.length}`);
}
fun2(fun,6,7,8,9)
提问：谁是被执行函数？
谁是调用函数？
脑洞测试2：
var number = 2;
var obj = {
number : 4,
fn1 : (function(){
this.number *= 2;
number *= 2;
var number = 3;
return function(){
this.number *= 2;
number *= 3;
console.log(number);
}
})(),
db2 : function(){
this.number *= 2;
}
};
var fn1 = obj.fn1;
console.log(number);
obj.fn1();
console.log(window.number);
console.log(obj.number);
2019/3/18
