JavaScript(12)：apply、call、bind

最新推荐文章于 2024-03-31 15:50:35 发布
最新推荐文章于 2024-03-31 15:50:35 发布
阅读量565 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript ecmascript apply call bind
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawn0718/article/details/122910113
版权

　　JavaScript是一门非常灵巧的面向对象的开发语言，函数作为“第一公民”有很多方面的特殊应用手段，比如bind、apply、call等方法函数，它们的使用方式、传递参数都是一样的，也有区别。通过它们的使用，在以后面向对象的开发、建模、多态应用上会有很好的表现手段。

　　不同的是：
　　bind：绑定this的指向，然后返回一个新函数，返回的对应方法不会立即执行，需要调用才执行
　　call、apply：改变this的指向，调用是立即执行的。

　　apply和call的不同点：
　　1、call：接收的参数是逐个传入的；
　　2、apply：接收的是参数数组。

　　注意：当第一个参数为null时，非严格模式下（默认情况），this指向window；严格模式（"use strict"），this指向null。

　　举例：

	//函数返回一个对象，包括给定参数的最大值、最小值、总和、平均值
	var funcA=function(...arg){
		var valRang={
			max:0,
			min:0,
			total:0,
			average:0
		}
		valRang.max=Math.max.call(null,...arg);
		valRang.min=Math.min.call(null,...arg);
		valRang.total=(function(){
			var x=0;
			for(var i=0;i<arguments.length;i+=1){
				x=x+arguments[i];
			}
			return x;
		})(...arg);
		valRang.average=valRang.total/arguments.length;
		
		return valRang;
	}
	
	console.log('---正常调用---');
	console.log(funcA(11,23,59,67,91));
	
	console.log('---使用call方法调用---');
	console.log(funcA.call(this,11,23,59,67,91));
	
	console.log('---使用apply方法调用---');
	console.log(funcA.apply(null,[11,23,59,67,91]));
	
	console.log('---使用bind方法调用---');
	console.log(funcA.bind(null,11,23,59,67,91)());

　　输出结果图：

 　　通过这些方法可以应用其他对象的函数方法。

	console.log('---math的方法调用---');
	console.log(Math.max(1,5,27,33,24));
	console.log(Math.max.call(1,5,27,33,24));
	console.log(Math.max.apply(null,[1,5,27,33,24]));
	
	console.log('---数组的方法调用---');
	var arrA=[2,13,49];
	var arrB=['A','B'];
	arrA.push(arrB);
	console.log(arrA);

	var arrA=[2,13,49];
	var arrB=['A','B'];
	arrA.push.call(arrA,arrB);
	console.log(arrA);

	var arrA=[2,13,49];
	var arrB=['A','B'];
	arrA.push.apply(arrA,arrB);
	console.log(arrA);

	var arrA=[2,13,49];
	var arrB=['A','B'];
	var arrC=arrA.concat(arrB);
	console.log(arrC);

	var arrA=[2,13,49];
	var arrB=['A','B'];
	var arrD=arrA.concat.apply(arrA,arrB);
	console.log(arrD);

	var arrA=[2,13,49];
	var arrB=['A','B'];
	var arrD=arrA.concat.call(arrA,arrB);
	console.log(arrD);

	var arrA=[2,13,49];
	var arrB=['A','B'];
	var arrD=arrA.concat.apply(arrA,arrB);
	console.log(arrD);

	var arrA=[];
	var arrB=['A','B'];
	var arrD=arrA.concat.apply(arrA,arrB);
	console.log(arrD);

　　输出结果图：

 　　在JavaScript编程当中很注重this指向问题，上面的例子只是表明了它们三者的一般应用，对于this指向不明显，下面的例子很清楚地显示了this的指向。

	var a=1;
	function funcA(){
		var a=22;
		console.log('this指向：' + this);
		console.log(this.a + a);
	}

	function funcB(){
		var a=33;
		funcA();
	}
	
	console.log('-------------0');
	funcB();
	
	var funcC=new function(){
		this.a=44;
	}
	
	console.log('-------------');
	funcA.call(funcC);
	funcA.apply(funcC);
	funcA.bind(funcC)();

　　输出结果图：

　　从上面的例子就可以看出this指向的改变，下面的例子也反应了this的指向改变。 

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>

<div style="width: 200px;height: 100px;background-color: #eeeeee;" id=demo>
	☆☆☆
</div>
</body>
<script>
	var divID=document.getElementById('demo');
	divID.onclick=function(){
		var func=function(x){
			console.log(this)
			console.log(this.innerHTML+'|'+x)
		}
		func(1);
	}
</script>
</html>

　　在DIV上面点击鼠标，显示结果图如下：

　　可以看到this指向的是window，如果改变代码：

	var divID=document.getElementById('demo');
	divID.onclick=function(){
		var func=function(x){
			console.log(this)
			console.log(this.innerHTML+'|'+x)
		}
		func.call(this,1);
		// func.apply(this,[1]);也可以
		// func.bind(this,1)();也可以
	}

　　输出结果则有改变：

 　　绑定到了div。

　　当第一个参数为null时，非严格模式下（默认情况），没有具体指定那么就指向window；严格模式（"use strict"），参数为null，那么this就指向null，这个好理解。

