(js call apply bind) JS 函数的 call、apply 及 bind 超详细方法
JavaScript 中的 call
、apply
和 bind
都是用来改变函数执行时 this
的指向的方法。它们在 JavaScript 的函数编程中非常有用,尤其是在回调函数和面向对象的设计模式中。
call
方法
call()
方法可以让你在调用一个函数时,指定函数内部 this
的值。它接受一个参数列表。
使用方法:
function greet() {
var reply = [this.person, 'Is An Awesome', this.role].join(' ');
console.log(reply);
}
var i = {
person: 'Douglas Crockford', role: 'Javascript Developer'
};
greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer
在这个例子中,greet
函数被调用的时候,我们用 call
方法改变了函数内部 this
的值为对象 i
。
apply
方法
apply()
方法的作用和 call()
方法类似,不同之处在于,apply()
方法接受的是一个参数数组,而不是一组参数列表。
使用方法:
function speak(words) {
console.log(this.name + ' says: ' + words);
}
var person = {
name: 'John Doe'
};
speak.apply(person, ['Hello World']); // John Doe says: Hello World
这里 speak
函数通过 apply
方法调用,并将 this
值设为 person
对象,并传入参数数组 ['Hello World']
。
bind
方法
bind()
方法创建一个新的函数,在 bind()
被调用时,这个新函数的 this
被指定为 bind()
的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
使用方法:
function run(distance, speed) {
console.log(this.name + ' runs ' + distance + ' at a speed of ' + speed);
}
var runner = { name: 'Usain Bolt' };
var run10k = run.bind(runner, '10 kilometers');
run10k('20 km/h'); // Usain Bolt runs 10 kilometers at a speed of 20 km/h
这个例子中,我们先用 bind
方法创建了 run10k
,这个新函数的 this
被绑定为 runner
,第一个参数被预设为 '10 kilometers'
。当我们调用 run10k
时,只需要提供 speed
参数即可。
解决问题、实现和配置流程
这三个方法通常用于:
- 更灵活的函数调用(比如在回调中)。
- 借用其他对象的方法。
- 函数柯里化(创建已预设参数的新函数)。
在实际使用时,你可能需要:
- 确定函数中
this
的正确指向。 - 使用
call
或apply
来借用方法,或者传递数组参数。 - 使用
bind
来创建新的预设参数的函数。
解决示例问题:
假设我们有一个数组对象,我们想要用某个对象的方法来处理这个数组。
var dataProcessor = {
data: [1, 2, 3, 4],
multiplyByTwo: function() {
this.data = this.data.map(function(item) {
return item * 2;
});
}
};
var newData = [5, 6, 7, 8];
dataProcessor.multiplyByTwo.call({ data: newData });
console.log(newData); // [5, 6, 7, 8], 没有被改变,因为call并没有改变原数组
console.log(dataProcessor.data); // [2, 4, 6, 8], 被multiplyByTwo调用后改变
这个例子中,我们通过 call
方法将 multiplyByTwo
函数调用时的 this
指向了一个新对象 { data: newData }
,从而不改变原来 dataProcessor
对象的 data
属性。
注释说明
在编写代码的时候,尤其是使用 call
、apply
和 bind
,应该在函数调用旁边添加注释,说明 this
的指向,以及为什么需要改变它。这样可以帮助其他开发者理解代码的目的和行为。
(藏宝图碎片) 原神层岩巨渊藏宝图碎片在什么地方 藏宝图碎片和宝箱位置介绍 层岩巨渊藏宝图碎片寻宝活动 全网首发(图文详解1)
(chrome下载插件) Chrome 浏览器插件下载与安装教程(图文讲解) Chrome 浏览器插件下载安装步骤 全网首发(图文详解1)