理解JavaScript中的apply,call,bind方法

前言:

JavaScript中的call(), apply()和bind()是Function.prototype下的方法,都是用于改变函数运行时上下文(即:call()、apply()、bind() 都是用来重定义 this 这个对象的),最终的返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined。

  • apply()
    apply()的第一个参数是null,在非严格模式下,第一个参数为null或者undefined时会自动替换为指向全局对象,apply()的第二个参数为数组或类数组。

  • call()
    call()是apply()的一颗语法糖,作用和apply()一样,同样可实现继承,唯一的区别就在于call()接收的是参数列表,而apply()则接收参数数组。

  • bind()
    bind()的作用与call()和apply()一样,都是可以改变函数运行时上下文,区别是call()和apply()在调用函数之后会立即执行,而bind()方法调用并改变函数运行时上下文后,返回一个新的函数,供我们需要时再调用。

举个栗子:
理解JavaScript中的apply,call,bind方法

obj.objAge;  // 17
obj.myFun()  // 小张年龄 undefined

理解JavaScript中的apply,call,bind方法

obj.myFun.call(db);    // 德玛年龄 99
obj.myFun.apply(db);    // 德玛年龄 99
obj.myFun.bind(db)();   // 德玛年龄 99

!!bind() 返回的是一个新的函数,必须调用它才会被执行。

例二
理解JavaScript中的apply,call,bind方法

obj.myFun.call(db,'成都','上海');       //德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      //德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       //德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();    //德玛 年龄 99  来自 成都, 上海去往 undefined

区别:
apply()的所有参数都必须放在一个数组里面传进去,bind() 除了返回的是函数以外,它的参数和call()一样都是参数的列表。

如何选用:

  • 如果不需要关心具体有多少参数被传入函数,选用apply();
  • 如果确定函数可接收多少个参数,并且想一目了然表达形参和实参的对应关系,用call();
  • 如果想要以后再调用方法,不需立即得到函数返回结果,则使用bind();

写在最后:

  • call()、apply()、bind()都是用来改变函数执行时的上下文,可借助它们实现继承;
  • call()和apply()唯一区别是参数不一样,call()是apply()的语法糖;
  • bind()返回一个新函数,供以后调用,apply()和call()是立即调用。
上一篇: call()、apply()、bind() 的用法


下一篇:详解 JavaScript的 call() 和 apply()