首页天道酬勤JavaScript 中的 apply、call、bind

JavaScript 中的 apply、call、bind

admin 02-25 10:56 122次浏览

一、常规

JavaScript中,apply、call、bind是三种与函数调用有关的方法,它们都允许你在调用函数时手动设置函数的上下文(即this指向)。

1、apply方法:apply方法允许您调用一个函数,并手动设置函数的上下文(即this指向)并传递一个参数数组。它的语法如下:

function.apply(thisArg, [argsArray])

其中,thisarg表示函数要绑定的上下文,argsaray是一个可选的数组,包括将函数传递给函数的参数列表。

例如,以下代码将数组[1,2,3]作为参数传输给函数foo,并将函数的上下文设置为对象obj:

function foo(a, b, c) {  console.log(a + b + c);
}var obj = {  x: 1,  y: 2,  z: 3};

foo.apply(obj, [1, 2, 3]); // 输出 6

2、call 方法:call 方法与 apply 方法类似,也是允许你调用一个函数,并且手动设置函数的上下文(即 this 指向),但是它需要你手动传递一个参数列表,而不是一个参数数组。其语法如下:

function.call(thisArg, arg1, arg2, ...)

其中,thisarg表示上下文绑定函数,arg1、arg2...是传递给函数的参数列表。

例如,参数1将由下面的代码组成、2、3传递给函数foo,并将函数的上下文设置为对象obj:

function foo(a, b, c) {  console.log(a + b + c);
}var obj = {  x: 1,  y: 2,  z: 3};

foo.call(obj, 1, 2, 3); // 输出 6

3、bind 方法:bind 方法与 apply、call 方法不同,它并不会立即调用函数,而是会返回一个新的函数,并且这个新函数的上下文(即 this 指向)被永久地绑定到了指定的对象上。其语法如下:

function.bind(thisArg, arg1, arg2, ...)

其中,thisArg 表示函数要绑定的上下文,arg1、arg2、... 是一些可选的参数,这些参数将在调用新函数时作为参数列表传递给原函数。

例如,以下代码会将函数 foo 的上下文绑定到对象 obj 上,并返回一个新函数 newFoo,当调用 newFoo 时,它的参数将被传递给原函数 foo:

function foo(a, b, c) {  console.log(a + b + c + this.x + this.y + this.z);
}var obj = {  x: 1,  y: 2,  z: 3};var newFoo = foo.bind(obj, 1, 2, 3);newFoo(); // 输出 12

 

下面是一个示例,演示了使用 apply、call、bind 方法的一些特性:

function foo(a, b) {  console.log(this.x + this.y + a + b);
}var obj1 = {  x: 1,  y: 2};var obj2 = {  x: 3,  y: 4};// 使用 apply 方法调用函数 foo,并将 obj1 作为上下文foo.apply(obj1, [3, 4]); // 输出 10// 使用 call 方法调用函数 foo,并将 obj2 作为上下文foo.call(obj2, 5, 6); // 输出 18// 使用 bind 方法绑定函数 foo 的上下文为 obj1,并创建一个新函数 newFoovar newFoo = foo.bind(obj1, 7);newFoo(8); // 输出 18// 使用 bind 方法绑定函数 foo 的上下文为 obj2,并创建一个新函数 newFoo2var newFoo2 = foo.bind(obj2);newFoo2(9, 10); // 输出 26

二、特殊

1、如果在使用 applycallbind 方法时没有传递 thisArg 参数或者传递了 null 或 undefined,那么默认的上下文将是全局对象(在浏览器环境中,通常是 window 对象)。

function foo() {  console.log(this === window); // 在浏览器环境中,输出 true}// 使用 apply 方法调用函数 foo,没有传递 thisArg 参数foo.apply(); // 输出 true// 使用 call 方法调用函数 foo,传递了 null 作为 thisArg 参数foo.call(null); // 输出 true// 使用 bind 方法绑定函数 foo 的上下文为 null,并创建一个新函数 newFoovar newFoo = foo.bind(null);newFoo(); // 输出 true

2、如果使用 bind 方法绑定了函数的上下文后,再使用 apply 或 call 方法调用这个函数,那么绑定的上下文将会被忽略,仍然使用传递给 bind 方法的上下文。

var obj1 = {  x: 1,  y: 2};var obj2 = {  x: 3,  y: 4};function foo() {  console.log(this.x + this.y);
}// 使用 bind 方法绑定函数 foo 的上下文为 obj1,并创建一个新函数 newFoovar newFoo = foo.bind(obj1);// 使用 apply 方法调用新函数 newFoo,并将 obj2 作为上下文newFoo.apply(obj2); // 输出 3// 使用 call 方法调用新函数 newFoo,并将 obj2 作为上下文newFoo.call(obj2); // 输出 3

在这个示例中,先使用 bind 方法将函数 foo 的上下文绑定为 obj1,并创建了一个新函数 newFoo。然后,分别使用 apply 和 call 方法调用新函数 newFoo,并将 obj2 作为上下文。由于使用了 bind 方法绑定了上下文,无论传递了什么参数,都不会改变绑定的上下文。这就是绑定的上下文被忽略的情况。最终输出的结果为 3,而不是 7。

3、如果使用 bind 方法绑定了函数的上下文后,再使用 new 操作符创建实例,那么绑定的上下文将被忽略,而是创建一个新的对象作为 this,并且原函数中的 this 将会指向这个新对象。

function Foo() {    console.log(this.x + this.y);
}var obj = {    x: 3,    y: 4};// 使用 bind 方法绑定函数 Foo 的上下文为 obj,并创建一个新函数 NewFoovar NewFoo = Foo.bind(obj);NewFoo();   // 输出 7// 使用 new 操作符创建实例,此时会忽略绑定的上下文 obj,而是创建一个新对象作为 thisvar newObj = new NewFoo();  // 输出 NaNconsole.log(newObj.x); // 输出 undefinedconsole.log(newObj.y); // 输出 undefined

在这个示例中,先使用 bind 方法将函数 Foo 的上下文绑定为 obj,并创建了一个新函数 NewFoo。然后,使用 new 操作符创建实例,此时会忽略绑定的上下文 obj,而是创建一个新对象newObj作为 Foo 函数的 this 上下文。因此,Foo 函数中的 this 指向了新创建的对象 newObj,新对象 newObj 继承了Foo 函数中定义的属性,但属性 x 和 y 并未定义,因此输出 undefined

 

在 JavaScript 中,函数可以被视为构造函数,并且可以使用 new 关键字来创建实例。

 

综上所述,apply、call、bind 方法都是用于手动设置函数的上下文(即 this 指向),在实际开发中也经常被使用。对于这三个方法,需要了解它们的使用方法、语法和一些注意事项,以便在开发中更加灵活地使用它们。


在线计划全天免费计划_澳洲幸运10开奖结果直播平台官方 C# System.Threading.Timer 详解及示例