随笔——js中的this指向，apply()与 call()

js中apply和Math.max()函数（原文）

1. apply()

   Function.apply() 是JS的一个OOP特性，通常用来模拟继承和扩展this的用途，对于上面这段代码，能够这样去理解： XXX.apply() 是一个调用函数的方法，其参数为：apply(Function, Args)，Function为要调用的方法，Args是参数列表，当Function为null时，默认为上文，

   Math.max.apply(null, arr)
   复制代码

   可认为是

   apply(Math.max, arr)
   复制代码

   而后，arr是一个参数列表，对于max方法，其参数是若干个数，即:

   arr = [a, b, c, d, ...]
   复制代码

   代入原式中：

   Math.max.apply(null, [a, b, c, d, ...])
   复制代码

   等同于：

   Math.max(a, b, c, d, ...)
   复制代码

2. 区别：

   Math.math() 方法能够求出给定参数中最大的数，可是参数不能是数组。

   例如：

   > Math.max('1','2','3.1','3.2')
   < 3.2
   > Math.min(1,0,-1)
   < -1
   复制代码

   此时可用 apply() 解决（第一个参数为null，第二个参数为数组; apply() 如何实现的参见上文 apply() 的转换介绍）：

   > Math.max.apply(null, ['1','2','3.1','3.2'])
   < 3.2
   > Math.min.apply(null, [1,0,-1])
   < -1
   复制代码

JavaScript中的this（原文）

1. this

   在 JavaScript 中，到处使用者 this ，可是，不少时候 this 指向并不固定，而是随着它的执行环境的改变而改变。总结一句：this老是指向调用它所在方法的对象。

2. this 在函数里

   这种方式也称为“全局性的函数调用”，例如：

   <script type='text/javascript'>
       var name='Hello_World';
       function test(){
           this.name='Hello_JavaScript';
       }
       
       test();
       
       console.log(this.name);     //Hello_JavaScript
       console.log(window.name);   //Hello_JavaScript
       console.log(name);          //Hello_JavaScript
   <script>
   复制代码

   经过结果能够更加证实了全局的name在函数内部被修改了，由于这个函数内部的this指的就是window。

   总结：对于全局性函数调用，函数内部的this就是指的全局对象window，便是：this是调用函数所在的对象。实际上这个test()函数是由全局对象window来去调用的，那么函数内部的this固然就指的是window。

3. this 在构造函数里

   <script type='text/javascript'>
       var name='Hello_World';
       function test(){
           this.name='Hello_JavaScript';
       }
       
       var person = new test();
       
       console.log(person.name);     //Hello_JavaScript
       console.log(window.name);   //Hello_World
   <script>
   复制代码

   分析：咱们经过new关键字建立一个对象的实例，能够发现new关键字改变了this的指向，将这个this指向了对象person。在构造函数内部，咱们对this.name=“HelloWorld”进行从新赋值，并无改变全局变量name的值。

   总结：声明一个构造函数的实例对象时，构造函数内部的this都会指向新的实例对象，或者说，构造函数内部的this指向的是新建立的对象自己。

4. 在对象的方法中调用

   <script type='text/javascript'>
       var name='Hello_World';
       
       var person= {
         name:'Hello_JavaScript',
         info:function(){
           alert(this.name);       
         }
       }
       
       person.info();        //Hello_JavaScript
   <script>
   复制代码

   总结：当person对象调用info()函数时，info函数内部的this指向的就是person对象。即，当this出如今对象的方法中时，那么该方法内部的this指向的就是这个对象自己，也就是说this指向的调用函数的对象。

JavaScript之call和apply（原文）

1. 使用call和apply的做用

   上文提到 this 的出现的三种方式，总结为两种：

   • 直接调用

     test(), 此种调用方式中，函数内部的this指向的window

   • 构造函数形式的调用

     var person = new test(); 此种方式调用中，函数内部的this指向的是person

   以上两种方式，实际上能够这么说，函数内部的this都是表明当前对象，只不过是JavaScript中函数内部的this会随着程序而指向不一样的对象。

   那么个人问题是：咱们能不能手动修改this的指向呢？

   答案：能够的，使用call或者apply。这个也就是call和apply的做用 → 改变函数内部this的指向。

