JavaScript-this指向

介绍

与其他语言相比，函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式下和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了call、apply、bind方法来设置函数的this值，而不用考虑函数如何被调用的。ES2015引入了箭头函数，箭头函数不提供自身的this绑定（this的值将保持闭合词法上下文的值）

const test = {
    prop: 42,
    func: function() {
        return this.prop;
    },
};

console.log(test.func()); // 42

语法

this

值：当前执行上下文（global、function或eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值（值-取决于在调用方式不同，值也不同）

描述

全局上下文，无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this都指向全局对象。

// 在浏览器中，window对象同时也是全局对象：
console.log(this === window); // true

var a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "WDN"

你可以使用 globalThis 获取全局对象，无论你的代码是否在当前上下文运行。

函数上下文

在函数内部，this的值取决于函数被调用的方式。

因为下面的代码不在严格模式下，且this的值不是由该调用设置的。所以this的值默认指向全局对象，浏览器中就是window

function f1() {
    return this;
}
// 浏览器中: 全局对象是window
fn() === winodw;

// Node中：
f1() === globalThis;

然而，在严格模式下，如果进入执行环境时没有设置this的值，this会保持为undefined，如下：

function f2(){
    "use strict" // 这里是严格模式
    return this;
}
f2() === undefined; // true

在第二个例子中，this 应是 undefined，因为 f2 是被直接调用的，而不是作为对象的属性或方法调用的（如 window.f2()）。有一些浏览器最初在支持严格模式时没有正确实现这个功能，于是它们错误地返回了window对象。

如果想要把this的值从一个环境传到另一个，就要用call或者apply方法，如下方的示例所示

function f3(){
    "use strict";
    return this;
}

let obj = { name: "周杰伦" };
f3.call(obj); // { name: "周杰伦" }

类上下文

this在类中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。

在类的构造函数中，this是一个常规对象，类中所有非静态的方法都会被添加到this的原型中：

class Example{
    constructor(){
        const proto = Object.getPrototypeOf(this); // 方法返回指定对象的原型
        console.log(Object.getOwnPropertyNames(proto)); // 方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。
    }
    first(){}
    second(){}
    static third(){}
}
    new Example(); // ['constructor', 'first', 'second']

静态方法不是this的属性，它们只是类自身的属性。

派生类

派生类利用继承机制，新的类可以从已有的类中派生。那些用于派生的类称为这些特别派生出的类的“基类”。

不像基类的构造函数，派生类的构造函数没有初始的this绑定，在构造函数中调用super()。会生成一个this绑定，并且相当于执行如下代码，Base为基类：

this = new Base();

在调用super()之前引用this会抛出错误。

派生类不能在调用super()之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数。

