使用模拟实现的方式探究call 和 apply 的原理
call
作用:
call() 方法就是在使用一个指定 this 值和若干个指定的参数值的前提下调用某个函数或者方法。
var foo = { value : 1}function bar() { console.log(this.value)}// 如果不对this进行绑定执行bar() 会返回undefinedbar.call(foo) // 1
也就是说call()
改变了 this
的指向到了 foo
。
下面进行一下模拟实现
试想当调用 call 的时候,也就是类似于
var foo = { value: 1, bar: function() { console.log(this.value) }}foo.bar() // 1
这样就把 this 指向到了 foo 上,但是这样给 foo 对象加了一个属性,有些瑕疵,不过不要紧,执行完删除这个属性就可以完美实现了。
也就是说步骤可以是这样:
- 将函数设为对象的属性
- 执行这个函数
- 删除这个函数
下面就试着去实现一下:
Function.prototype.call2 = function(context) { context.fn = this // this 也就是调用call的函数 var result = context.fn() delete context.fn() return result}var foo = { value: 1}function bar() { console.log(this.value)}bar.call2(foo) // 1
但是这样有一个小缺陷就是call()
不仅能指定this到函数,还能传入给定参数执行函数比如:
var foo = { value: 1}function bar(name, age) { console.log(name) console.log(age) console.log(this.value)}bar.call(foo, 'black', '18')// black// 18// 1
特别要注意的一点是,传入的参数的数量是不确定的,所以我们要使用arguments
对象,取出除去第一个之外的参数,放到一个数组里:
Function.prototype.call2 = function(context) { context.fn = this // this 也就是调用call的函数 var args = [...arguments].slice(1) var result = context.fn(...args) delete context.fn() return result}var foo = { value: 1}function bar(name, age) { console.log(name) console.log(age) console.log(this.value);}bar.call2(foo, 'black', '18') // black 18 1
还有一点需要注意的是,如果不传入参数,默认指向为 window,所以最终版代码:
Function.prototype.call2 = function(context) { var context = context || window context.fn = this // this 也就是调用call的函数 var args = [...arguments].slice(1) var result = context.fn(...args) delete context.fn() return result}var value = 1function bar() { console.log(this.value)}bar.call2()
apply
apply
的方法和 call
方法的实现类似,只不过是如果有参数,以数组形式进行传递,直接上代码:
Function.prototype.apply2 = function(context) { var context = context || window context.fn = this // this 也就是调用apply的函数 var result // 判断是否有第二个参数 if(arguments[1]) { result = context.fn(...arguments[1]) } else { result = context.fn() } delete context.fn() return result}var foo = { value: 1}function bar(name, age) { console.log(name) console.log(age) console.log(this.value);}bar.apply2(foo, ['black', '18']) // black 18 1