首先从以下几点来考虑如何实现这几个函数
- 不传入第一个参数,那么上下文默认为
window
- 改变了
this
指向,让新的对象可以执行该函数,并能接受参数
那么我们先来
实现一个简单的 call:
Function.prototype.mCall = function (context) {
context.fn = this // 给 context 创建一个 fn 属性,并将值设置为需要调用的函数
context.fn(); // 然后调用函数并将对象上的函数删除
delete context.fn
}
var foo = {
value: 1,
}
function bar() {
console.log(this.value)
}
bar.mCall(foo) // 1
然后就可以根据这个思路,更新版本了:
Function.prototype.myCall = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
context = context || window
context.fn = this
const args = [...arguments].slice(1)
const result = context.fn(...args)
delete context.fn
return result
}
var foo = {
value: 1,
}
function bar(a, b) {
console.log(this.value, a, b)
}
bar.myCall(foo, 4, 5) // 1 4 5
arguments 是一个对应于传递给函数的参数的类数组对象。
arguments
对象不是一个 Array 。它类似于Array
,但除了length属性和索引元素之外没有任何Array
属性。例如,它没有 pop 方法。但是它可以被转换为一个真正的Array
:
function func1(a, b, c) {
console.log(arguments[0]);
// expected output: 1
console.log(arguments[1]);
// expected output: 2
console.log(arguments[2]);
// expected output: 3
}
func1(1, 2, 3);
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
// ES2015
const args = Array.from(arguments);
const args = [...arguments];
以下是对实现的分析:
- 首先
context
为可选参数,如果不传的话默认上下文为window
- 接下来给
context
创建一个fn
属性,并将值设置为需要调用的函数 - 因为
call
可以传入多个参数作为调用函数的参数,所以需要将参数剥离出来 - 然后调用函数并将对象上的函数删除
以上就是实现 call
的思路,apply
的实现也类似,区别在于对参数的处理,所以就不一一分析思路了
Function.prototype.myApply = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
context = context || window
context.fn = this
let result
// 处理参数和 call 有区别
if (arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn
return result
}
var foo = {
value: 1,
}
function bar(...a) {
console.log(this.value, ...a)
}
bar.myCall(foo,[4, 5, 8, 9]) // 1 4 5 8 9
bind
的实现对比其他两个函数略微地复杂了一点,因为 bind
需要返回一个函数,需要判断一些边界问题,以下是 bind
的实现
Function.prototype.myBind = function (context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
const _this = this
const args = [...arguments].slice(1)
// 返回一个函数
return function F() {
// 因为返回了一个函数,我们可以 new F(),所以需要判断
if (this instanceof F) {
return new _this(...args, ...arguments)
}
return _this.apply(context, args.concat(...arguments))
}
}
var foo = {
value: 1,
}
function bar(...a) {
console.log(this.value, ...a)
}
bar.myCall(foo, 4, 5, 8, 9)() // 1 4 5 8 9
以下是对实现的分析:
- 前几步和之前的实现差不多,就不赘述了
bind
返回了一个函数,对于函数来说有两种方式调用,一种是直接调用,一种是通过new
的方式,我们先来说直接调用的方式- 对于直接调用来说,这里选择了
apply
的方式实现,但是对于参数需要注意以下情况:因为bind
可以实现类似这样的代码f.bind(obj, 1)(2)
,所以我们需要将两边的参数拼接起来,于是就有了这样的实现args.concat(...arguments)
- 最后来说通过
new
的方式,在之前的章节中我们学习过如何判断this
,对于new
的情况来说,不会被任何方式改变this
,所以对于这种情况我们需要忽略传入的this