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

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

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

上一篇:Mac下 Docker部署SpringBoot应用


下一篇:spring-oauth-server实践:授权方式四:client_credentials 模式下有效期内重复申请 access_token ?