运行程序，解读this指向---case4

Posted 2020-10-06

var param = ‘window‘;

var obj1 = {
  param: ‘obj1‘,
  fn1: function () {
    console.log(this.param);
  },
  fn2: () => console.log(this.param),
  fn3: function () {
    return function () {
      console.log(this.param);
    }
  },
  fn4: function () {
    return () => console.log(this.param);
  }
}
var obj2 = { param: ‘obj2‘ };

obj1.fn1(); // obj1 默认绑定
obj1.fn1.call(obj2); // obj2 显式绑定

obj1.fn2(); // window 没有外层函数
obj1.fn2.call(obj2); // window 没有外层函数，箭头函数不能显式绑定

obj1.fn3()(); // window 隐式丢失
obj1.fn3().call(obj2); // obj2 显式绑定
obj1.fn3.call(obj2)(); // window 隐式丢失

obj1.fn4()(); // obj1 外层函数this为obj1
obj1.fn4().call(obj2); // obj1 外层函数this为obj1，箭头函数不能显式绑定
obj1.fn4.call(obj2)(); // obj2 外层函数显式绑定obj2

箭头函数的this指向外层函数作用域中的this；
箭头函数的this无法通过bind，call，apply来直接修改；
改变外层函数作用域中的this即可改变箭头函数的this。

var param = ‘window‘;

function Obj(param) {
  this.param = param;
  this.fn1 = function () {
    console.log(this.param);
  }
  this.fn2 = () => console.log(this.param);
  this.fn3 = function () {
    return function () {
      console.log(this.param);
    }
  }
  this.fn4 = function () {
    return () => console.log(this.param);
  }
}

var obj1 = new Obj(‘obj1‘);
var obj2 = new Obj(‘obj2‘);

obj1.fn1(); // obj1
obj1.fn1.call(obj2); // obj2

obj1.fn2(); // obj1
obj1.fn2.call(obj2); // obj1

obj1.fn3()(); // window
obj1.fn3().call(obj2); // obj2
obj1.fn3.call(obj2)(); // window

obj1.fn4()(); // obj1
obj1.fn4().call(obj2); // obj1
obj1.fn4.call(obj2)(); // obj2

构造函数创建对象与直接用字面量的形式去创建对象是不同的，区别在于它多了构造函数的作用域。