美文网首页
javascript中bind、call、apply等函数的用法

javascript中bind、call、apply等函数的用法

作者: xiaolizhenzhen | 来源:发表于2018-02-07 14:32 被阅读0次

    前言

    ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已。

    call()

    call(),为改变某个函数运行时的上下文(context)而存在的,换句话说,是为了改变函数内部的this指向。
    call 方法第一个参数作为函数上下文的对象,但是后面传入的是一个参数列表,而不是数组。

    // demo1
    var sayKlay = {
        name :"Klay",
        say : function(){
            console.log(this.name);
        }
    }
    var sayClam = {
        name : 'Clam' 
    }
    /* 
    sayClam没有say方法,但是sayKlay()有,
    所以可以把sayKlay.say()方法的运行时上下文
    也就是运行时的this的指向,指向sayClam
    这个时候用say()方法就可以sayClam了。
    */
    sayKlay.say.call(sayClam); // Clam
    
    // demo2
    function a(xx) {         
        this.b = xx; 
    } 
    var o = {}; 
    a.call(o, 5); 
    console.log(a.b);    // undefined 
    console.log(o.b);    // 5 
    

    apply()

    apply方法实际上是与call方法用法相同,只不过apply方法传进去的参数是以数组形式。
    apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作为函数参数所组成的数组。

    function add(a,b) {         
        this.sum = a + b; 
    } 
    var o = {}; 
    add.call(o, 5,5);
    console.log(o.sum);    // 10
    add.apply(o,[3,5]);
    console.log(o.sum);    // 8
    

    bind()

    bind()的作用其实与call()以及apply()都是一样的,都是为了改变函数运行时的上下文,bind()与后面两者的区别是,call()和apply()在调用函数之后会立即执行,而bind()方法调用并改变函数运行时的上下文的之后,返回一个新的函数,在我们需要调用的地方去调用他。

    var a = 1;
    var obj = {
        a=9;
    };
    function example(b){
        return this.a+b
    };
    console.log(example.bind(obj,2));  // 打印出来的是一个函数  不会立即执行
    
    var newexample = example();
    newexample(); // 调用的地方去调用
    
    

    对比

    call,apply,bind 三者用法和区别:参数、绑定规则(显示绑定和强绑定)、运行效率(最终都会转换成一个一个的参数去运行)、运行情况(call,apply 立即执行,bind 是return 出一个 this “固定”的函数,这也是为什么 bind 是强绑定的一个原因)。

    注:“固定”这个词的含义,它指的固定是指只要传进去了 context,则 bind 中 return 出来的函数 this 便一直指向 context,除非 context 是个变量。

    详情参考:

    JavaScript 中 apply 、call 的详解
    javascript中call(),apply().bind()方法的作用和异同

    相关文章

      网友评论

          本文标题:javascript中bind、call、apply等函数的用法

          本文链接:https://www.haomeiwen.com/subject/osaozxtx.html