手写call与apply方法

在构建call和apply方法前,首先需要分析他们所要实现的功能

• 首先自然是将函数的this指向我们设定的对象
• 其次是参数的解决,第一个参数为指定的this对象,后面的参数若是call则分开存放，若是apply则存进数组。

Function.prototype.myCall = function(...arg) {
	// 取出this（也就是需要被执行的函数）
	let fn = this
	if(typeof fn !== 'function') {
		return
	}
	// 取出第一个参数当作上下文（需要判断是否为对象）
	let obj = arg[0]
	// 只有当obj为一个对象时才会继续向下执行，否则直接返回函数并执行
	if(typeof obj !== "object" && obj !== null) {
		return fn()
	}
	// 拿到函数参数（call）
	let params = arg.slice(1)
	// 拿到函数参数（apply）
	//let params = arg.slice(1)[0]
	// 拿到函数名称作为key，保存进obj，并将key指向函数，这样函数的this就指向了obj
	let key = fn.name
	obj[key] = fn
	// 执行函数
	let result = obj[key](...params)
	// 执行完毕后删除key
	delete obj[key]
	return result
}

测试

let obj = {name: 'fufu'}
let fn = function(num1, num2) {
	console.log(this.name, num1, num2)  //fufu, 1, 1
}
fn.myCall(obj, 1,2)

虽然上面的代码已经尽力与原生call方法保持一致,但是经过测试发现还是会有不同之处,那就是打印函数里面的this时,会有一个虚假的函数属性存在。

let obj = {name: 'fufu'}
let fn = function(num1, num2) {
	console.log(this)  //{name: "fufu", fn: ƒ}
}
fn.myCall(obj, 1,2)

按照我们预想,打印出this应该就是obj对象,却多出了一个fn,看我们上面的代码可以看出其实是在执行函数之前将函数名称作为对象的键存入时打印出来的,而删除该属性是在函数执行之后,所以打印出来的时候保留了该属性,但是该属性是虚假的,因为执行完函数后该属性就被删除了,而引用数据类型的修改是根据内存地址去进行值的修改,所以即使打印出的对象里面有这个属性,但当你展开后会发现找不到该属性,目前在网上查找到的所有关于call的源码都没有解决该问题,也不知到js里面的call源码是怎么解决的若有人知道望分享。