关于Javascript中apply、call、bind方法说明

mrcode 发布于2019-08-20 10:14 / 2305人阅读

摘要：需要注意的是，指定的值并不一定是该函数执行时真正的值，如果这个函数处于非严格模式下，则指定为或时会自动指向全局对象浏览器中就是对象，同时值为原始值数字，字符串，布尔值的会指向该原始值的自动包装对象。

JavaScript函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念

apply和call函数

call() 和 apply()都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向

call()方法接受的是一个参数列表，而apply()方法接受的是一个包含多个参数的数组（或类数组对象）

    fun.apply(thisArg[, argsArray])
    参数:
        thisArg
            在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象)，同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
        argsArray
            一个数组或者类数组对象，其中的数组元素将作为多带带的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

    fun.call(thisArg[, arg1[, arg2[, ...]]])
    参数:
        thisArg
            在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
            
        arg1, arg2, ...
            指定的参数列表

function a(xx, yy) {    
    alert(xx, yy);    
    alert(this);    
    alert(arguments);
}

a.apply(null, [5, 55]);
a.call(null, 5, 55);

bind函数

bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数

fun.bind(thisArg[, arg1[, arg2[, ...]]])
参数:
    thisArg
        当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，该参数无效。
    arg1, arg2, ...
        当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数

如果有兴趣想知道 Function.prototype.bind() 内部长什么样以及是如何工作的，这里有个非常简单的例子：

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

MDN为没有自身实现bind() 方法的浏览器提供了一个绝对可靠的替代方案:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }
 
    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };
 
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
 
    return fBound;
  };
}

GPU云服务器云服务器 JS中bind、call和apply的作 javascript中apply apply与call的区别 js中的call和apply

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80051.html

Javascript：call（），apply（）和bind（）

摘要：在面向对象的中，我们了解到在中，一切都是对象。到目前为止，我们已将函数视为由名称可选，也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着，我们可以调用任何函数，并在调用函数中明确指定。和用于完全相同的目的。 What s this 在面向对象的JS中，我们了解到在JS中，一切都是对象。因为一切都是对象，我们开始明白我们可以为函数设置和访问其他属性。而this提供了一种更优雅的方...

WrBug 2019-08-30 15:54 评论0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向对象的中，我们了解到在中，一切都是对象。到目前为止，我们已将函数视为由名称可选，也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着，我们可以调用任何函数，并在调用函数中明确指定。和用于完全相同的目的。 What s this 在面向对象的JS中，我们了解到在JS中，一切都是对象。因为一切都是对象，我们开始明白我们可以为函数设置和访问其他属性。而this提供了一种更优雅的方...

Sike 2019-08-02 13:56 评论0 收藏0
Javascript：call（），apply（）和bind（）

摘要：在面向对象的中，我们了解到在中，一切都是对象。到目前为止，我们已将函数视为由名称可选，也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着，我们可以调用任何函数，并在调用函数中明确指定。和用于完全相同的目的。 What s this 在面向对象的JS中，我们了解到在JS中，一切都是对象。因为一切都是对象，我们开始明白我们可以为函数设置和访问其他属性。而this提供了一种更优雅的方...

sarva 2019-08-23 14:11 评论0 收藏0
JavaScript深入之bind的模拟实现

摘要：也就是说当返回的函数作为构造函数的时候，时指定的值会失效，但传入的参数依然生效。构造函数效果的优化实现但是在这个写法中，我们直接将，我们直接修改的时候，也会直接修改函数的。 JavaScript深入系列第十一篇，通过bind函数的模拟实现，带大家真正了解bind的特性 bind 一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数...

FingerLiu 2019-08-20 16:15 评论0 收藏0
call、apply、bind的用法小结

摘要：新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的是原来的对象。如果不做特殊处理的话，一般会丢失原来的对象。 call、apply、bind是JavaScript中Function函数自带的方法，主要用于改变this的指向区别： call（） 1.语法： fun.call(this, arg1,arg2) 2.this取值的几点说明：（1）处于非严格模式下，...

woshicixide 2019-08-26 11:36 评论0 收藏0