call apply bind瞎谈

javascript/jquery

浏览数:285

2019-10-3

简单理解call apply bind以及其中所谓的改变this指向问题

先看代码

const xiaoming = {
    name: '小明',
    own: '铅笔',
    zhuanbidao: function(result1, result2){console.log(`${this.name}使用了转笔刀把${this.own}变成了${result1}和${result2}`)}
}

上述代码很简单,小明有一只铅笔,有一把转笔刀,可以用来削铅笔,当我们调用

xiaoming.zhuanbidao('削好的铅笔', '木屑');

很明显会得到:小明使用了转笔刀把铅笔变成了削好的铅笔和木屑

此时有个问题,小明的同桌小华也有一只铅笔,但是没有转笔刀,但是他也需要削铅笔,咋办呢?

const xiaohua = { name: '小华', own: '铅笔' };

直接调用

xiaohua.zhuanbidao('削好的小华的铅笔', '小华铅笔的木屑'); // 肯定报错

此时,小华可以叫一下小明:‘小明哥,借个转笔刀使使呗’,于是便有了

xiaoming.zhuanbidao.call(xiaohua, '削好的小华的铅笔', '小华铅笔的木屑'); 
// 小华使用了转笔刀把铅笔变成了削好的小华的铅笔和小华铅笔的木屑

从上述示例不难理解,小明和小华都有各自的铅笔,这个铅笔可以看作this,但是小明自己有转笔刀,可以直接削自己的铅笔,但是小华没有,他只有自己的铅笔,于是他需要借小明的转笔刀来削自己的铅笔(this指向改变,变成了小华自己的铅笔),也一样可以得到自己削好的铅笔。
最后至于call和apply的区别就只是传参的方式不同而已

xiaoming.zhuanbidao.apply(xiaohua, ['削好的小华的铅笔', '小华铅笔的木屑']); 

bind可以看作只是和小明借到了转笔刀,但是还没有开始削,要削怎么办?调用一下方法咯;传参和call一样

xiaoming.zhuanbidao.bind(xiaohua, '削好的小华的铅笔', '小华铅笔的木屑')();

ok that’s all

作者:红领巾