JavaScript函数或类的this关键字

与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同。

在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。

在绝大多数情况下,函数的调用方式决定了 this 的值(运行时绑定)。ES5 引入了 bind 方法来设置函数的 this 值,而不用考虑函数如何被调用的。

全局上下文

无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象。

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

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

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

函数上下文

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

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

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

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

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

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

f2() === undefined; // true

在第二个例子中,this 应是 undefined,因为 f2 是被直接调用的,而不是作为对象的属性或方法调用的(如 window.f2())。

类上下文

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

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

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

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

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/jsexp/9689.html

发表评论

登录后才能评论