this的指向

this的指向

函数中this

想要知道this的指向，就要看是谁直接调用了这个函数

函数

  <script>
    var a = 10;
    function fun() {
      var a = 100
      console.log(this.a); // 10 因为fun是在全局中调用的,指向全局window
    }
    fun()
  </script>

对象

  <script>
    var a = 10;
    var obj = {
      a: 100,
      name: 'zs',
      say: function () {
        console.log(this); // 指向obj对象
      }
    }
    obj.say()
  </script>

构造函数

使用new操作符创建的实例，this会指向这个实例

  <script>
    function Person(name, age) {
      console.log(this);  // 指向p1这个实例对象 Object { name: "zs", age: 16 }
      this.name = name;
      this.age = age;
    }

    var p1 = new Person('zs', 16)
  </script>

箭头函数

箭头函数this指向的是上一个函数的this

  <script>
    function fun() {
      let bar = () => {
        console.log('bar', this); // 所以这里是 this指向obj  Object { name: "zs" }
      }
      bar(); // 2.这里调用了箭头函数,按照谁调用指向谁来说window,
            //    但是箭头函数的this是和上一个函数的this一样,而我们通过call改变了this的指向
    }
    let obj = {
      name: 'zs'
    }
    fun.call(obj); // 1.通过call来改变this的指向
  </script>

修改this的指向

call

call的参数有两个，当不需要实参时，可以省略，call(改变的对象,实参列表)

  <script>
    let obj = {
      name: 'zs',
      sayName: function (a, b) {
        console.log(this.name); // newZS,此时this指向的是newObj对象
        console.log(a, b); // 1,2
      }
    }
    let newObj = {
      name: 'newZS'
    }
    let b = obj.sayName;
    b.call(newObj, 1, 2); // call改变this指向
  </script>

apply

apply(改变的对象,实参数组)，没有实参时第二个参数可以没有

  <script>
    let obj = {
      name: 'zs',
      sayName: function () {
        console.log(this.name); // newZS 此时this指向newObj 
      }
    }
    let newObj = {
      name: 'newZS'
    }
    let b = obj.sayName;
    b.apply(newObj); // 通过apply改变this
  </script>

bind

bind(改变的对象)(实参列表)

  <script>
    let obj = {
      name: 'zs',
      sayName: function (a, b) {
        console.log(this.name); // newZS
        console.log(a, b); // 1,2
      }
    }
    let newObj = {
      name: 'newZS'
    }
    let b = obj.sayName;
    b.bind(newObj)(1, 2) // bind改变this指向
  </script>

如有错误,麻烦指正