JS this

JavaScript

在一个函数（在非严格模式）被调用时，this 作为默认的参数传递。
this 在 JavaScript 中的值取决于函数调用的模式。（运行时绑定）

方法调用模式

一个函数作为一个对象的属性时，称为一个方法。
如果调用表达式包含一个.，则是作为某对象的属性调用的方法。
作为方法调用时，this 绑定在该对象上。

此时，方法中使用 this 可以访问自己所属的对象。

特例

• 箭头函数（声明时即绑定了 this）
  箭头函数的 this 在声明时绑定声明环境的 this，而非在运行时：

const a = {
    name: 'a',
    sayThis: () => {
        console.log(this)   // 声明语句所处的 this 是 Window
    }
}
const b = {
    name: 'b',
    sayThis() {
        console.log(this)
    }
}
a.sayThis() // Window
b.sayThis() // b
b.sayThis = a.sayThis
b.sayThis() // Window

函数调用模式

当一个函数不作为一个对象的属性时，则作为一个函数调用。
非严格模式：函数调用时的 this 绑定到全局对象（window/globalThis）。
严格模式：this 为 undefined。

如果在闭包中需要访问外部函数的上下文，必须将外部函数的 this 保存在变量中，再在闭包中用该变量替换。否则闭包中直接使用的 this 将指向全局变量：

myObj.double = function(){
    var that = this;
    var helper = function(){
        that.value = add(that.value, that.value);
    }
    helper();   //函数形式调用
}

特例

• class 函数
  
  • class 上非静态方法都会被实例继承，只能通过实例的 this 访问，实例的 this 会从自身往父类查找。
  • class 上的静态方法不会被实例继承，必须通过 class 自身访问。
  • class（无论是实例还是 class 本身）作用域下的方法都启用了严格模式，所以不能把方法赋值给变量再调用访问实例 this。

class Animal {
    sayThis() {
        console.log(this)
    }
    static sayDees() {
        console.log(this)
    }
}
Animal.sayDees()    // class Animal
const a = new Animal()
a.sayThis() // Animal a
// 类实例的方法相当于启用了严格模式
let copy = a.sayThis
copy()  // undefined
copy = Animal.sayDees
copy()  // undefined

构造器调用模式

使用 new 操作符调用函数时，会创建一个连接到该函数的 prototype 对象的新对象。
此时新对象内的 this 绑定在这个新对象上。

var Quo = function(str){
    this.status = str;
};
Quo.prototype.get_status = function(){
    return this.status;
};
var myQuo = new Quo("confused");
myQuo.get_status();     //"confused"

Apply 调用模式

使用函数的 apply() 或 call() 调用的时候，this 会绑定在这两个方法的第一个参数上。

call() 方法接受单独的参数；apply() 方法接受一个参数数组。