因为JavaScript 中this 是在运行期进行绑定的,因此JavaScript 中this 关键字具备多重含义。
具体在实际应用中,this的指向大致可以分为下面4种。
作为对象的方法调用 和 作为普通函数调用
1 window.a = 2; 2 var obj = { 3 a:1, 4 getA:function(){ 5 console.log(this.a); 6 } 7 } 8 obj.getA(); //输出1,作为对象的方法调用,this指向当前对象 9 var x = obj.getA; 10 x(); //输出2,作为普通函数调用,this全部指向window对象。
注意,不管x之前是obj.getA,还是其他某个对象的属性,只要最后是以x(),fun()这种方式调用的,均视为普通函数调用,此时this指向window对象
但是,在ECMAScript5的strict模式下,作为函数调用的 this被规定不会指向全局对象
1 window.a = 2; 2 var obj = { 3 a:1, 4 getA:function(){ 5 "use strict" 6 console.log(this.a); 7 } 8 } 9 var x = obj.getA; 10 x(); //underfined
作为构造函数调用
1 var Myclass = function(){ 2 this.name = ‘beidan‘; 3 } 4 var obj = new Myclass(); 5 console.log(obj.name);//beidan 6 7 var Myclass = function(){ 8 this.name = ‘beidan‘; 9 return{ //显示的返回一个对象,注意!既要是显示,即有return,也要是对象{} 10 name:‘test‘ 11 } 12 } 13 var obj = new Myclass(); 14 console.log(obj.name);//test
作为function.prototype.call或function.prototype.apply调用
call,apply都是为了改变函数体内部 this 的指向。例如,fun1.call()或者fun1.apply() 都是为了改变fun1函数内部的this指向。
二者的作用完全一样,只是接受参数的方式不太一样。
1 document.getElementById(‘div1‘).onclick = function(){ 2 console.log(this.id); //div1 3 var func = function(){ 4 console.log(this.id); 5 } 6 func(); //通过普通函数调用,this指向window,输出undefined 7 }
1 document.getElementById(‘div1‘).onclick = function(){ 2 console.log(this.id); //div1 3 var func = function(){ 4 console.log(this.id); 5 } 6 func.call(this); //使用call,使func函数内部的this指向当前的函数对象,输出div1 7 }
2.模拟继承(借用其他对象的方法)
1 function fruits() {} 2 fruits.prototype = { 3 color: "red", 4 say: function() { 5 console.log("My color is "+ this.color); 6 } 7 } 8 var apple = new fruits; 9 apple.say(); //My color is red
1 banana = { 2 color: "yellow" 3 }; 4 orange = {color:‘orange’}; 5 apple.say.call(banana); //My color is yellow 6 apple.say.apply(orange ); //My color is orange
1 var numbers = [5, 458 , 120 , -215 ]; 2 var maxInNumbers = Math.max.apply(Math, numbers), //458 3 maxNumbers = Math.max.call(Math,5, 458 , 120 , -215, 666); //666
以上就是this在JavaScript中不同情况下的指向。
周末来了,博主又要出去浪了o(∩_∩)o
原文:http://www.cnblogs.com/beidan/p/5371275.html