首页IT科技JavaScript 中的赋值运算符包括哪些?(多选)(JavaScript 中的 apply、call、bind)

JavaScript 中的赋值运算符包括哪些?(多选)(JavaScript 中的 apply、call、bind)

时间2025-06-20 04:49:30分类IT科技浏览3373
导读:一、常规...

一          、常规

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

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

function.apply(thisArg, [argsArray])

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

例如      ,以下代码会将数组 [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            ,并创建一个新函数 newFoo var newFoo = foo.bind(obj1, 7); newFoo(8); // 输出 18 // 使用 bind 方法绑定函数 foo 的上下文为 obj2                 ,并创建一个新函数 newFoo2 var newFoo2 = foo.bind(obj2); newFoo2(9, 10); // 输出 26

二   、特殊

1          、如果在使用 apply                、call      、bind 方法时没有传递 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               ,并创建一个新函数 newFoo var 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            ,并创建一个新函数 newFoo var 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      ,并创建一个新函数 NewFoo var NewFoo = Foo.bind(obj); NewFoo(); // 输出 7 // 使用 new 操作符创建实例               ,此时会忽略绑定的上下文 obj            ,而是创建一个新对象作为 this var newObj = new NewFoo(); // 输出 NaN console.log(newObj.x); // 输出 undefined console.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 指向)         ,在实际开发中也经常被使用         。对于这三个方法      ,需要了解它们的使用方法               、语法和一些注意事项               ,以便在开发中更加灵活地使用它们                 。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
删除时该项目不在(在win10中,删除文件提示“该项目不存在”该怎么办?)