不同类型函数调用之间的主要区别在于：最终作为函数上下文(可以通过this参数隐式引用到)传递给执行函数对象不同。对于方法而言，即为所在的对象；对于函数而言是window或是undefined(取决于是否处于严格模式下)；

对于构造函数而言是一个新创建的对象实例。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>为函数绑定特定的上下文</title>

    <script src="../unitl/test.js"></script>

    <style>

        #results li.pass {color:green;}

        #results li.fail {color:red;}

    </style>

</head>

<body>

    <button id="test">Click Me</button>

    <ul id="results"></ul>

</body>

<script>

    function Button() {

        this.clicked = false;

        //单击事件处理器的声明函数。由于该函数是对象的方法，所以在函数中使用this来获取对象的引用。

        this.click = function name(params) {

            this.click =  true;

            //在该方法中，我们测试了按钮是否在单击后正确改变了状态

            assert(button.clicked,"The button hs been clicked");

        }

    }

    //创建一个用于跟踪是否被单击的实例

    var button = new Button();

    //在按钮上添加单击处理器

    var elem = document.getElementById("test");

    elem.addEventListener("click",button.click);

</script>

</html>

在这个例子中，我们定义了一个按钮Click Me，并且想知道他是否曾被单击过。为了保存单击状态的状态信息，我们使用构造函数创建一个名为button的实例化对象，通过该对象我们可以存储被

单击的状态：

      function Button() {

        this.clicked = false;

        //单击事件处理器的声明函数。由于该函数是对象的方法，所以在函数中使用this来获取对象的引用。

        this.click = function name(params) {

            this.click =  true;

            //在该方法中，我们测试了按钮是否在单击后正确改变了状态

            assert(button.clicked,"The button hs been clicked");

        }

    }

    var button = new Button();

在该对象中，我们还得意了click方法作为单击按钮式触发的事件处理函数，该方法将clicked属性设置为true，然后测试实例化对象的状态是否正确（我们有意使用button标识符而非this关键字）----它们应该具有相同的指向，

（但事实果真如此吗？）。最后，我们创建了button.click方法作为按钮的单击处理函数。

      var elem = document.getElelemtById('test');

      elem.addEventListener("click",button.click);

当我们在浏览器中加载示例代码并单击按钮时，显示结果如下图所示，红色部分的文件表示测试失败了，在本例中的代码之所以测试失败，是由于click函数的上下文对象并非像我们预期的一样指向button对象。



我们的测试为何失败了？我们对按钮单击状态的改变去哪儿了？通常情况下，事件回调函数的上下文是粗发事件的对象（在本例中是HTML的按钮，而非button对象）。回想本章前面部分的内容，如果通过button.click()调用函数，上下文将是按钮，因为函数将作为button对象的方法被调用。但在这个例子中，浏览器的事件处理系统将把调用的上下文定义为事件触发的目标

元素，因此上下文将是<button>元素，而非button对象。所以我们将单击状态设置到了错误的对象上。

这是一个令人惊讶的常见问题，本章的后面将会介绍如何 避免出现这种情况。 现在探讨一个如何解决它：可以使用apply和call方法显式得设置函数上下文。

使用apply和call方法

javascript为我们提供了一种调用函数的方式，从而可以显式地指定任何对象作为函数的上下文。我们可以使用每个函数上都存在的这两种方法来完成：apply和call。

我们所指的正是函数的方法。作为第一类对象（顺便说一下，函数是由内置的Function构造函数所构建）,我们可以像其他对象类型一样拥有属性，也包括方法。

若想使用apply方法调用函数，需要为其传递两个参数：作为函数上下文的对象和一个数组作为函数调用的参数。call方法的使用方式类似，不同点在于是直接以参数列表的形式，而不再是作为数组传递。

下面例子演示了这两种方法的实际使用方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>使用apply和call方法来设置函数上下文</title>

    <script src="../unitl/test.js"></script>

    <style>

        #results li.pass {color:green;}

        #results li.fail {color:red;}

    </style>

</head>

<body>

    <ul id="results"></ul>

</body>

<script>

    //函数"处理"了参数，并将结果result变量放在一个作为该函数上下文的对象上。

    function juggle() {

        var result = 0;

        for(var n=0; n<arguments.length; n++) {

            result += arguments[n];

        }

        this.result = result;

    }

    //这些对象的初始值为空，它们会作为测试对象

    var ninja1 = {};

    var ninja2 = {};

    //使用apply方法向ninja1传递一个参数数组

    juggle.apply(ninja1,[1,2,3,4]);

    //使用call方法向ninja2传递一个参数列表

    juggle.call(ninja2,5,6,7,8);

    //测试展现了传入juggle方法中的对象拥有了结果值。

    assert(ninja1.result ===10,"juggled via apply");

    assert(ninja2.result === 26, "juggled via call");

</script>

</html>

在这个例子中，我们定义了一个名为juggle的函数，函数的作用是将所有的参数加载一起并存储在函数上下文的result属性中（通过this关键字引用）。看起来似乎是一个不太实用的函数，但它能够帮助我们验证函数的传参是否正确，以及哪个对象最终作为函数上下文。

然后设置两个对象：ninja1和ninja2,我们将使用这两个对象作为函数上下文，第一个对象连同一个参数数组一起传递给函数的apply方法，将第二个对象连同参数列表传递给函数的call方法。

      juggle.apply(ninja1,[1,2,3,4]);

      juggle.call(ninja2,5,6,7,8);

值得注意的是，apply和call之间唯一的不同之处在于如何传递参数。在使用apply的情况下，我们使用参数数组；在使用call的情况下，我们则在函数上下文之后依次列出调用参数。



