无名阁,只为技术而生。流水不争先,争的是滔滔不绝。

(js call apply bind) JS 函数的 call、apply 及 bind 超详细方法 JavaScript 中的 callapply 和 bind 都是用来改变函数执行时 this 的指向的方法。 全网首发(图文详解1)

前沿技术 Micheal 3个月前 (06-18) 50次浏览 已收录 扫描二维码

(js call apply bind) JS 函数的 call、apply 及 bind 超详细方法

JavaScript 中的 callapplybind 都是用来改变函数执行时 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 参数即可。

解决问题、实现和配置流程

这三个方法通常用于:

  1. 更灵活的函数调用(比如在回调中)。
  2. 借用其他对象的方法。
  3. 函数柯里化(创建已预设参数的新函数)。

在实际使用时,你可能需要:

  • 确定函数中 this 的正确指向。
  • 使用 callapply 来借用方法,或者传递数组参数。
  • 使用 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 属性。

注释说明

在编写代码的时候,尤其是使用 callapplybind,应该在函数调用旁边添加注释,说明 this 的指向,以及为什么需要改变它。这样可以帮助其他开发者理解代码的目的和行为。
(藏宝图碎片) 原神层岩巨渊藏宝图碎片在什么地方 藏宝图碎片和宝箱位置介绍 层岩巨渊藏宝图碎片寻宝活动 全网首发(图文详解1)
(chrome下载插件) Chrome 浏览器插件下载与安装教程(图文讲解) Chrome 浏览器插件下载安装步骤 全网首发(图文详解1)

喜欢 (0)
[]
分享 (0)
关于作者:
流水不争先,争的是滔滔不绝