this指向详解

this

全局

 // 全局作用域中的this指向window

  console.log("quanju ----> this", this); // Window

全局定义的函数this

// 全局中定义的函数也指向window (无论是普通函数还是箭头函数)

  function fn() {
    console.log("fn ----> this", this); // Window
  }
  fn();

  const fn1 = () => {
    console.log("fn1 ----> this", this); // Window
  };

  fn1();

对象中的函数this

  const obj = {
    name: "obj",
    child: 2,
    fn2: function () {
      // 对象中定义的普通函数 this 指向对象本身
      
      // 谁调用指向谁
      console.log("fn2 ----> this", this); // {name: 'obj', child: 2, fn2: ƒ, fn3: ƒ}
    },
    fn3: () => {
      console.log("fn3 ----> this", this); // Window
    },
  };

  console.log("obj ----> fn2", obj.fn2());

  // 箭头函数的this指向它的父级， 父级为obj， 但是obj是对象没有自己的this，于是向外指向window

  console.log("obj ----> fn3", obj.fn3());

构造函数中的this

  // 构造函数中的this指向她的实例对象

  function Persion(name, age) {
    this.name = name;
    this.age = age;
  }

  const p = new Persion("小明", 18);
  console.log("p", p); // Persion {name: '小明', age: 18}

定时器中的this

  // setTimeout 中的this指向 window

  setTimeout(function () {
    console.log("setTimeout ---->this", this); // window
  }, 1000);

事件中的this

  // 事件中的this， 指向触发事件的目标对象

  const div = document.getElementsByTagName("div")[0];
  console.log("div", div);

  div.onclick = function () {
    console.log("div ----> this", this); // <div>111</div>
  };

apply、call , bind调用的this

  // apply call bind 中的this

  // apply 和 call 是临时改变了this的指向， bind 返回一个this绑定了新对象的函数

  /**
   * apply 和 call 接收两个参数，第一个参数是this的指向，第二参数是函数接受的参数，
   *
   * apply 的参数是数组形式，call是参数列表，
   *
   * apply 和 call都是临时改变this指向并立即执行
   *
   * bind 接收两个参数，第一个是this的指向，第二个是参数列表
   *
   * bind 改变this指向后不会立即执行，而是会返回一个永久改变this指向的新函数，
   *
   * 可以在代码中方便的复用这个新函数
   *
   * 临时改变this指向使用apply 和 call，需要多次改变this指向的，使用bind
   */


  // 注意
  const obj2 = {
    name: "牛",
  };
  const fn4 = () => {
  // 箭头函数的this指向没有因为apply而改变，因为箭头函数的this在定义时已经确定了，之后不会被改变
    
    console.log("fn4 ----> this", this); // window
  };

  console.log("fn4.apply(obj2)", fn4.apply(obj2));

 

补充

const Fn5 = () => {};

  // 箭头函数 new 会报错

  const four = new Fn5(); // this.html:95 Uncaught TypeError: Fn5 is not a constructor
  
  // 总结：普通函数的this，永远指向调用它的对象，默认指向window/全局对象

  /**
   * 改变this指向的方法
   *
   * 1.使用 let that = this
   *
   * 2.使用new实例化创建对象
   *
   * 3.使用箭头函数
   *
   * 4.使用apply、bind，call
  */

参考资料

https://blog.csdn.net/weixin_45811256/article/details/129406838 


https://blog.csdn.net/Canace_Xyxjjcaw/article/details/120753406