dawn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中call apply 与 bind方法详解
10-22
在JavaScript中，`call`、`apply`和`bind`都是与函数调用相关的三个重要方法，它们都允许我们改变函数内部`this`的指向，从而实现不同对象间的方法复用和灵活控制上下文环境。下面我们将分别详细介绍这三个方法。 1...
javascript中call,apply,bind函数用法示例
10-20
在JavaScript中，`call`, `apply`, 和 `bind` 是三个非常重要的函数，它们都用于改变函数内部 `this` 的指向。下面将详细介绍这三个函数的功能、使用方法以及它们之间的区别。 1. **call() 函数** `call()` 函数...
Javascript中call，apply，bind方法的详解与总结
10-20
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧
Javascript中的apply、call、bind
weixin_33857679的博客
04-12 93
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的； apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文； apply 、 call 、bind 三者都可以利用后续参数传参； bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。 以前用过一...
javascript中的apply、call和bind
qq_40535197的博客
03-05 192
apply、call和bind可以改变this的指向，并且可以把方法借给其它对象使用 例如：a.apply(b,[3,2]);//this指向由a变为b, a的方法借给b使用 1. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。call和bind的参数都是一个个传的，apply的参数是以数组的形式传入的； 2. call、apply的区别 call、apply这两个方法都是定义在函数对象的原型上的（Functi
【面试题】 JavaScript 中 call()、apply()、bind() 的用法
web全栈开发的博客
09-28 402
三者均可以改变函数体内部this的指向。第一个参数都是 this 的指向对象，如果没有这个参数或参数为undefined或null，则this指向全局的window。传参的形式不同，apply的参数要放在数组中传入，call的参数是列表形式（以逗号分割），bind的参数可以是列表形式也可以是数组形式，apply和call是一次性传入，而bind可以分多次传入bind返回的是有指定的this值和初始参数的原函数拷贝，便于稍后调用，apply、call则是立即调用。
JavaScript中apply，call和bind方法
CSPsy的博客
03-20 1693
JavaScript call, apply , bind方法 JS call 方法，JS apply 方法，JS bind方法 call,apply 和 bind方法的区别 call, apply 和 bind的使用 手写 bind方法
浅谈javascript中的call、apply、bind
10-22
主要为大家详细介绍了javascript中的call、apply、bind方法，感兴趣的朋友可以参考一下
javascript中apply/call和bind的使用
10-20
本文主要介绍了javascript中apply/call和bind的使用。具有很好的参考价值，下面跟着小编一起来看下吧
javascript中apply、call和bind的使用区别
10-22
下面小编就为大家带来一篇javascript中apply、call和bind的使用区别。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript之apply方法，call方法，bind方法
qq_41320857的博客
08-02 230
apply和call 作用：改变this的指向    不同的地方:参数传递的方式是不一样的 只要是想使用别的对象的方法,并且希望这个方法是当前对象的,那么就可以使用apply或者是call的方法改变this的指向 apply的使用语法 * 函数名字.apply(对象,[参数1,参数2,...]); * 方法名字.apply(对象,[参数1,参数2,...]); * call的使用语法...
javascript中apply、call和bind的区别
yumeirener_的博客
07-13 206
原文：https://www.cnblogs.com/cosiray/p/4512969.html 三者的相似之处： 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参 区别： 1、call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。 2、call后面的参数与say...
JavaScript之call，bind，apply方法及 this 的用法辨析
knight-yun的博客
05-01 488
文章转自个人博客 https://knightyun.github.io/2019/05/01/js-call，转载请申明。 概述 JavaScript函数中的三个方法.call(), .apply(), .bind()，总体来说主要功能就是改变函数中 this 关键字的指向，因为 this 默认指向 当前环境的对象； 例如： var obj = { name: 'Knight', ...
JavaScript实现call、apply和bind
山水子农
12-13 1873
每个函数都包含两个非继承而来的方法：apply()和call()。这两个方法的用途是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。详细内容查看JavaScript中call()、apply()和 bind()方法，1、call方法的实现下面看一个使用call方法的实例：function add(c, d){ return this.a + this.b + c + d
JavaScript中call、apply、bind详解及手写实现
最新发布
to_the_Future的博客
03-31 1073
首先，我们都知道JavaScript中的this指向分为软绑定及硬绑定。并且this的指向与执行上下文有关系。在全局执行上下文中，this指向 全局对象（），在对象调用其内部方法时，this指向调用的地方，这就称为。那么如何使用呢？这就需要使用JavaScript中内置的方法来实现了。
JavaScript中 call、apply和bind方法
weixin_43139068的博客
09-03 159
一、call方法 功能：第一个可以指定函数的this，第二个可以执行函数并传参 参数：第一个参数，传入一个指定让 this 指向的对象，第二个参数及以后，是函数参数的列表 返回值：就是函数自己的返回值 测试 function fun(a,b){ console.log(this); console.log( a + b); } var Person={ name :"zhangsan" } fun.call(Person,1,2); 测试结果： 二、apply方法 功能：第一个可以指定函
JavaScript call，apply，bind详解及实现
Niall_Tonshall的博客
01-27 1069
1.前言 call，apply，bind这三个方法都是用来改变函数的this指向，如果有对this不熟悉的朋友，可以先看看笔者的这篇博客。 call & apply call()语法： function.call(thisArg, arg1, arg2, ...) thisArg 可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值
js中call,apply,bind如何使用，使用场景及区别
qq_40868156的博客
11-30 1484
call,apply,bind 怎么使用，有什么区别，call,apply,bind使用场景，手写 call,apply,bind, call,apply,bind区别
JavaScript中的call、apply、 bind的用法、实现以及三者之间的区别？
富朝阳的博客
05-28 2317
相信很多同学在面试中遇到这样的问题，今天我们就彻底搞懂JavaScript中的call、apply、 bind的用法、实现以及三者之间的区别，废话不多说，直接开撸！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值