JavaScript OOP（二）：this关键字以及call、apply、bind

JavaScript的this关键字非常灵活！

this 返回的总是对象；即返回属性或方法“当前”所在的对象

 var o1={
     name:'apple',
     age:100,
     msg:function(){
         return '显示name和age信息:'+'name: '+this.name+', age: '+this.age;
     }
 };
 //针对msg中的this进行研究：
 console.log(o1.msg());//this 指向当前对象o1
 var o2={
     name:'blue',
     age:1000
 };
 o2.msg=o1.msg;
 console.log(o2.msg());//this 指向当前对象o2

当o1.msg()时，this指向o1；而o2.msg()时，this指向o2。也就是this指向的是“当前”环境运行时所在的对象。

运行结果：

将函数提出来，更形象的表示：

 console.log('---');
 function f(){
     console.log(this.name1);
 }
 var o3={
     name1:'alice',
     info:f
 };
 var o4={
     name1:'boy',
     info:f
 };
 f();//undefined
 o3.info();//alice
 o4.info();//boy

f()：this指向顶层对象window；o3.info()：this指向的是o3；o4.info()：this指向的是o4。即this总是指向“当前”运行时所在的对象。

运行结果：

如果我们在全局环境中，将对象中的方法赋值给变量。以本文最上面代码o1.msg示例：

 var name='abc';
 var age=1;
 var test1=o1.msg;
 console.log(test1());//此时this指向顶层对象window

此时test1()：this指向的是window

运行结果：

由上面的这些例子，我们可以“粗略”的认为：每个函数中都存在着this,它总是指向当前运行环境的对象。

全局环境下的this：指向顶层对象window

 function test2(){
     if(this === window){
         console.log('此时this 指向顶层对象window');
     }
 }
 test2();

运行结果：

构造函数中的this：指向实例化的对象

 function Test3(num){
     this.num=num;
 }
 var t3=new Test3(100);
 console.log(t3.num);//this 指向t3

 Test3.prototype.m=function (){//所有由Test3构造函数生成的实例化对象都共享m方法
     return this.num;
 };
 console.log(t3.m());//this 指向t3

运行结果：

注意下面这种情况：

 var o5={
     name:'application',
     send:function(){
         console.log(this
         );
     }
 };
 o5.send();//o5
 (o5.send=o5.send)();//window
 /**
  * 相当于
  * (o5.send=function(){
  * console.log(this);
  * })
  */
 (false||o5.send)();//window
 /**
  * 相当于
  * (false || function(){
  * console.log(this);
  * })
  */
 (1,o5.send)();//window
 /**
  * 相当于
  * (1,function(){
  * console.log(this);
  * })
  */

即：除非直接使用o5.send(),结果返回当前对象；否则均返回顶层对象window

运行结果：

如果方法位于多层对象的内部，那么this指向当前对象层，不会继承更上面的层：

 var o6={
     name:'cat',
     f:{
         f1:function (){
             console.log(this.name);
             console.log(this==o6.f);//其实this指向的是o6.f
         }
     }
 };
 o6.f.f1();//undefined
 //因为此时this指向的是f

上面代码中o6对象中f属性对应的值，是一个对象。该对象里面又存在着一个函数，此时函数里面的this指向o6.f，而不是o6

运行结果：

如果想达到预期的效果：

 var o6={
     name:'cat',
     f:{
         f1:function(){
             console.log(this.name);
         },
         name:'cat'
     }
 }
 o6.f.f1();//cat

继续进行变通：

 //将o6.f.f1赋值给变量
 var v=o6.f.f1;
 /**
  * 相当于
  * var v=function (){
  * console.log(this.name);
  * }
  */
 v();//this指向的对象又指向了顶层对象window
 //将o6.f赋值给变量
 var v1=o6.f;
 v1.f1();//此时返回的结果为'cat'
 /**
  * 相当于
  * var v1={
  * f1:function(){
  * console.log(this.name);},
  * name:'cat'
  * };
  */

同时应尽量避免在函数中使用多层this：

 //尽量避免在函数中使用多层this
 var o7={
     name:'apple',
     f:function(){
         console.log(this);//this指向当前运行环境对象，即o7
         var f1=function(){
             console.log(this);//this指向顶层对象，即window
         }();//IIFE;这是立即调用的函数表达式
     }
 };
 o7.f();

运行结果：

为了让f1中的this也指向该对象：添加一个临时变量作为辅助：固定this。

 var o8={
     name:'apple',
     f:function(){
         console.log(this);//this指向o8
         var that=this;//使用变量固定this
         var f1=function(){
             console.log(that);//此时that指向o8
         }();
     }
 };
 o8.f();

运行结果：

当然如果采用严格模式，那么函数内部this不能指向顶层对象window！

由于this的灵活性，有时候难以把控。所以有三种绑定this的方法：

call,apply,bind

三种方法中如果第一个参数为空、null\undefined，那么默认指向全局对象window

call()：调用函数，指定this指向的对象；第一个参数是this指向的对象，第二个、第三个等是函数调用的参数

 var o9={
     name:'orange'
 };
 function test4(){
     console.log(this);
 }
 test4();
 test4.call(o9);//指定this的指向
 //call方法中如果参数为空、null\undefined，那么默认指向全局对象window
 test4(null);
 test4(undefined);
 //call方法第一个参数是this指向的对象，后面的参数是函数调用时用到的参数

运行结果：

call的一个应用：调用对象原生方法，即使该方法被覆盖

 var o10={};
 console.log(o10.hasOwnProperty('toString'));
 o10.hasOwnProperty=function(){
     return true;
 };
 console.log(o10.hasOwnProperty('toString'));
 //this指向o10，这样方法被覆盖，依然能够调用对象的原生方法
 console.log(Object.prototype.hasOwnProperty.call(o10,'toString'));

运行结果：

apply()：作用与call()类似，第一个参数也是this指向的对象；不同的是函数调用的参数以数组形式传入

 //apply与call作用类似，只是apply传入的参数是以数组形式传入
 //同理，第一个参数是this指向的对象，空或null或undefined，默认是全局对象window
 function test6(a,b){
     console.log(a+b);
 }
 test6.call(null,1,10);//test6(1,10)
 test6.apply(null,[10,100]);//test6(10,100)
 var arr=[1,2,3,4,5];
 console.log(Math.max.apply(null,arr));//this指向window,arr调用Math.max方法
 console.log(Array.prototype.slice.apply({0:1,1:100,length:2}));//类似数组的对象调用方法变为数组

运行结果：

bind()：将this绑定到某个对象，返回一个新函数（相较于call,apply的函数立即执行）

 //bind将this绑定到某个对象，并返回一个函数
 var o10={
     fruit:'apple',
     f:function(){
         console.log(this.fruit);
     }
 };
 o10.f();//正常取值
 console.log('---');
 var a=o10;
 a.f();//这样也能正确取值
 var b=o10.f;
 b();//这样取值就不行了;undefined
 /**
  * 此时this指向全局对象window,上面相当于
  * var b=function (){
  * console.log(this.fruit);//this指向window
  * }
  */

 //绑定this指向o10
 var c=o10.f.bind(o10);
 c();//此时能够正确取值

运行结果：

bind还能绑定函数的参数：

 //bind还可以绑定函数的参数
 var o10={
     name:'apple',
     age:100
 };
 function test7(x,y){
     console.log(x,this.name,y,this.age) ;
 }
 var t5= test7.bind(o10,'姓名信息: ');//绑定第一个参数，返回t5这个新函数
 t5(' 年龄信息: ');

运行结果：

参考：阮一峰JavaScript标准参考教程