JS —— this指向的相关问题

this指的是调用这个函数的对象,比如function a(){alert(this);} 如果你直接执行这个函数a(); 那么它的this指的是window对象,如果document.getElementById("test").onclick=a; 那么this指的是前面那个id为test的结点。你可以用call和apply指定this,具体怎么用可以去网上查。

实例1:

JavaScript代码
  1. window.val=1;  
  2. var json={  
  3.     val:10,  
  4.     dbl:function(){  
  5.         this.val*=2;  
  6.     }  
  7. }  
  8. json.dbl();  
  9. alert(window.val+json.val); //21  
  10. var dbl=json.dbl;  
  11. dbl()  
  12. alert(window.val+json.val); //22  
  13. json.dbl.call(window);  
  14. alert(window.val+json.val); //24  
JavaScript代码
  1. window.val=1;  
  2. var json={  
  3.     val:10,  
  4.     dbl:function(){  
  5.         console.log(this);  
  6.         this.val*=3;  
  7.         //如果dbl.call(window) *=2/window.val=2||*=3/window.val=3  
  8.     }  
  9. }  
  10. //json.dbl();  
  11. //alert(window.val+json.val); //21  
  12. //var dbl=json.dbl;  
  13. //dbl()   
  14. //alert(window.val+json.val); //22 —— dbl()_this指向var json的function  
  15.   
  16.   
  17. json.dbl.call(window);      //call调用一个对象的一个方法,以另一个对象替换在当前执行。   
  18. alert(window.val+json.val); //12  _this指向window.val=2,json.val=10  

实例2:

JavaScript代码
  1. var someuser = {  
  2.     name: 'byvoid',  
  3.     func: function() {  
  4.         console.log(this.name);  
  5.     }  
  6. };  
  7. var foo = {  
  8.     name: 'foobar'  
  9. };  
  10.   
  11. someuser.func(); // 输出 byvoid  
  12.   
  13. foo.func = someuser.func;  
  14. foo.func(); // 输出 foobar  
  15.   
  16. name = 'global';  
  17. func = someuser.func;  
  18. func(); // 输出 global  

关于使用bind切换this指针等相关:

JavaScript代码
  1. function test() {  
  2.         var obj = {name: 1};  
  3.         window.setTimeout(function () {  
  4.             console.log(obj.name);  
  5.         }, 1000);  
  6.         window.setTimeout(function () {  
  7.             console.log(this.name);  
  8.         }.bind(obj), 1000);  
  9. }  
  10. test();  
  11. //1  
  12. //1  

总结:必然是第一种性能好...原因是call,apply,bind这种绑定this的操作非常耗性能,闭包好一点,除非你用that保留this,不然this丢失了你分分钟都不能debug出来.

function Animal(){    

    this.name = "Animal";    

    this.showName = function(){    

        alert(this.name);    

    }    

}    

function Cat(){    

    this.name = "Cat";    

}    

var animal = new Animal();

var cat = new Cat();

//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。    

//输入结果为"Cat"    

animal.showName.call(cat,",");

animal.showName.apply(cat,[]);

call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat。

“call 的意思是把 animal 的方法放到cat上执行”这个应该是animal.showName调用时候,将animal中的this对象转变为cat,alert(this.name);这时候的this是cat,因此this.name==cat.name,所以输出是Cat