JavaScript嵌套函数this的重定向
函数在嵌套后,this指向了内层的函数,导致无法获取外部定义的数据,也无法修改。
看下面一段代码。
var obj = { name: 'wang', friends: [ 'zhang', 'li' ], loop: function () { 'use strict'; this.friends.forEach( function (friend) { console.log(this.name+' knows '+friend); } ); } }; obj.loop();//Cannot read property 'name' of undefined 找不到this
如何重定向this让其重新指向外部,获取/修改外部数据,有三个方法:
1:在进入嵌套函数前,将当前的this保存在一个变量中。
var obj = { name: 'wang', friends: [ 'zhang', 'li' ], loop: function () { 'use strict'; var that = this ; this.friends.forEach( function (friend) { console.log(that.name+' knows '+friend); } ); } }; obj.loop();//this指向改变,成功获取了外部数据
2:使用.bind(this)改变this指向
var obj = { name: 'wang', friends: [ 'zhang', 'li' ], loop: function () { 'use strict'; this.friends.forEach( function (friend) { console.log(this.name+' knows '+friend); }.bind(this) ); } }; obj.loop();//this指向改变,成功获取外部数据
3.使用callback改变this指向
var obj = { name: 'wang', friends: ['zhang', 'li'], loop: function() { 'use strict'; this.friends.forEach(function(friend) { console.log(this.name + ' knows ' + friend); }, this); } }; obj.loop();//this指向改变,成功获取外部数据