2. 应用场景

   //代码一
   <script type='text/javascript'>
       function Person(name,age){
         this.name=name;
         this.age=age;
       }
       
       function info(){
         alert(this.name +','+this.age);
       }
       
       var p1=new Person('jack','20');
   <script>
   复制代码

   问题：我如今想借用这个info方法来去实现对p1对象的打印，怎么作？

   方案一：直接调用info函数，即：info() ；经过上面的讲解，仔细想一想，确定不行，由于这样调用的话，info函数内部的this实际上是指向的window。

   方案二：经过对象调用，即 p1.info() ；其实也不行，由于p1对象压根就没有info这个方法，p1对象只有name和age属性。

   解决方法以下：

   //代码二
   <script type='text/javascript'>
      function Person(name,age){
        this.name=name;
        this.age=age;
      }
      
      function info(){
        alert(this.name +','+this.age);
      }
      
      var p1=new Person('jack','20');
      p1.show=info;
      p1.show();
      
   <script>
   复制代码

   能够发现咱们经过向p1对象添加了一个show属性，而这个show属性的值实际上是一个函数的地址，是一个函数对象，而后经过p1.show()就能够实现打印了。此种方法确实能够实现功能，可是这种方法是经过为p1对象添加属性完成的，若是仍然有相似的需求，是否是都要向p1对象添加属性来完成需求呢，这样就会致使p1对象的占用空间愈来愈大，因此方式并不优雅。

   针对上面的问题，本质上就是想经过修改info函数内部的this指针的问题来完成对当前对象的一个打印，那么咱们能够在不增长属性的方式上来完成功能，这个就须要使用到了call和apply。

3. call和apply的使用

   • 功能：改变this指向，使用指定的对象调用当前函数

   • 语法：

     call([thisObj[,arg1[, arg2[, [,.argN]]]]])
     复制代码

     apply(thisObj[,argArray])
     复制代码

   • 说明：

     1. 两个方法的功能彻底同样，惟一区别就是参数。

        对于第一个参数来讲thisObj，做用是同样的，用做表明当前对象的对象，说白了就表示的是函数执行时，this指向谁。

        对于 第二个参数 ，apply要求传入的是一个参数数组 ，也就是说将一系列参数组成一个数组传入，而 对于call来讲，参数以散列的值的方式传入 。例如，func(thisObj，arg1，arg2，arg3...)对应的apply用法就是func(thisObj，[arg1，arg2，arg3...])。本文以call方法为例

     2. 这两个方法都是Function对象中的方法，由于咱们定义的每一个对象都拥有该方法。

     3. call 方法能够用来代替另外一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象，若是没有提供 thisObj 参数，那么 Global 对象被用做 thisObj。(?)

     4. 使用call和apply解决上面代码的问题

     //代码三
     <script type='text/javascript'>
         function Person(name,age){
           this.name=name;
           this.age=age;
         }
         
         function info(){
           alert(this.name +','+this.age);
         }
         
         var p1=new Person('jack','20');
         
         info.call(p1);      //或者 info.apply(p1)
         
     <script>
     复制代码

     分析：

     当在函数中调用call方法时，函数内部的this会自动指向call方法中的第一个参数。上面的例子中，当执行info.call(p1)时，info函数内部的this则会自动指向p1对象，因此固然就能够call这种方式来完成对p1对象的打印。

     5. call()重写

     <script type='text/javascript'>
         function Person(){
             this.name = 'Hello_World';
             this.info=function(){
                 alert(this.name)
             }
         }
         
         function Cat(){
             this.name='猫';
         }
         var cat =new Cat();
         
         Person.call(cat);
         
         cat.info();    //Hello_World
         
     <script>
     复制代码

     上面代码最终会打印：‘Hello_World’，这个答案最关键是 Person.call(cat) 这一行代码，仔细去想一想究竟发生了什么事情，当调用call方法时，函数Person内部的this其实已经自动的指向了cat对象，至关于就是给cat对象执行了下面的两行代码：

     this.name='Hello_World',
     this.info=function(){
         alert(this.name)
     }
     复制代码

     而后重写了原来cat对象中的name属性，把name由“猫”改为了“ Hello_World ”，并且并得到了一个新的info方法(能够这么理解，至关于给cat对象添加了一个info属性)，因此cat对象固然能够调用info方法了，因此结果就是“ Hello_World ”。apply的使用和call的功能相同，使用方式也很相似。

   关于call和apply的使用，恰好在 知乎 看到一个很生动形象的比喻，放在这里但愿有助于记忆。

   ---

   猫吃鱼，狗吃肉，奥特曼打小怪兽。

   有天狗想吃鱼了

   猫.吃鱼.call(狗，鱼)

   狗就吃到鱼了

   猫成精了，想打怪兽

   奥特曼.打小怪兽.call(猫，小怪兽)