class Base {};
class Good extends Base {};
class AlsoGood extends Base {
    constructor(){
        return {a: 1};
    }
}
class Bad extends Base {
    constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor 
// 在访问'this'或从派生构造函数返回之前必须调用派生类中的超级构造函数@ new Bad

示例

函数上下文中的this

// 对象可以作为bind或apply的第一个参数传递，并且该参数将绑定到该对象。
var obj = {a: '刘德华' };

// 声明一个变量，并将该变量作为全局对象window的属性。
var a = '周星驰';

function whatsThis() {
    return this.a; // this的值取决于函数被调用的方式
}

whatsThis(); // 周星驰 因为在这个函数中this没有被设定，所有它默认为全局/window对象
whatsThis.call(obj); // 刘德华 因为函数中的this被设置为obj
wharsThis.apply(obj); // 刘德华 因为在函数中this被设置为obj

this和对象转换

function add(c, d) {
    return this.a + this.b + c + d;
}

var o = {a:1, b:3};

// 第一个参数用作“this”的对象
// 其余参数用作函数的参数
add.call(o,5,7); // 16

// 第一个参数是用作"this"的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o,[10,20]); // 34

在非严格模式下使用call和apply时，如果用作this值不是对象，则会被尝试转换为对象，null和undefined会转换成全局对象，原始值如7或'foo'会使用相应构造函数转换为对象。因此7会被转换为new Number(7)生成的对象，字符串"foo"会转换为new String('foo')生成的对象。

function bar() {
    console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object Window]

bind方法

ECMAScript5引入了Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f() {
    return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = f.bind({a: 'yoo'}); // bind只生效一次!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

箭头函数

在箭头函数中，this与封闭词法环境的this保持一致，在全局代码中，它将被设置为全局对象：

var globalObject = this;
var foo = (() => this);
console.log(foo() ==== globalObject); // true

如果将this传递给call、bind、或者apply来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（thisArg）应该设置为null。

var globalObject = this; 
var foo = (() => this); 
console.log(foo() ==== globalObject); // true
// 接着上面的代码
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

无论如何，foo的this被设置为他被创建时的环境（在上面的例子中，就是全局对象）。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的this设置为封闭的词法环境。

// 创建一个含有bar方法的obj对象
// bar返回一个函数
// 这个函数返回this,
// 这个返回的函数是以箭头函数创建的
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
    bar: function(){
        var x = (() => this);
        return x;
    }
}

// 作为obj对象的一个方法来调用bar，把它的 this绑定到 obj
// 将返回的函数的引用赋值给fn
var fn = obj.bar();

// 直接调用fn而不设置this，
// 通常（即不使用箭头函数的情况）默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，而没有调用它
var fun2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从bar继承了this。
console.log(fun2()() === window); // true

在上面的例子中，一个赋值给了obj.bar的函数（称为匿名函数A），返回了另一个箭头函数（称为匿名函数B）。因此，在A调用时，函数B的this被永久设置为obj.bar（函数A）的this。当返回的函数（函数B）被调用时，它this始终是最初设置的。在上面的代码中，函数B的this被设置为函数A的this，即obj，所以即使被调用的方式通常将其设置为undefined或全局对象（或者如前面示例中的其他全局执行环境中的方法），它的this也仍然是obj。

作为对象的方法

当函数作为对象里的方法被调用时，this被设置为调用该函数的对象。

下面的例子中。当o.f()被调用时，函数内的this将绑定到o对象。

var o = {
    prop: 37,
    f: function(){
        return this.prop
    }
};
console.log(o.f()); // 37

请注意，这样的行为完全不会受函数定义方式或者位置的影响，在前面的例子中，我们定义对象o的同时，将其中的函数定义为成员f。但是，我们也可以先定义函数，然后再将其附属到o.f。这样做的结果是一样的：

var o = {prop: 37};

function independent() {
    return this.prop;
}

o.f = independent;

console.log(o.f()); // 37

这表明函数是从o的f成员调用的才是重点。

同样，this的绑定只受最接近的成员引用的影响。在下面的这个例子中，我们把一个方法g当作对象o.b的函数调用，在这次执行期间，函数中的this将指向o.b，事实证明，这与他是对象b的成员没有多大关系，最近的引用才是最重要的。

o.b = {g: independent, prop: 42};
console.log(o.b.g()); // 42

原型链中的this

对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，就像该方法就在这个对象上一样。

var o = {
    a: 5,
    b: 5,
    f: function(){
        return this.a + this.b;
    }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); //5 如果不给p增加a和b属性 那么结果是10

在这个例子中，对象p没有属于它自己的f属性，它的f属性继承自它的原型。虽然最终是在o中找到f属性的，这并没有关系；查找过程首先从p.f的引用开始，所以函数中的this指向p，也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是JavaScript的原型继承中的一个有趣的特性。

getter与setter中的this

再次，相同的概念也适用于当函数在一个getter或者setter中被调用，用作getter或setter的函数都会把this绑定到设置或获取属性的对象。

function sum () {
    return this.a + this.b + this.c;
}

var o = {
a: 1,
b: 2,
c: 3,
get average(){
    return (this.a + this.b + this.c) / 3;
    }
};

Object.defineProperty(o,'sum', {
    get: sum,
    enumerable: true,
    configurable: true
});
console.log(o.average, o.sum); // 2,6

作为构造函数

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象

虽然构造函数返回的默认值是this所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回this对象）

function C() {
    this.a = 37;
}

var o = new C();
console.log(o.a); // 37

function C2() {
    this.a = 37
    return {a: 38};
}
o = new C2();
console.log(o.a); // 38

作为一个DOM事件处理函数

当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态地添加监听函数时不遵守这个约定）。

// 被调用时，将关联的元素变成蓝色
function bluify(e){
    console.log(this === e.currentTaget); // 总是true
    
    // 当currentTaget 和 target 是同一个对象时为true
    cosnole.log(this === e.target);
    this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementByTagName('*');

// 将 blufiy 作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i = 0; i < elements.length; i++){
    elements[i].addEventListener('click', bluify, false);
}

作为一个内联事件处理函数

当代码被内联on-event 处理函数(en-US)调用时,它的this指向监听器所在的DOM元素：

<button onclick="alert(this.tagName.toLowerCase());"> Show this </button>

上面的alert会显示button,注意只有外层代码中的this是这样设置的：

<button onclick="alert((function(){return this})())"> Show inner this </button>

在这种情况下，没有设置内部函数的this，所以它指向global/window对象（即非严格模式下调用的函数未设置this时指向的默认对象）

类中的this

和其他普通函数一样，方法中的this取决于它们如何被调用，有时，改写这个行为，让类中的this值总是指向这个类示例会很有用，为了做到这一点，可在构造函数中绑定类方法：

class Car {
    constructor() {
        // 绑定sayBye而不是sayHi来显示区别
        this.sayBye = this.sayBye.bind(this);
    }
    sayHi() {
        console.log(`Hello from ${this.name}`);
    }
    sayBye() {
        console.log(`Bye from ${this.name}`);
    }
    get name() {
        return 'Ferrari';
    }
}

 class Brid {
     get name() {
         return 'Tweety';
     }
 }
 
 const car = new Car();
 const bird = new Brid();
 
 // 方法中'this'的值取决于调用者
 car.sayHi(); // Hello from Ferrari
 bird.sayHi = car.sayHi;
 bird.sayHi(); // Hello from Tweety
 
 // 对于绑定方法，'this'不依赖于调用者
 bird.sayBye = car.sayBye;
 bird.sayBye(); // Bye from Ferrari

类内部总是严格模式。调用一个this值为undefined的方法会抛出错误。

总结

// 函数调用方式 this指向window
function fun() {
    console.log(this);
}
fun(); // window

// 对象调用方式 this指向当前对象
let obj = {
    six: '男',
    get: function () {
        console.log(this);
    }
}
obj.get(); // obj

// 构造函数调用方式 this指向new出来的那个对象
function Person(name) {
    this.name = name;
    console.log(this);
}
var person = new Person(111);
var person2 = new Person(222);

// apply、call和bind调用模式
function fun2() {
    console.log(this);
}
fun2.apply(obj, [123]); // 立即执行
fun2.call(obj); // 立即执行
let a = fun2.bind(obj); // 返回一个新的函数
a()
// 以上都为指向obj对象

// 箭头函数捕获上下文的this
let fun3 = () => {
    console.log(this);
}
fun3(); // window