es6箭头函数this指向

http://blog.csdn.net/liwusen/article/details/70257837


箭头函数自身是没有this的,它的this是继承它所处环境的this指向

箭头函数没有自己的this对象,它总是搬运外部环境的this对象。因此,只要离它最近的外部环境中的this改变,箭头函数中的this就改变。如果离它最近的环境中的this,没有改变。那么箭头函数中的this就不会改变。

1、作为匿名函数被调用。

function foo() {
  console.log(this);  //{name:'noshower'}
  setTimeout(() => {
      console.log('name:', this.name); //noshower
    }, 100);
}
var name = 'DaLin';
foo.call({ name: 'noshower' });
上面代码中,我们用call()方法,将函数foo的this对象绑定到了对象{name:'noshower'}上。由于,箭头函数没有this变量,所以,箭头函数能够访问到外部环境的this变量。此时,箭头函数内部,访问到的是foo函数的this对象。因此,this.name的值是'noshower'。

2、 作为方法被调用
var obj = {
    name: 'noshower',
    sayName: () => this.name
}
var name = 'bar';
console.log(obj.sayName());

上面代码中,箭头函数是作为对象的方法。因为,箭头函数本身是不绑定this对象的。因此,它只能从外部搬运this对象。上面代码中,只有全局环境存在this对象,因此返回的是window.name,即'bar'。
这里我有点疑惑,应该可以这样理解吧:箭头函数所处的上下文环境是obj,那obj这里的this指向是window

3、在方法内部被调用

var obj = {
  name: 'noshower',
  sayName: function() {
      var a = () => this.name;
      console.log(a()); // noshower
  }
}
var name = 'bar';
obj.sayName();

上面代码中,箭头函数是在sayName方法中运行的。此时,箭头函数的this对象,搬运的是sayName方法的this对象。当sayName函数作为方法调用时,它的this对象指向obj对象。因此,箭头函数的this.name就是obj.name,即'noshower';

4、使用new 操作符调用,会抛出错误

var Obj = (name) => {
    this.name = name;
}
new Obj('noshower');

上面的代码,箭头函数作为构造函数被调用,会报错。原因是,箭头函数没有自己的this对象,就没法给this添加属性。

5、使用call和apply,bind()调用

var o = (val) => {
   console.log(this.name, val); // bar,bar
 };
  var obj = {
     name: 'foo'
 }
 var name = 'bar';
 o.call(obj, name);
上面代码中,箭头函数使用了call方法来调用。原本想将函数的this绑定在obj对象上面。结果显示,this被绑定在了全局对象上了。这是因为,箭头函数没有自己的this对象,此时使用call方法仅仅起到了传递参数的作用,没有改变它的this对象。它的this对象依旧来自外部执行环境。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值