一、实现call函数
Function.prototype.myCall = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
//当传入的context为基础类型时,直接挂载fn会报错
if(typeof context !== 'object') context=new Object(context);
context = context || window //context 为可选参数,如果不传的话默认上下文为 window
context.fn = this //给 context 创建一个 fn 属性,并将值设置为需要调用的函数
const args = [...arguments].slice(1) //call 可以传入多个参数作为调用函数的参数,所以需要将参数剥离出来
const result = context.fn(...args)
delete context.fn //调用函数并将对象上的函数删除
return result
}
二、实现apply函数
Function.prototype.myApply = function(context) {
if (typeof this !== 'function') {
throw new TypeError('Error')
}
if(typeof context !== 'object') context=new Object(context);
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
}
三、实现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))
}
}
以下是对实现的分析:
bind
返回了一个函数,对于函数来说有两种方式调用,一种是直接调用,一种是通过new
的方式- 对于直接调用来说,这里选择了
apply
的方式实现,但是对于参数需要注意以下情况:因为bind
可以实现类似这样的代码f.bind(obj, 1)(2)
,所以我们需要将两边的参数拼接起来,于是就有了这样的实现args.concat(...arguments)
- 对于
new
的情况来说,不会被任何方式改变this
,所以对于这种情况我们需要忽略传入的this
四、实现一个new
function create() {
let obj = {} //新生成一个对象
let Con = [].shift.call(arguments) //获取构造函数
obj.__proto__ = Con.prototype //链接到原型
let result = Con.apply(obj, arguments) //绑定this并执行构造函数
return result instanceof Object ? result : obj //确保返回值为对象
}