JS

JS this 指向

undefined

Posted by NeptLiang on September 15, 2022

背景

时间有点久远，以至于忘了内容来源……

全局上下文

在全局执行环境中（在任何函数体外部）this 都指向全局对象

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

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

函数上下文

默认指向全局对象

function f1(){
    return this;
}

//在浏览器中：
f1() === window;   //在浏览器中，全局对象是 window

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

箭头函数

在全局代码中，它将被设置为全局对象：

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

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

// 接着上面的代码
// 作为对象的一个方法调用
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 fn2 = obj.bar;
// 那么调用箭头函数后，this 指向 window，因为它从 bar 继承了 this。
console.log(fn2()() == window); // true

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

作为对象的方法

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

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

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

这样的行为完全不会受函数定义方式或位置的影响，我们也可以先定义函数，然后再将其附属到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。事实证明，这与他是对象 o 的成员没有多大关系，最近的引用才是最重要的。

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

原型链中的 this

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

var o = {
  f: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

getter 与 setter 中的 this

用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

类的构造函数中

是一个常规对象。类中所有非静态的方法都会被添加到 this 的原型中：

class Example {
    constructor() {
        const proto = Object.getPrototypeOf(this);
        console.log(Object.getOwnPropertyNames(proto));
    }
    first(){}
    second(){}
    static third(){}
}

new Example(); // ['constructor', 'first', 'second']

派生类

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

this = new Base();

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

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

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

new Good();
new AlsoGood();
new Bad(); // ReferenceError

call 和 apply

对象可以作为 bind 或 apply 的第一个参数传递，并且该参数将绑定到该对象。

var obj = {a: 'Custom'};

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

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

whatsThis();          // 'Global' 因为在这个函数中 this 没有被设定，所以它默认为 全局/ window 对象
whatsThis.call(obj);  // 'Custom' 因为函数中的 this 被设置为 obj
whatsThis.apply(obj); // 'Custom' 因为函数中的 this 被设置为 obj

在非严格模式下使用 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 global]

bind方法

ECMAScript 5 引入了 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 = g.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 会保持为 undefined

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

f2() === undefined; // true

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

//End of Article

公众号二维码

CATALOG