this的定义和理解:
this是JavaScript语言的一个关键字,它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内使用。
1、this和执行环境对象有关,和函数的声明无关。
var name="Tom";var Bob={name:'Bob',show:function(){console.log(this.name);}};var show=Bob.show; //等同于var show=function(){console.log(this.name);}show(); //输出的是Tom,全局对象调用show()函数window.Bob.show(); //输出是 Bob ,函数执行对象是Bobvar someone={name:"盖伦",say:function(){console.log(this.name);}};var otherone={name:"杰克",speak:someone.say //等同于声明函数speak:function(){console.log(this.name);}};otherone.speak(); //输出 杰克 ,函数被执行时this指向调用的对象otherone
上述代码解析:函数执行时,this指向的是函数运行时所在的当前环境对象。注意this和执行环境有关,和函数的声明无关。。也可以理解为this指向的是调用它的对象!
2、函数没有明确的执行对象时,this指向全局对象window。
var a=11;function test1(){var person="zhangsan";console.log(this); //输出全局对象windowconsole.log(this.person); //undefinedconsole.log(this.a); // 11}test1(); //没有明确函数执行对象时,this指向window全局对象window.test1(); //作用同上var name="Jack";var Rose={name:'rose',showName:function(){console.log(this.name);}};var Jane={name:'Jane',showName:function(){var fun=Rose.showName; //等同于var fun=function(){console.log(this.name);}fun(); //在Jane.showName声明时执行了,没有明确的执行对象,this指向全局对象window}};Jane.showName();var obj = {a:10,b:{a:12,fn:function(){console.log(this.a); //undefinedconsole.log(this); //window}}}var j = obj.b.fn; //等同于 j=function(){console.log(this.a);console.log(this);} j(); //所以this指向window, this.a是undefined
上述代码解析:没有明确的执行对象时,this指向全局对象window。浏览器中window是js中的全局对象,创建的对象和声明的函数实际是在给window添加属性;
3、定时器setTimeout 、setInterval 和匿名函数执行时的当前对象是全局对象window,定时器也可以理解为延迟执行的匿名函数
var name="Jack";var nameObj={name:'rose',showName:function(){console.log(this.name);},waitShowName:function(){setTimeout(this.showName,5000); //等同于延迟执行function(){...}(this.showName)的匿名函数}};nameObj.waitShowName(); //输出 Jack ,定时器和匿名函数执行的当前对象是window全局对象(function(val){if(val>10){console.log(this); //输出window}})(55);
如何使定时器中的执行对象不是window对象,可以通过var that=this; 的形式保存定时器所在函数的对象,定时器中匿名函数使用that获取定时器所在的对象
var name = "Bob";
var nameObj ={ name : "Tom", showName : function(){ alert(this.name); }, waitShowName : function(){var that = this; //保存调用waitShowName()函数时的对象到that//定时器使用时,使用that也就是定时器所在对象nameObj,而不是windowsetTimeout(function(){that.showName();}, 1000);}
}; nameObj.waitShowName(); //Tom
4、构造函数使用new关键词创建对象后,构造函数中的this指向该构造函数创建出来的新对象
function Person(val){this.name=val}Person.prototype.show=function(){console.log(this.name);};var zhangsan=new Person("zhangsan"); //new关键词会根据构造函数创建一个新对象,this指向新对象zhangsan.show();
如果构造函数中使用return 返回一个对象,new 关键词创建的新对象会被return返回的对象替换,return返回的是非对象时this指向new创建的新对象,如下
function fn(){ this.name = 'Tom'; return {name:'xiaohong',showName:function(){console.log(this.name);}};
}
var a = new fn;
a.showName(); //输出 xiaohongfunction fn(){ this.name = 'Tom'; return false; //return 返回非对象
}
var a = new fn;
console.log(a.name); //输出 Tom
5、eval() 函数 和 new Function() 使用字符串作为执行的代码体
eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。
var a=eval('2+8'); //eval函数使用string作为参数,可以计算表达式或者执行js语句var b=eval('console.log("这是使用eval函数直接执行js语句获取的结果");');console.log(a);
类似 eval()函数,new Function() 可以将字符串当做代码(函数体)来执行。最后一个string参数做函数体,其他参数做该函数的参数
//Function 这个构造函数可以用来创建函数对象//一个参数都不传的时候,创建了一个fn0的函数var fn0=new Function();console.log(typeof fn0); //function//这里是创建了一个fn1的函数,只传一个参数string时,函数体就是传入的字符串形式的js语句var fn1=new Function("console.log('666666');"); fn1(); //输出 666666//传入多个参数的时候,最后一个参数作为函数体,前面的参数都作为该函数的参数var fn2=new Function("a","b","return a + b;"); console.log(fn2(10,90)); //输出100
7、call() 和applay() 方法可以改变this指向。这里不细说,
后续会有一篇call、applay、bind改变this指向的文章详细分析,这里简单提一下
var name = "window";var someone = {name: "Bob",showName: function(){alert(this.name);}
};var other = {name: "Tom"
}; someone.showName.apply(); //window
someone.showName.apply(other); //Tom ,applay方法使得this指向为other对象
apply和call方法都用于改变函数执行时的当前对象,当无参数时,当前对象为window,有参数时当前对象为该参数。于是这个例子Bob成功偷走了Tom的名字;
参考网址:http://www.cnblogs.com/justany/archive/2012/11/01/the_keyword_this_in_javascript.html