详解call(),apply()和bind()

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014267183/article/details/52610600

  之前看了点es6的箭头函数,为了搞懂箭头函数的this,看了很多文章,也顺便看了几个绑定函数,发现很多以前没注意的问题,收获不少。

  之前就在网上的笔试题中看过用js实现bind()函数,没怎么在意,以为既然都是用来进行上下文绑定的,用call或者apply应该就能实现。现在看,我还是图样图森破。

  先来讲一下call()和apply()吧,对于这两个函数,我是看自己的书学习的,学的时候没觉的有什么问题,但是我查了一下网上的关于call()和apply()的文章,尼玛啊,这说都是些什么啊!!看着真费劲。

  其实,call()和apply()就是改变函数的执行上下文,也就是this值。他们两个是Function对象的方法,每个函数都能调用。他们的第一个参数就是你要指定的执行上下文,第二个用来传递参数(说第二个不准确,应该说第二部分,因为参数可以传多个),也就是传给调用call和apply方法的函数的参数。说白了,就是调用函数,但是让它在你指定的上下文下执行,这样,函数可以访问的作用域就会改变。下面看点代码:

function apply1(num1, num2){
    return sum.apply(this, [num1, num2]);
    }
function call1(num1, num2){
    return sum.call(this, num1, num2);

    }

这里,我们执行环境传的是this,也就是说没改变函数的执行上下文。这两段代码,只是想告诉你call和apply的区别。

call的第二部分参数要一个一个传,apply要把这些参数放到数组中。这就是他们的区别,真的就这么点区别!!!

然后,不得不说的一点:它们的第二个参数都可以传arguments。


—————————————————————————————————————————————————————————————————————————————

下面来讲bind()函数,bind()是es5中的方法,他也是用来实现上下文绑定,看它的函数名就知道。bind()和call与apply不同。bind是新创建一个函数,然后把它的上下文绑定到bind()括号中的参数上,然后将它返回。

所以,bind后函数不会执行,而只是返回一个改变了上下文的函数副本,而call和apply是直接执行函数。

下面代码可以反映出这点,而且也显示了bind的用法(后面的代码皆取自张鑫旭大神的博客)

var button = document.getElementById("button"),
    text = document.getElementById("text");
button.onclick = function() {
    alert(this.id); // 弹出text
}.bind(text);

但由于ie6~ie8不支持该方法,所以若想在这几个浏览器中使用,我们就要模拟该方法,这也是面试常考的问题,模拟的代码如下:

if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
        var self = this
            , args = Array.prototype.slice.call(arguments);
            
        return function() {
            return self.apply(context, args.slice(1));    
        }
    };
}
就是这段代码,纠正了我长久以来的一个误区。下面来讲一下这段代码

首先,我们判断是否存在bind方法,然后,若不存在,向Function对象的原型中添加自定义的bind方法。

这里面var self = this这段代码让我很困扰,按理说,prototype是一个对象,对象的this应该指向对象本身,也就是prototype,但真的是这样吗。看看下面的代码:

function a(){};

a.prototype.testThis = function(){console.log(a.prototype == this);};

var b = new a();

b.testThis();//false

显然,this不指向prototype,而经过测试,它也不指向a,而指向b。所以原型中的this值就明朗了。指向调用它的对象。

Array.prototype.slice.call(arguments);
接下来就是上面这段代码,它会将一个类数组形式的变量转化为真正的数组。为啥呢,其实书上并没有说slice还有这样的用法,也不知道是谁发明的。slice的用法可以顺便上网查一下,就能查到。但要更正一点,网上的介绍说slice有两个参数,第一个参数不能省略。然而我不知道是我理解的问题还是咋地,上面这段代码tmd不就是典型的没传参数吗!!!arguments是传给call的那个上下文,前面讲过,不要弄混(由于arguments自己没有slice方法,这里属于借用Array原型的slice方法)。而且经过测试,若果你不给slice传参数,那就等于传了个0给它,结果就是返回一个和原来数组一模一样的副本。

这之后的代码就很好理解,返回一个函数,该函数把传给bind的第一个参数当做执行上下文,由于args已经是一个数组,排除第一项,将之后的部分作为第二部分参数传给apply,前面讲过apply的用法。

如此,我们自己的这个bind函数的行为就同es5中的bind一样了。



阅读更多
换一批

没有更多推荐了,返回首页