函数

函数是 JavaScript 中的基本组件之一。 一个函数是 JavaScript 过程 — 一组执行任务或计算值的语句。要使用一个函数，你必须将其定义在你希望调用它的作用域内。一个JavaScript 函数用function关键字定义，后面跟着函数名和圆括号。

函数上下文：当浏览器首次载入你的脚本，它将默认进入全局执行上下文。如果，你在你的全局代码中调用一个函数，你程序的时序将进入被调用的函数，并创建一个新的执行上下文，并将新创建的上下文压入执行栈的顶部。

如果你调用当前函数内部的其他函数，相同的事情会在此上演。代码的执行流程进入内部函数，创建一个新的执行上下文并把它压入执行栈的顶部。浏览器总会执行位于栈顶的执行上下文，一旦当前上下文函数执行结束，它将被从栈顶弹出，并将上下文控制权交给当前的栈。这样，堆栈中的上下文就会被依次执行并且弹出堆栈，直到回到全局的上下文。

在JavaScript中，可以简单的认为this就是函数的上下文，

1. 函数直接用()调用，this指向window对象

function fun() {
  var a = 666;
  console.log(this.a);
}

var a = 6;
fun()

2. 函数作为一个对象obj的方法，由对象调用obj.function(),this指向这个对象obj

function fun() {
  var a = 666;
  console.log(this.a);
}

var obj = {
  "a" : 10,
  "b" : 20,
  "c" : fun,
}
obj.c()

3. 函数是事件处理函数，由事件触发调用，this指向这个事件对象

function fun() {
  this.style.background = red;
}

var box = document.getElementById("box");
box.onclick = fun;

4. 函数由定时器调用，this指向window对象

var box = document.getElementById("box");
box.onclick = function(){
  var self = this
  setTimeout(function () {
   self.style.background = red;
},2000)
};

5. 数组中存放的函数，由数组索引调用，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