bind、call、apply 的区别、使用及实现

落日映苍穹つ 2022-11-17 03:49 158阅读 0赞

###### 一、首先来看一下他们的区别 ######

相同点：

> 这三个 api 都可以改变 this 的指向  
> 第一个参数都是 this 指向的对象  
> 如果第一个参数是 null undefined ，则函数的 this 不改变  
> 都可以传递参数

不同点：  
1、call 和 apply 都可以对函数进行直接调用，bind 方法返回的是一个函数，需要手动调用函数

let obj= { 
    	name:'小米',
    	print(){ 
    		console.log(`${ this.name}`)
    	}
    }
    let obj1 = { 
    	name:'华为'
    }
    obj.print.call(obj1) 
    obj.print.apply(obj1)
    obj.print.bind(obj1)()

三种方法都可以将 obj.print 的 this 指向 obj1；打印的结果都是一样的，但是写法上 bind 需要手动调用一下才会执行函数。

2、传参方式不同

let obj= { 
    	name:'小米',
    	print(a,b){ 
    		console.log(`${ this.name}参数${ a}-${ b}`)
    	}
    }
    let obj1 = { 
    	name:'华为'
    }
    obj.print.call(obj1,1,2) 
    obj.print.apply(obj1,[1,2])
    obj.print.bind(obj1,1,2)()
    //obj.print.bind(obj1)(1,2)

> call 和 bind 传递的参数和 print 方法里面的是一一对应的，而 apply 传递是的一个数组，数组里的元素和 print 方法里面的是一一对应的  
> bind 还可以在调用的时候进行传参，和上面代码注释掉的那样

###### 二、常见使用 ######

1、将类数组转换成真数组  
类数组：有 length 属性和数值下标属性，但是不具有数组的方法，它是一个 Object。  
（常见的类数组 querySelectorAll，getElementByclassName，getElementsByTagName，arguments的集合）

let pseudoArr = { 
    	0: 2,
        1: 4,
        2: 5,
        3: 7,
        4: 9,
        length: 5
    }
    let arr = [];
    arr.push.apply(arr,weiArr);
    //arr = [].slice.call(weiArr);

2、无入侵获取无序数组的最大值最小值

let arr = [1,2,3,9,4,12,10];
    //获取最大值
    let max = Math.max.call(null,...arr);
    let max = Math.max.apply(null,arr);
    let max = Math.max.bind(null,...arr)();
    //获取最小值
    let min= Math.min.call(null,...arr);
    let min= Math.min.apply(null,arr);
    let min= Math.min.bind(null,...arr)();

call、apply、bind 会将数组作为参数传给 Math.min() 方法；

3、合并数组

let arr1 = [1,2,3];
    let arr2 = [4,5,6];
    Array.prototype.push.apply(arr1,arr2);
    //Array.prototype.push.call(arr1,...arr2);
    console.log(arr1); // [1,2,3,4,5,6]

4、判断数组是数组

let arr = [1,2,3];
    console.log(Object.prototype.toString.cal(arr) == '[object Array]'); //true

###### 三、手动实现 ######

1、call  
核心思想：给 obj 设置一个尽量唯一的属性，属性值是要执行的函数（需要改变this的函数），然后执行函数并传入参数，最后删除设置的新属性。

Function.prototype.testCall = function(obj,...params){ 
    	//判断obj（目标对象）是否存在，不存在则默认 window 
    	obj = obj || window;
    	//利用 Symbol 定义一个唯一的属性名 Symbol(KEY)
    	let key = Symbol('KEY'),result;
    	//用 this 获取调取 testCall 的函数，并赋值给 obj[key] 
    	obj[key] = this;
    	//传参给 obj 的 obj[key] 函数并调用
    	result = obj[key](...params);
    	delete obj[key];
    	return result;
    }

2、apply

Function.prototype.testApply= function(obj,params){ 
    	obj = obj || window;
    	let key = Symbol('KEY'),result;
    	obj[key] = this;
    	if(!params){ 
    		result = obj[key]()
    	}else{ 
    		if(!params instanceof Array){ 
    			console.log('第二个参数必须是数组！')
    		}else{ 
    			result = obj[key](...params)
    		}
    	}
    	return result;
    }

3、bind

Function.prototype.testBind = function(obj,...params){ 
    	let that = this;
    	return function (){ 
    		let paramsArr = params.concat(arguments)
    		that.apply(obj,paramsArr);
    		//that.call(obj,...paramsArr);
    	}
    }