关于this指向的理解

平时遇到的this指向问题

例1

    function a() {
      this.a = 1;
      console.log(this);  // window
    }
    a();  // 执行a或者window.a后this指向到window
    const aa = new a();  // 构造函数方式 打印this为a {a: 1}
    console.log(aa.a); // => 1

例2

    const a = {
      a: 'isa',
      say: function(name) {
        console.log(this.a + ': ' + name)
      }
    }
    a.say('yuan')  // say方法this指向为a
    // 如果将say改变成es6箭头函数写法？
    const a = {
      a: 'isa',
      say: (name) => {
        console.log(this.a + ': ' + name)
      }
    }
    // 执行a.say
    a.say('yuan');
    // this.a 为undefined 因为箭头函数没有他自己的this，所以指向父级window

例3

    const a = {
      a: 'isa',
      say: function(name) {
        console.log(this.a + ': ' + name)
      }
    }
    function b(name) {
      this.a = 'isb';
      this.setA = (val) => {
        this.a = val;
      }
    }
    a.say('我叫a');  // => isa: 我叫a
    b.apply(a, ['1']); // b的this指向到a的this上
    b.call(a, '2');
    b.bind(a)('3');// or b.bind(a, '3');
    // apply, call, bind, 方法都可改变this的指向
    // 此时不改变a，通过b可以改变a的属性值
    a.say('我叫b');  // => isb: 我叫b
    
    // 现在我们希望利用b.setA方法动态改变this.a
    const bb = new b('bb');
    bb.setA(11);
    // 运行a.say发现this.a没有改为11，看例4使用prototype
    a.say('我叫11');  // => isb: 我叫11
    
    // 假如我们再加一个方法c，同时让它this指向b，也可以改变this.a
    function c() {
      this.c = 'c';
      this.a = 'isc';
    }
     c.call(b);  // 使用call改变this
     a.say('我叫c');  // => isb: 我叫c  并没有改变为isc
     // b的this指向是可以拿到，但是a的没有，需要通过b方法做指向
    function b(name) {
      this.a = 'isb';
      this.setA = (val) => {
        this.a = val;
      }
      c.call(this); // 写在b方法里
    }
    a.say('我叫c');  // => isc: 我叫c  通过c改变了a

例4

    const a = {
      a: 'isa',
      say: function(name) {
        console.log(this.a + ': ' + name)
      }
    }
    function b(name) {
      this.a = 'isb';
      this.setA = (val) => {
        this.a = val;
      }
      c.call(this);
    }
    function c() {
      this.c = 'c';
      this.a = 'isc';
    }
    b.prototype = a; 
    const bb = new b('bb');
    bb.say('我叫b');  // => isb: 我叫b
    bb.setA('setA');
    bb.say('我叫b, 改变了a');  // => setA: 我叫b, 改变了a

    c.prototype = new b('cc');
    const cc = new c();
    cc.say('我叫c');  // => isc: 我叫c

    b.prototype.newSay = function() {
      console.log(this.a);
    }
    bb.newSay();  // => setA
    // 可以发现后面在原型上增加的方法调用bb也是可以找到最后设置的setA