下面时对apply方法的实现,了解aplly方法的使用点这里:改变this指向,call,apply,bind的不同
一、apply方法的实现代码
// 用于改变函数this的对象
const obj = {
name: '张三'
};
// 带有返回值的测试函数
function sayHello(age, sex) {
console.log(`Hello ${this.name},age:${age},sex:${sex}`);
return {
name: this.name,
age: age,
sex: sex
}
}
Function.prototype.myApply = function (obj, arr) {
// 拿到obj,如果obj隐式转换是false,那么取window
const object = obj || window;
object.fun = this; // 上面已经测试过,this指向的是调用myApply方法的函数,这相当于在对象里创建了一个叫fun的函数,函数体是调用myApply方法的函数
let result; // 用于后续获取函数的返回值
if (arr) {
// 如果有参数,则将参数解构当作方法的参数
// 执行通过this绑定的方法,并拿到返回值,因为函数有可能会有返回值,所以需要接收。这里方法里的this已经指向object了,不明白可以看最下面第五大点。
result = object.fun(...arr);
} else {
result = object.fun();
}
delete object.fun; // 知识点3,对象是引用传递,我们不能改变传进来的参数,所以我们要从传进来的参数身上把我们通过this绑定的方法删除掉。
return result; // 返回执行函数的结果。
}
console.log(sayHello.myApply(undefined, [18, "男"]));
二、myApply方法测试结果
三、apply方法的实现步骤
1.myApply内部将【第一个参数(this将指向的对象)】身上【添加了一个方法】,【添加的方法】就是【调用myApply的方法】。
2.如果传递了2个参数,应该把第2个参数当作【添加的方法】的参数。
3.然后用这种方式执【添加的方法】:【第一个参数.添加的方法】。并保存他的返回值。
4.执行完【添加的方法】后要删除【添加的方法】。
5.返回执行【添加的方法】后保存的返回值。
细节:js内置apply不传参数或第一个参数传undefined,null时this应该是指向window的;如果第一个参数传入基础数据类型,this应该指向其包装类,这里我们不考虑传递基础数据类型的情况。
四、必备知识点
1.要清楚普通函数的this指向题:【谁调用只想谁,比如:对象调用方法,方法的this指向对象】,apply的实现也是利用了这一点。
2.实现apply我们就要把自己定义的myApply挂到Function的原型prototype上,这样所有的方法就都可以使用了。
3.对象传递是引用传递。
五、用this将方法绑定到myCall第一个参数上的原理
// 知识点第二点,挂到原型上
Function.prototype.myApply = function () {
console.log(this); // 打印一下this,看看方法调用的时候this指向谁。
}
// 定义一个使用myApply的函数。
function test() {}
console.group("myApply中的this指向(指向调用myApply方法的函数)")
test.myApply(); // 输出结果:ƒ test() {} 。
// 原因就是知识点1,test调用了myApply,所以myApply的this指向了test。
// 在真是放些apply时也是利用了这一点,把this赋给this将指向的对象里的一个属性,实质是把this原本的方法赋值到了对象的属性上,然后用对象调用属性方法执行,这时属性方法内部的this就指向了这个对象,而属性方法本身就是调用apply时的那个方法。
console.groupEnd();
到这里就结束了。后续还会有bind方法的实现。
如果对你有帮助可以👍+关注哦~~我们一起学前端。