js中的call、apply、bind详解

爱被打了一巴掌 2022-04-23 11:24 264阅读 0赞

### 文章目录 ###

*   *  call、apply
     *   *  一、作用
         *  二、区别
     *  bind
     *   *  一、作用
         *  二、区别

## call、apply ##

### 一、作用 ###

> 每个函数都包含两个方法，call() 和 apply()；  
> 在ES5中，this总是指向调用该函数的对象；  
> 在特定的作用域内调用函数，并且改变该函数的this指向 ；

1.  call

<script>
    
    	console.log(this);  			//this == window window
    	
    	window.color = 'red';
    	document.color = 'blue';
    	var color1 = { 
    		color: 'orange'
    	}
    	function getColor(){ 
    		consolor.log(this.color);
    	}
    	getColor();						//this指向window 'red'
    	
    	// 以下均是执行 getColor 函数，只不过是改变了this的指向
    
    	getColor.call(); 				//this默认指向window 'red'
    	getColor.call(this); 			//this指向window 'red'
    	getColor.call(window); 			//this指向window ‘red’
    	getColor.call(document); 		//this指向document 'blue' 
    	getColor.call(color1);			//this指向color1 'orange'
    	
    	//多个参数情况
    	var sum = { 
    		a: 0,
    		b: 0,
    		getSum: function(c, d){ 
    			return this.a + this.b + c + d;
    		}
    	}
    	var s1 = { 
    		a : 1,
    		b:  2
    	}
    	//执行方法
    	//this指向该对象， this.a == 0 this.b == 0;
    	sum.getSum(3, 4); 				// 7
    	//改变this，指向s1 this.a == 1 this.b == 2;
    	sum.getSum.call(s1, 3, 4);		// 10
    	
    </script>

1.  apply

<script>
    
    	function getColor(){ 
    		console.log(this.color);
    	}
    	window.color = 'red';
    	document.color = 'blue';
    	var color1 = { 
    		color: 'orange'
    	}
    	getColor.apply();
    	getColor.apply(this); 			//this指向window 'red'
    	getColor.apply(window); 		//this指向window ‘red’
    	getColor.apply(document); 		//this指向document 'blue' 
    	getColor.apply(color1);			//this指向color1 'orange'
    	
    	//多个参数情况
    	
    	function getColor(color){ 
    		this.color = color;
    		this.get = function(){ 
    			console.log(this.color);
    		}
    	}
    	function setColor(color){ 
    		getColor.apply(this, arguments);
    	}
    	var set = new setColor('orange');
    	set.get();						//orange
    
    </script>

### 二、区别 ###

*  call()和apply()唯一的区别就是传递参数不同

1.  call(this, 参数1, 参数2, 参数3, …)
2.  apply(this,\[参数1, 参数2, 参数3, …\])

> call()方法 和 apply()方法 唯一的区别就是传递参数不同，call()方法第一个参数是this，后面的参数必须一个一个的写出来，apply()方法第一个参数是this，后面跟了一个数组，参数都写在这个数组里面。

**如果apply()方法后面参数不跟数组会怎么样呢？**

*  会报错： Uncaught TypeError: CreateListFromArrayLike called on non-object

## bind ##

### 一、作用 ###

> 绑定函数，改变this指向

*  我们经常碰到这种情况，创建一个变量保存当前this

<script>
    
    	var foo = { 
    		name: '张三',
    		click: function(){ 
    			var _this = this;
    			document.body.onclick = function(){ 
    				console.log(_this.name);
    			}
    		}
    	}
    	foo.click();			//张三
    	
    </script>

*  以上写法也可以，但是不够优雅，我们可以通过bind(),更优雅的写出这个代码

<script>
    
    	var foo = { 
    		name: '张三',
    		click: function(){ 
    			document.body.onclick = function(){ 
    				console.log(this.name);
    			}.bind(this);
    		}
    	}
    	foo.click();			//张三
    	
    </script>

### 二、区别 ###

*  bind() 方法是返回对应的函数
 *  call() 方法、apply()方法是立即执行

发表评论取消回复

表情：

评论列表（有 0 条评论，264人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS中的参数传递详解

JS语法中的传递参数，对于初学者是一个非常重要的概念。很多小伙伴在学习“值传递”和“引用传递”时，会有不少烦恼。今天我们就来通过各种姿势全方位剖析JS中的值传递。本文章将会

╰+攻爆jí腚メ/ 2023年10月06日 15:44/ 0 赞/ 139 阅读

相关详解js中的变量

什么是变量变量：可以变化的量称作变量。常量：不可以改变的量称作常量。为什么要有变量程序：代码的集合，一般指的是文件，静态的。进程：程序的一次执行过程

r囧r小猫/ 2022年12月02日 13:53/ 0 赞/ 245 阅读

相关 js中的作用域详解

js中作用域(Scope)是什么作用域是可访问的变量的集合。在JavaScript中，作用域为可访问变量，对象，函数的集合，它分为局部作用域和全局作用域。作用域决定了这些

拼搏现实的明天。/ 2022年11月27日 03:23/ 0 赞/ 193 阅读

相关 js中typeof的用法详解

这篇文章主要是对js中typeof的用法进行了详细的汇总介绍，需要的朋友可以过来参考下，希望对大家有所帮助 JavaScript中的typeof其实非常复杂,它可以用来做很多

客官°小女子只卖身不卖艺/ 2022年06月18日 08:00/ 0 赞/ 452 阅读

相关 js中的继承详解

在js中实现的继承的方法可以有多种，除了原型继承之后，还可以使用借用、伪造构造函数的方法实现继承等等。接下来我们就详细的介绍一下这几种方式。 1.js中的原型继承关于

青旅半醒/ 2022年06月16日 12:46/ 0 赞/ 269 阅读

相关 js中的call、apply、bind详解

文章目录 call、apply 一、作用二、区别 bind 一、作用

爱被打了一巴掌/ 2022年04月23日 11:24/ 0 赞/ 265 阅读

相关 js中delete详解

js有自己的垃圾回收机制，因此delete用的时候不是很多，但是了解一下也还是有好处的。 1. 如果删除成功，返回true；反之，false; 2. 如果试图删除不存在的

妖狐艹你老母/ 2021年10月26日 15:32/ 0 赞/ 500 阅读

相关 JS中Class类的详解

概述在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。它可以被看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的

电玩女神/ 2021年09月19日 02:02/ 0 赞/ 557 阅读

相关 JS中Generator函数的详解

概念 Generator 函数是 ES6 提供的一种异步编程解决方案。它既是一个生成器，也是一个状态机，内部拥有值及相关的状态，生成器返回一个迭代器 Iterat

亦凉/ 2021年09月19日 01:54/ 0 赞/ 465 阅读

相关 JS中setTimeout()的用法详解

setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 m

た入场券/ 2021年09月15日 07:54/ 0 赞/ 515 阅读