文章目录
1.Call
1.1 回顾Call
function person(){
console.log(this.name);
if(arguments.length <=1 ) return;
for(var i=0;i < arguments.length;i++){
console.log(arguments[i])
}
}
var p = {name:"小明"};
person.call(p,'我','爱','中国');
小明
我
爱
中国
Call()方法定义在Function.prototype中
1.2 手写call
基本思路:保留this——执行函数——删除函数
调用call时不传其他参数
function person(){
console.log(this.name);
}
var p = {name:"小明"};
Function.prototype.myCall = function(obj){
obj.person = this;// 这里的this指向person()函数,因为是person对象来直接调用myCall()
obj.person();// 相当于用p对象执行person()
delete obj.person;
}
person.myCall(p);
// 小明
调用call时传递其他参数
function person(){
console.log(this.name);
if(arguments.length <1 ) return;
for(var i=0;i < arguments.length;i++){
console.log(arguments[i])
}
}
var p = {name:"小明"};
Function.prototype.myCall = function(obj){
obj.person = this;// 这里的this指向person()函数,因为是person对象来直接调用myCall()
// 处理其他参数
var myArguments = [];
for(var i = 1;i < arguments.length ;i++){
myArguments.push(arguments[i]);
}
obj.person(...myArguments);// 相当于用p对象执行person()
delete obj.person;
}
person.myCall(p,'我','爱','中国');
注意上述代码使用了rest
参数代替arguments
变量
改进返回值后:
function person(){
console.log(this.name);
if(arguments.length <1 ) return;
for(var i=0;i < arguments.length;i++){
console.log(arguments[i])
}
return {
name:this.name,
...arguments
}
}
var p = {name:"小明"};
Function.prototype.myCall = function(obj){
obj.person = this;// 这里的this指向person()函数,因为是person对象来直接调用myCall()
// 处理其他参数
var myArguments = [];
for(var i = 1;i < arguments.length ;i++){
myArguments.push(arguments[i]);
}
var result = obj.person(...myArguments);// 相当于用p对象执行person()
delete obj.person;
return result;
}
console.log(person.myCall(p,'我','爱','中国'));
小明
我
爱
中国
{ '0': '我', '1': '爱', '2': '中国', name: '小明' }
2.Apply
2.1 回顾Apply
apply与call的区别在于,apply只接受两个参数,一个是this的指向,另外一个是数组,该数组存放了所有其他需要传入该函数的参数。
2.2 手写apply
function person(){
console.log(this.name);
if(arguments.length <1 || !arguments) return {};
console.log(arguments);
for(var i=0;i < arguments.length;i++){
console.log(arguments[i])
}
return {
name:this.name,
...arguments
}
}
var p = {name:"小明"};
Function.prototype.myApply = function(obj,arr){
var obj = obj || window,result;
obj.person = this;// 这里的this指向person()函数,因为是person对象来直接调用myCall()
// arr为空
if(!arr || arr.length === 0){
result = obj.person();
} else{
// 处理其他参数
var myArguments = [];
for(var i = 0;i < arr.length ;i++){
myArguments.push(arr[i]);
}
var result = obj.person(...myArguments);// 相当于用p对象执行person()
}
delete obj.person;
return result;
}
// console.log(person.myApply(p,['我','爱','中国']));
console.log(person.myApply(p));
3.Bind
3.1 回顾Bind
bind会返回一个函数。
bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,例如,f.bind(obj),实际上可以理解为obj.f(),这时,f函数体内的this自然指向的是obj
3.2 手写bind
https://blog.csdn.net/qlwangcong518/article/details/86261597