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/javascripte/9689.html

(0)
上一篇 2021年11月13日 02:41
下一篇 2021年11月17日 20:05

相关推荐

  • JavaScript对象的可计算属性名

    ECMAScript的对象的键往往是确定的,如果想要实现对象的键根据实际情况赋予不同的键的话,那就得用 可计算属性名 这个功能,把需要计算的表达式放在方括号[]里面。 在ECMA262-5(2009)里面的做法是: 从ECMA262-6(2015)开始添加了可计算属性名这个功能,这里这样做:

    JavaScript经验 2021年11月17日
    05020
  • JavaScript对象或类的关键字super

    super关键字用于调用一个对象的父对象上的构造函数或方法。 语法 调用 父对象/父类 的构造函数 在构造函数中使用时,super关键字必须在使用this关键字之前使用。 调用 父对象/父类 的静态方法

    JavaScript经验 2021年11月13日
    03690
  • npx和npm exec的区别

    当通过npx运行时,所有标志(flag)和选项(option)都必须在任何位置参数之前设置。 当通过npm exec运行时,可以使用双连字符标志(–)来抑制 npm 对应发送到执行命令的开关(switch)和选项(option)的解析。 建议使用双连字符(–)明确告诉 npm 停止分析命令行选项(option)和开…

    JavaScript经验 2021年7月24日
    09730

发表回复

登录后才能评论