ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript 中 call()、apply()、bind() 的用法

2021-05-25 09:59:39  阅读:205  来源: 互联网

标签:obj name myFun bind age JavaScript db call apply


原文地址(博客园)

https://www.cnblogs.com/Shd-Study/p/6560808.html

参考文档(菜鸟教程)

https://www.runoob.com/w3cnote/js-call-apply-bind.html

其实是一个很简单的东西,认真看十分钟就从一脸懵B到完全理解!

例1

var name = '小王', age = 17;
var obj = {
	name: '小张',
	objAge: this.age,
	myFunc: function(){
		console.log(this,.name+'年龄'+this.age);
	}
}
obj.objAge;		// 17
obj.myFun();	// 小张年龄 undefined

例2

var fav = '盲僧';
function shows(){
	console.log(this.fav);
}
shows();	// 盲僧

比较一下这两者this的差别,第一个打印里面的this指向obj,第二个全局声明的shows()函数this是window;

1、call()、apply()、bind()都是用来重定义this这个对象的!

如:

var name = '小王', age = 17;
var obj = {
	name: '小张',
	objAge: this.age,
	myFun: function(){
		console.log(this,.name+'年龄'+this.age);
	}
}
var db = {
	name: '德玛',
	age: 99
}
obj.myFun.call(db);			// 德玛年龄 99
obj.myFun.apply(db);		// 德玛年龄 99
obj.myFun.bind(db)();		// 德玛年龄 99

意思除了 bind 方法后面多了个 () 外, 结果返回都一致!
由此得出结论, bind 返回的是一个新的函数, 你必须调用他才会被执行。

2、对比call、bind、apply 传参情况下

var name = '小王', age = 17;
var obj = {
	name: '小张',
	objAge: this.age,
	myFun: function(){
		console.log(this,.name+'年龄'+this.age);
	}
}
var db = {
	name: '德玛',
	age: 99
}
obj.myFun.call(db,'成都','上海');     // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海  
obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();   // 德玛 年龄 99  来自 成都, 上海去往 undefined

微妙的差距!

从上面四个结果不难看出:

call、bind、apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:

call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。

bind 除了返回是函数以外,它 的参数和 call 一样。

当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等!

至此,完毕。

原文地址:https://www.cnblogs.com/Shd-Study/p/6560808.html

标签:obj,name,myFun,bind,age,JavaScript,db,call,apply
来源: https://blog.csdn.net/Mr_JiaTao/article/details/117248744

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有