JavaScript 中 call()、apply()、bind() 的用法
16lz
2021-02-25
在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数调用过程中的 this 指向
1 apply
Function.apply(obj,args)
apply方法接收两个参数
obj:这个对象将代替Function类里this对象
- args:这个是数组,它将作为参数传给Function(args-->arguments)
不带第一个参数
var person = { fullName: function() { return this.firstName + " " + this.lastName; }}var person1 = { firstName: "Bill", lastName: "Gates",}person.fullName.apply(person1); // 将返回 "Bill Gates"
带全部参数
var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; }}var person1 = { firstName:"John", lastName: "Doe"}person.fullName.apply(person1, ["Oslo", "Norway"]);
2 call
Function.call(obj[,params...])
call方法接收两个参数
obj:这个对象将代替Function类里this对象
- args:这个是一个参数列表
不带第一个参数
var person = { fullName: function() { return this.firstName + " " + this.lastName; }}var person1 = { firstName:"Bill", lastName: "Gates",}var person2 = { firstName:"Steve", lastName: "Jobs",}person.fullName.call(person1); // 将返回 "Bill Gates"
带全部参数
var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; }}var person1 = { firstName:"Bill", lastName: "Gates"}person.fullName.call(person1, "Seattle", "USA");
3 bind
Function.bind(obj[,params...])
bind是ES5 新增的一个方法,它的传参和call类似,也是接收两个参数。
obj:这个对象将代替Function类里this对象
- args:这个是一个参数列表
不带第一个参数
var person = { fullName: function() { return this.firstName + " " + this.lastName; }}var person1 = { firstName:"Bill", lastName: "Gates",}var person2 = { firstName:"Steve", lastName: "Jobs",}person.fullName.call(person1)(); // 将返回 "Bill Gates"
带全部参数
var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; }}var person1 = { firstName:"Bill", lastName: "Gates"}person.fullName.call(person1, "Seattle", "USA")();
可以从上面看出,使用方法基本和call一致,只是后面多了(),其实是bind不会立即执行对应的函数,只是返回对函数的引用。那为什么要引入bind呢,是因为call和apply会自动执行目标函数,从而无法绑定在事件上,因为事件是我们手动触发的,而bind不会自动执行目标函数。
©著作权归作者所有:来自51CTO博客作者mb5fd86dae5fbf6的原创作品,如需转载,请注明出处,否则将追究法律责任更多相关文章
- 讲一讲ES6新增的两种数据结构Map和Set
- 内存迟迟下不去,可能你就差一个GC.Collect
- C#中方法的调用
- C++入门
- 第7章 0202-面向对象编程基础,学习心得、笔记(类声明,类的实例化,类
- 类与对象之重载和命名空间的概念
- 剩余参数与参数引用及回调函数:array_map(), array_filter,array_
- vue学习之路(路由)
- 面试官:讲一下Jvm中如何判断对象的生死?