从零开始学_JavaScript_系列（29）——apply和call

╰半橙微兮° 2022-07-15 21:08 278阅读 0赞

讲道理说，这两个方法在开发中直接使用的并不多（当然也可能是我比较低端┑(￣Д ￣)┍），一般都用封装好的。

**（47）apply和call**

这个之前没研究过，今天简单的看了一下。

<table> 
 <tbody> 
  <tr> 
   <td> <p>命令</p> </td> 
   <td> <p>简单介绍</p> </td> 
   <td> <p>例子</p> </td> 
  </tr> 
  <tr> 
   <td> <p>apply</p> </td> 
   <td> <p>将某个函数提供给另外一个对象使用，类似继承</p> </td> 
   <td> <p>提供的方法.apply(获取方法的对象, 参数);</p> </td> 
  </tr> 
  <tr> 
   <td> <p>call</p> </td> 
   <td> <p>改变函数中this指向的对象</p> </td> 
   <td> <p>方法.call(被this指向的目标, 传给方法的参数).</p> </td> 
  </tr> 
 </tbody> 
</table>

共同点：两个都是函数对象的方法。

**call的说明：（略微修改自他人的博客，博客链接下附）**

<!doctype html>
    <html>
    <head>
    </head>
    <body>
    <input type="text" id="idTxt" value="input text">
    <script type="text/javascript">
        var value = "global var";
        function mFunc() {
            this.value = "member var";
        }
        function gFunc() {
            alert(this.value);
        }
        window.gFunc();                                 // 全局的值
        gFunc.call(window);                             // 全局的值，this指向参数
        gFunc.call(new mFunc());                        // this指向mFunc
        gFunc.call(document.getElementById('idTxt'));   // this指向这个dom结点
    </script>
    
    <script language="javascript">
        var func = new function () {
            this.a = "func";
        }
    
        var func2 = function (x, y) {
            var a = "func3";
            alert(this.a);
            alert(x);
            alert(y);
        }
    
        func2.call(func, "func2", 'func3');     //this指向func这个函数，x是传递的参数
    </script>
    </body>
    </html>

关于用call来进行继承（同样改自某博客的例子）

<!doctype html>
    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript">
        function baseA()        // base Class A
        {
            this.member = "baseA member";
            this.showSelfA = function()
            {
                window.alert(this.member);
            }
        }
    
        function baseB()        // base Class B
        {
            this.member = "baseB member";
            this.showSelfB = function()
            {
                window.alert(this.member);
            }
        }
    
        function extendAB()     // Inherit Class from A and B
        {
            baseA.call(this);   // call for A
            baseB.call(this);   // call for B
            // this指向的是extentAB这个方法，这里相当于将上面两个方法都执行了一遍，
            // 由于后调用的baseB，而两个都有member属性，因此后调用的baseB的member覆盖了baseA的member，
            // 但showSelfA和showSelfB没有冲突，因此两个方法都在
            // 这种写法相当于形成了一个继承的形式。
        }
    
        window.onload = function()
        {
            var extend = new extendAB();
            extend.showSelfA();     // show A
            extend.showSelfB();     // show B
        }
    </script>
    </body>
    </html>

博客链接：

[http://blog.csdn.net/sunboy\_2050/article/details/6592082][http_blog.csdn.net_sunboy_2050_article_details_6592082]

apply可以参照这个（我之前写的）：

apply是函数对象（function Function()\{\}）的prototype方法中的一个方法

可以通过**console.dir(Function)**来打印全部方法

又因为所有函数都继承于Function函数，因此，所有函数都继承了这个方法。

apply的功能是，函数借用。将函数借用给一个对象，帮助他实现函数所定义的逻辑的功能。

如例子：

输出结果为：

ab \{x: 1, y: 1\}

ab \{x: 3, y: 3\}

Object \{x: 0, y: 0, z: 0\}