JavaScript的回调函数内部this的指向问题以及四种绑定this指向的方法

1、常见回调函数内部的this指向问题
我们先看下面这段代码:

var o = {
    age : 12,
    say : function() {
        function callback() {
            return this.age;
        }
        func(callback);
    }
};

function func(callback) {
    var name = "Xiao Ming";
    console.log(name + " is " + callback() + " years old.");
}
o.say();

代码分析:这里创建了一个单例对象【o】和一个普通函数【func】,【o】中有一个方法【say】,在方法【say】里面调用了函数【func】,并传入了一个回调函数【callback】作为参数,【callback】中返回了对象【o】的属性【age】。当执行到函数【func】时,打印的结果如下:

console.log(name + " is " + callback() + " years old.");    //Xiao Ming is undefined years old.

我们可以看到【func】中执行的回调函数【callback】的返回结果是“undefined”而非“12”。
原因如下:函数内部的【this】指向于此函数的调用者(拥有者)。在上面这个例子中,虽然【callback】函数定义于对象【o】的【say】方法中,但实际上由于【callback】是在【func】函数中进行的普通调用,那么【func】中的【callback】的调用者我们便可以理解为是【window】对象,因此,【callback】中的【this】便指向了【window】,而在全局作用域中由于并不存在变量【age】,所以“this.age”(即“window.age”)便不存在,就返回了“undefined”。这里多说一点:既然变量【age】不存在,那么在使用一个未定义的变量时怎么没有报错(即“Uncaught ReferenceError: age is not defined”)呢?因为,这里是“return this.age”(在这里相当于“return window.age”)而非“return age”,即当使用一个对象的未定义的属性时不会报错,并返回“undefined”,而直接使用一个未定义的变量时便会报错

那么我们该如何让【callback】中的【this】指向对象【o】,从而获得【age】的值呢?

2、绑定this指向的四种方法
2.1、方法一:
将【callback】中的

return this.age;

换成

return o.age;

即将【this】换成具体的对象【o】,如此,我们可以保证最后的打印结果是正确的:

console.log(name + " is " + callback() + " years old.");    //Xiao Ming is 12 years old.

当然,这个方法有点偏题了。而且,这种方式有个问题——对象内部用对象名【o】而非【this】时,就加深了内部代码与对象名的耦合性了。

2.2、方法二:
将【func】中对【callback】的调用方式

callback()

换成

callback.call(o)

或者

callback.apply(o)

或者

callback.bind(o)()

即通过使用方法【call/apply/bind】将【callback】内部的【this】指向对象【o】,便也可以得到正确的打印结果(此略,同上)。

2.3、方法三:
需要使用ES6的方法(如果您还没有学过的话,也可以顺便了解下),即将【say】中的【callback】的定义方式

function callback() {
    return this.age;
}

换成

var callback = () => this.age;

即换用箭头函数进行定义,关于箭头函数内部的【this】的理解,我这里引用下阮老师的一句话:箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。如此,这里定义的【callback】函数内部的【this】即便是【say】方法的【this】,而【say】方法是在代码段的最后由【o】调用的,所以,【say】的【this】指向的便是【o】了,因而,【callback】里的this的指向也是【o】。(打印结果同上,此略)

2.4、方法四:
代码换成

var o = {
    age : 12,
    say : function() {
        function callback(that) {
            return that.age;
        }
        func(this, callback);
    }
};

function func(that, callback) {
    var name = "Xiao Ming";
    console.log(name + " is " + callback(that) + " years old.");
}
o.say();

即通过将正确的【this】传递到【callback】中来保证最后得到正确的结果,不过要稍微复杂点。(打印结果同上,此略)

  • 8
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值