JavaScript中bind、call、apply的用法

改变JavaScript中执行函数的this指向,用到call、apply和bind三个函数继承自Function.prototype的方法,三者功能相近又各有不同。

在JavaScript中使用typeof关键字检测数据类型存在其局限性,比如无法区分数组、对象和null

typeof [] // -> "object"
typeof {} // -> "object"
typeof null // -> "object"

更优的数据类型检测手段是巧妙借用Object.prototype.toString方法:

Object.prototype.toString.call(Function.prototype) // -> "[object Function]"
Object.prototype.toString.call(Array.prototype) // -> "[object Array]"
Object.prototype.toString.call({}) // -> "[object Object]"
Object.prototype.toString.call([]) // -> "[object Array]"
Object.prototype.toString.call(null) // -> "[object Null]"

执行时机不同:

callapplybind的调用时机不同,执行callapply是立即调用函数,执行bind会返回一个新的函数并不会执行旧函数。

待传参数不同:

callbindapply的待传参数有细微的不同。它们三者第一个待传参数都是作为this使用,如果传入nullundefined则在一般情况下this指向window。其它原始值则被包装成它们各自的包装对象,比如1被包装成变成new Number(1)。严格模式下,第一个待传参数的实参是什么this就是什么,比如传入1那么this就是1,传入nullundefinedthis就是nullundefined

执行apply第二个参数可以不填,但凡传入第二个参数则必须是数组或类数组对象,第二个参数之后的参数将全部忽略;

执行callbind第二个参数也可以不填,且对参数的数量没有要求,不管传入多少实参,这些实参都会被传入被调用的函数中。

除了apply最多传两个参数即可,且第二个参数必须是数组或类数组对象以外,执行callbind对待传参数数量没有限制,而且bind还有一个神奇的作用:

'use strict'
var foo = function(){
  console.log(arguments)
}
var foo1 = foo.bind(null, 1, 2)
var foo2 = foo1.bind(null, 3, 4, 5)
foo2(6, 7)

连续执行bind会保留更早传入的实参。那么this的指向会以那一次bind为准呢:

var foo = function(){
  console.log(arguments)
  console.log(this)
}
var foo1 = foo.bind([], 1, 2)
var foo2 = foo1.bind({}, 3, 4, 5)
foo2(6, 7)

可见this总是指向第一次执行bind时传入的那个实参。

版权声明 » 自由转载-署名-非商用-相同方式共享

作者署名 » 陈帅华-探索技术艺术与国学之美

发布日期 » 2019年7月17日 星期三

我要留言