构造函数内部的this和常规函数内部的this

椒盐大肥猫

已于 2024-01-16 10:12:10 修改

阅读量479

点赞数 8

分类专栏： JS 文章标签：前端 javascript vue.js

于 2024-01-15 18:51:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42832446/article/details/135608282

版权

JS 专栏收录该内容

21 篇文章

订阅专栏

本文详细解释了JavaScript中new声明的构造函数和普通函数中this的指向规则，以及在严格模式下的区别。还探讨了setTimeout和箭头函数对this的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 使用new声明的构造函数，内部顶层this会指向新创建的实例，例子如下：

  var a = 1;
  a = 2;
  window.a = 3;
  function Test() {
    console.log("this", this) // 指向新创建的实例
    let a = 4;
    this.a = 5;
    setTimeout(function () {
      console.log(a);
    }, 10);
    setTimeout(function () {
      console.log(this.a); // 常规setTimeout函数的回调函数，this会指向window
    }, 20);
    setTimeout(() => {
      console.log(a);
    }, 30);
    setTimeout(() => {
      console.log(this.a);
      console.log("this", this)  // 打印Test {a: 5}（箭头函数本身没有this，this会继承父级上下文，父级上下文this指向新创建的实例）
    }, 40);
  }
  let t = new Test(); // 打印：4 3 4 5
  console.log('构造函数t.a', t.a); // 5

1.2 作为普通函数执行时，函数内部的顶层this会指向window（非严格模式下）

  var b = 1;
  b = 2;
  window.b = 3;
  function test() {
  	// 'use strict' // 注意：use strict严格模式时，this指向undefined
    console.log("this", this) // 指向window
    let b = 4;
    this.b = 5; // 因为this指向了window，所以会把外层函数b的值替换为5，此时window对象的b属性值为5
    setTimeout(function () {
      console.log(b);
    }, 10);
    setTimeout(function () {
      console.log(this.b); // 常规setTimeout函数的回调函数，this会指向window
    }, 20);
    setTimeout(() => {
      console.log(b);
    }, 30);
    setTimeout(() => {
      console.log("this", this) // 打印window（箭头函数本身没有this，this会继承父级上下文，父级上下文this也是指向window）
      console.log(this.b);
    }, 40);
  }
  test() // 4 5 4 5