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

相关推荐

  • npm和npx的区别

    npm的m是Management,npx的x是eXecute。 npm是包管理工具,npx是包的命令执行工具,npx是npm exec命令的别名。 如果学习过ruby的同学,npx就等同于bundle exec命令。 默认情况下,npx是自动安装的,无需额外安装。如果没安装,运行下面命令 用途一 比如,项目安装了web…

    JavaScript经验 2021年7月24日
    05440
  • JavaScript语言的setTimeout()函数

    function function 指在 delay 毫秒之后待推到消息队列的回调函数。 delay delay 指延迟的毫秒数 (1秒等于1000毫秒),如果省略该参数,则 delay 为默认值0。 如果消息队列有其它消息,setTimeout 消息必须等待其它消息处理完。因此 delay 参数仅仅表示最少延迟时间,…

    JavaScript经验 2022年1月23日
    01610
  • JavaScript对象或类的关键字super

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

    JavaScript经验 2021年11月13日
    02270

发表评论

登录后才能评论