apply,call,bind个人总结

直接开始,不多说了,你们能点到这个博客里来也不会是来看我扯蛋的-如果有朋友觉得我写的有问题或哪里些错的麻烦留言指点

1.什么是apply,call,bind

     首先他们是用来改变调用方法中this的指向的,而且他们都是Function的prototype。分别为

• Function.prototype.apply()
• Function.prototype.call()
• Function.prototype.bind()

2.apply,call,bind 如何使用及对应参数含义

•  apply

 

参数1 thisArg:对象也就是需要指向this的对象

参数2 argsArray:数组 会按对应的索引来替换调用方法中的参数

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers);
console.log(max);
// expected output: 7
var min = Math.min.apply(null, numbers);
console.log(min);
// expected output: 2


var name = "windowsName";

var a = {
    name : "Cherry",
};

	
function v(name,cc,gg){
	console.log(this.name+'--'+name)
	console.log('cc--'+cc)
	console.log('gg--'+gg)

}
	
v(1,2,3).apply(a,['传递成功','q','c'])

这里改变了 v中this的指向,this应该是调用者的 v方法而言也就是 window.如果没有使用apply输出的会是windows 1 2 3.这个参数替换参数是有上限的 因为数组的上限是65536个所以apply能替换的参数个数也是65536

• call

参数1 thisArg:对象也就是需要指向this的对象

参数2 arg1...argn:对个对象 会按对应的位置来替换原有方法中的元素传递给方法

var name = "windowsName";

var a = {
    name : "Cherry",
};

	
function v(name,cc,gg){
	console.log(this.name+'--'+name)
	console.log('cc--'+cc)
	console.log('gg--'+gg)
}

v(1,2,3).call(a,['传递成功','q','c'],'2','3')

	

这里改变了 v中this的指向,this应该是调用者的 v方法而言也就是 window.如果没有使用apply输出的会是windows 1 2 3

• bind

参数1 thisArg:对象也就是需要指向this的对象

参数2 arg1...argn:对个对象 会按对应的位置来替换原有方法中的元素传递给方法

其实bind基本和call一样但在调用方便有点区别,bind通过闭包实现的所以调用时.bind()() 或方法赋值后调用  var a= c();a.bind()

3.兼容性

• apply

• call

• bind

4.实现原理

apply call bind的实现原理就是a().apply(b) 把a方法再b中调用改变他的调用者 调用完毕后再再b中删除a方法

//apply
Function.prototype.apply = function(thisArg, args) {
    thisArg = thisArg || window
    thisArg.fn = this
    let result
    if(args) {
        result = thisArg.fn(...args)
    } else {
        result = thisArg.fn()
    }
    delete thisArg.fn
    return result
}

//call
Function.prototype.call = function (obj) {
     var obj= obj || window;  // 当call的第一个参数没有或者是null的时候，this的指向是window
     obj.fn = this;  // 把a方法放进里面
     var args = []; // 用于存储call后面的参数
     for (var i = 1; i < arguments.length; i++) {  // 这里是为了将一个函数的参数传入到另外一个函数执行
         args.push('arguments[' + i + ']');
     };   //eval() 实现js代码的方法
     var result = eval('obj.fn(' + args + ')');  // 在eval的环境下 args数组会变成一个一个参数字符串（默认是会调用Array.toString()）
     delete obj.fn;  // 删除b里面的a方法
     return result;
};

//bind
Function.prototype.bind = function(obj){
     var self =this; //第一个参数为它运行时的this，应该取第二个之后的参数
     var args =Array.prototype.slice.call(arguments,1);
     var newFn = function(){ //返回一个新函数闭包
         self.apply(obj,args);
     };
     return newFn;
};

5.其他改变this指向的方法

• var _this = this  赋值
• ES6箭头函数 箭头函数是没有this对象的会获取最近对象的this
• 还有就是apply call bind

有朋友如果还有补充的也麻烦留言,让大家看到学习