上图传入的call和apply方法的第一个参数都会被作为函数上下文，不同处在于后续的参数。apply方法只需要额外的参数，也就是一个包含参数的数组;call方法则需要传入任意数量的参数值，

这些参数将用作函数的实参。

现在已经提供了行数上下文和参数，接下来继续测试！首先，检查传递给apply方法的ninja1对象，他应该拥有一个result属性，并存储了所有参数(1,2,3,4) 的和，同样，传递给call方法的ninja2对象的result属性值应该等于参数5、6、7、8的和。

    assert(ninja1.result ===10,"juggled via apply");

    assert(ninja2.result === 26, "juggled via call");

call和apply这两个方法对于我们要特殊指定一个函数的上下文对象时特别有用，在执行回调函数时可能会经常用到。

function juggle() {

        var result = 0;

        for(var n=0; n<arguments.length; n++) {

            result += arguments[n];

        }

        this.result = result;

}

var ninja1 = {}

var ninja2 = {}



使用call和apply方法手动设置函数上下文，产生函数上下文(this)与arguments。

函数调用_通过apply和call方法调用的更多相关文章

  1. JavaScript中bind、call、apply函数使用方法具体解释

    在给我们项目组的其它程序介绍 js 的时候,我准备了非常多的内容,但看起来效果不大,果然光讲还是不行的,必须动手. 前几天有人问我关于代码里 call() 函数的使用方法.我让他去看书,这里推荐用js ...

  2. [Effective JavaScript 笔记]第18条：理解函数调用、方法调用及构造函数调用之间的不同

    面向对象编程中,函数.方法.类的构造函数是三种不同的概念. JS中,它们只是单个构造对象的三种不同的使用模式. 三种不同的使用模式 函数调用 function hello(username){ ret ...

  3. S1：动态方法调用：call & apply

    js中函数执行的两种方式:一是通过调用运算符’()’,二是通过调用call或apply来动态执行. 一.动态方法调用中指定this对象 开发中我们往往需要在对象B中调用对象A的方法,这个时候就用到了a ...

  4. JavaScript 方法调用模式和函数调用模式

    这两天在读<JavaScript语言精粹>关于第4章函数调用的几种模式琢磨了半天. 这里就说一下方法调用模式跟函数调用模式. 方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为 ...

  5. python中方法调用和函数调用的区别

    函数调用: 传几个参数,就会有几个实参方法调用: 默认传递一个参数self,至少要定义一个形参

  6. Chapter3_操作符_方法调用中的别名问题

    接下来展示方法调用中的别名问题,方法调用中的别名问题指的是,将一个对对象的引用传递给某一个方法时,方法操作的是这一个特定的引用而不是这个引用的拷贝. class Person{ float heigh ...

  7. Javascript中call，apply，bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  8. JS中的call、apply、bind方法详解

    bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...

  9. 第164天：js方法调用的四种模式

    js方法调用的四种模式 1.方法调用模式 function Persion() { var name1 = "itcast", age1 = 19, show1 = functio ...

  10. js中apply()和call()方法的使用

    1.apply()方法 apply方法能劫持另外一个对象的方法,继承另外一个对象的属性.  Function.apply(obj,args)方法能接收两个参数     obj:这个对象将代替Funct ...

随机推荐

  1. Java常见面试题收集

    1.final.finalize.finally之间的区别 final关键字用于对属性.方法.类进行修饰,表示属性值不可修改,定义的对象地址不可修改.方法不可被覆盖,类不可被继承. finalize( ...

  2. .net5的安装部署条件

    1.安装vs2019最新版本 2.安装 .net5最新版本的的Hosting Bundle 下载地址:https://dotnet.microsoft.com/download/dotnet/5.0 ...

  3. python代码编译总结-用于代码加密

    基于一个自废武功式的决定,服务需要做成标准件在客户服务器上运行,因此调研了python代码加密的相关内容.py的代码混淆没有被采用,而是采用cython编译成二进制文件进而掩盖源码的方式对代码加密. ...

  4. c-->static关键字的使用

    static关键字的使用 static:静态 未使用static 在下列代码中变量a是有生命周期的,调用完后就会被销毁 所以for循环每次调用test函数打印的结果都是2 #include <s ...

  5. Linux 关闭系统时间同步－timedatectl的使用

    源于一次项目需要修改系统时间,但是每次修改后又被同步回网络时间,找了好久发现是这个原因: NTP即Network Time Protocol(网络时间协议),是一个互联网协议,用于同步计算机之间的系统 ...

  6. 4－20mA换算为实际值公式

    Ov = [(Osh - Osl) * (Iv - Isl) / (Ish - Isl)] + Osl 实际工程量 = [((实际工程量)的高限 - (实际工程量)的低限)*(lv - 4) / (2 ...

  7. 正整数n型方阵

    正整数n型方阵(不用数组完成) 一般呢这种n型方阵很多人都是用数组完成,今天呢小编就用简单的循环控制结构来完成,不需用到数组.题目:从键盘输入一个正整数n,根据n形成一个方阵.方阵最外层是第一层,每层 ...

  8. Jmeter：随机类函数

    一.__Random 功能介绍:计算范围内的随机数 ${__Random(参数 1,参数 2,参数 3)} 参数 1:开始数字,包括在内 参数 2:结束数字,包括在内 参数 3:注册变量名称  二._ ...

  9. 解决elementplus carousel固定高度问题/ResizeObserverAPI介绍

    "element-plus": "^2.2.26", "@vueuse/components": "^9.7.0", 引 ...

  10. PySide6之初级使用

    背景介绍pyside6提供了Qt6的Python侧API. 在GUI程序撰写方面, 笔者不太喜欢频繁的编译过程, 倾向于随时更改代码即时查看效果. 因此, 推荐在简单应用的情况下使用pyside6, ...