JavaScript this的5中应用场景

用一句话总结this的指向：this是在调用函数的时候，根据执行上下文所动态决定 。

应用场景一：当函数自然执行的时候，this是undefined或者window；例如

function myFunction() {
      console.log('this', this);
    }

myFunction()

//这种如果使用严格模式，则this是undefined

应用场景二：函数被别人调用的时 （被人谁 点.出来，this就是谁）

function myFunction() {
      console.log('this', this); //this是a对象
    }

    var a = {
      b: myFunction
    };
    a.b();

案例1：下面案例的this是指谁呢？

var father = {
      name: 'father',
      son: {
        name: 'son',
        buy: function () {
          console.log('this', this);
        }
      }
    };

    father.son.buy();

答案是son，函数前面有多少个点都不用管，只管里执行时函数最近的那个点前面是谁，那么this就是谁，当然，用apply/call/bind除外

案例2:

<script>
    var father = {
      name: 'father',
      buy: function () {
        console.log('this', this);
      }
    };

    var son = {
      name: 'son'
    }
    son.buy = father.buy;
    son.buy()// 这个时候this就是son
  </script>

案例3：

var father = {
      name: 'father',
      buy: function () {
        console.log('this', this);
      }
    };

    var son = {
      name: 'son'
    }
    son.buy = father.buy;
    var allbuy = son.buy;
    allbuy();

显然上面的this是window，函数执行时；

案例4：

var father = {
      name: 'father',
      buy: function () {
        console.log('this', this);
      }
    };

    var son = {
      name: 'son'
    }
    son.buy = father.buy;
    // window.addEventListener('scroll', son.buy); // 这里的this就是window,
    // 还有一个案例
    var a = (1,2); // 这里涉及逗号表达式，这里a的值是2,返回后一个值，
    (1, son.buy)(); // ==> var b = (1, son.buy); b() b执行，执行的时候，this是window

案例5：

function Person(params) {
      this.buy = function () {
        console.log('this', this);
      }
    }
    var xiaoming = new Person('xiaoming')
    var xiaohong = {};
    xiaohong.buy = xiaoming.buy;
    xiaohong.buy();// 这个时候，this就是xiaohong，看执行时是谁

应用场景三：new一个实例时

function Person(name) {
      this.name = name;
      console.log(this); // 使用new创建对象，这个时候this就是新创建的对象
    }
    var xiaoming = new Person('xiaoming');

应用场景四：apply、call、bind时

function getColor(params) {
      this.color = params;
      console.log(this);
    }

    function Car(name, color) {
      this.name = name;
      getColor(color).call(this);// 这里把this把原来的变成了Car的shilling对象
    }

var lanbojini = new Car('lanbojini', 'black');

call和apply的区别，可以这样记：call,打电话得一个一个打，apply可以一起打，或者“取长补短”

bind并非立即执行，bind不会改变原函数，它会返回来一个函数，返回来的这个函数执行，才是用bind改变了this的函数

如果某个函数已经被bind过了，再次用.去调用，那么规则2就不适用了：

var sonbuy = buy.bind(xiaoxiao);

father.sonbuy(); 这个时候，this任然是xiaoxiao，而不是father

应用场景五：箭头函数的this指向由离箭头函数最近的非箭头函数的执行上下文决定（定义时）也就是：定义时离我最近的非箭头函数的上下文是啥，我就是啥；

function outerWrap(params) {
      console.log('外层函数this', this);
      const outer = () => {
        console.log('outer this', this);
      }
      function innerCall() {
        console.log('innerCall', this);  // 这里的this是window
        outer();
      }

      innerCall();
    }
    var wife = {
      name: 'wife'
    }
    wife.outer = outerWrap;
    wife.outer();

那么箭头函数认call和apply摆布this吗？