this指向

目录

1.全局作用域下声明的函数内部this指向window

2.定时器函数,内部this指向window

3.立即执行函数,内部this指向window

4.构造函数this指向实例对象

5.事件绑定函数内部this指向事件绑定者

6.对象里面的方法,this指向方法调用者(对象)

7.箭头函数内部的this指向

8.call apply  bind 改变this指向

---

1.全局作用域下声明的函数内部this指向window

 // 1.全乎作用域下声明的函数内部this指向window
      let { log } = console;
      function fun() {
        log(this); //window
      }
      fun();

2.定时器函数,内部this指向window

  // 2.定时器函数,内部this指向window
      setInterval(function(){
          console.log(this); // window
      },2000)
      setTimeout(function(){
          console.log(this); // window
      },2000)

3.立即执行函数,内部this指向window

//   3.立即执行函数,内部this指向window
    (function(){
        console.log(this); //window
    })()


      (function(){  
          console.log(this); //window
      }())

4.构造函数this指向实例对象

  // 4.构造函数this指向
      let that;
      function Star(uname, age) {
        that = this;
        (this.uname = uname), (this.age = age);
      }

      let ldh = new Star("ldh", 18);
      console.log(that === ldh); // true


//构造函数 new 执行步骤
1.创建一个空对象
2.将构造函数内部this指向新对象
3.执行构造函数内部代码,将属性方法添加到新对象中
4.将新对象return出来

5.事件绑定函数内部this指向事件绑定者

 //   5.事件绑定函数内部this指向事件绑定者

    let btn = document.querySelector('#btn')
    btn.addEventListener('click',function(){
        console.log(this); //  <button id="btn">点击</button>
    })

6.对象里面的方法,this指向方法调用者(对象)

    // 6.对象里面的方法,this指向方法调用者(对象)
    // 谁调用指向谁
    let obj = {
        uname:'obj',
        sing:function(){
            console.log(this);
        }
    }
    let obj1 = {
        uname:'obj1',
        song:function(){
            console.log(this);
        }
    }
    obj.sing() //obj
    obj1.song() //obj1

7.箭头函数内部的this指向

      // 7.箭头函数内部的thsi指向
      // 箭头函数内部没有this,他的this是看他属于哪一块作用域继承下来的指向
      // 1)全局作用域下的箭头函数,指向window
      var num = 10;
      let obj = {
          num:20,
          fun:()=>{
              console.log(this);  // window
              console.log(this.num);  // 10
          }
      }
      obj.fun()
      // 2)函数下的箭头函数
      let obj1 = {
          num:20,
          f:function(){
              var obj2 = {
                  fun1:()=>{
                      console.log(this); //obj1
                      console.log(this.num);  // 20
                  }
              }
              obj2.fun1()
          }
      }
      obj1.f()

8.call apply  bind 改变this指向

      //   8.call apply  bind 改变this指向
      // call 和apply共同点是都可以改变this指向,同时调用函数,不同点在于传参不同
      //  call传参 第一个参数是变更后this的目标,后面参数不限定
      //   apply传参 第一个人参数是变更后this的目标,第二个参数是一个数组或者是类数组
      //   call 可以用于构造函数继承,apply可用于函数调用传参改变指向,bind可用于定时器等不需要立即执行的函数改变指向
      function showName() {
        console.log(this.id + ":" + this.name);
      }

      var obj = {
        id: 1,
        name: "yuguang",
      };

      //   showName.call(obj);  //1:yuguang

      //   apply 的使用
      Math.max.apply(null, [1, 2, 3, 4, 5]);

      //   bind使用
      var obj = {
        uname: "lala",
      };
      setTimeout(
        function () {
          console.log(this.uname); //lala
        }.bind(obj),
        2000
      );