call,apply,bind区别

JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题,常用的有 bind()call()apply()三种方法。

call,apply,bind的基本介绍

语法:

fun.call(thisArg, param1, param2, ...)//参数为第2~n
fun.apply(thisArg, [param1,param2,...])//参数为数组
fun.bind(thisArg, param1, param2, ...)//不执行该函数

返回值:

call/apply:fun执行的结果 bind:返回fun的拷贝,并拥有指定的this值和初始参数

参数

thisArg(可选):

  • 若thisArg存在,funthis指向thisArg对象
  • 非严格模式下:若thisArg指定为null,undefined,fun中的this指向window对象.
  • 严格模式下:funthis为指定的null或undefined
  • 值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象,如 String、Number、Boolean

严格模式下和非严格模式下,this有所区别:
// 非严格模式
fn.call(); // this -> window
fn.call(null); // this -> window
fn.call(undefined); // this -> window

// 严格模式
fn.call(); // this -> undefined
fn.call(null); // this -> null
fn.call(undefined); // this -> undefined

调用call/apply/bind的必须是个函数

区别:

  • 共同点:都可以改变this指向

  • 不同点:

    • call() 和 apply() 会调用函数,并且改变函数内部this指向.
    • call() 和 apply()传递的参数不一样,call()传递参数使用逗号隔开apply()使用数组传递
    • bind() 不会调用函数,可以改变函数内部this指向
  • 应用场景

    1. call()经常做继承
    2. apply()经常跟数组有关系,比如借助于数学对象实现数组最大值最小值
    3. bind()不调用函数,但是还想改变this指向,比如改变定时器内部的this指向
 call()apply()bind()
相同点改变函数this指向改变函数this指向改变函数this指向
是否调用函数
传递参数逗号,隔开数组形式[]逗号,隔开
应用场景参数数量/顺序确定就用call与数组有关不想调用函数

阅读剩余
THE END