参考文章:《深入浅出 JavaScript 中的 this》 http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/
JavaScript的this指针为何如此让人琢磨不透、难于理解?这个问研究了很久,总算有些眉目了。这个问题源于JavaScript是顺序执行的,是解释执行的,运行时才能动态绑定this指针。这区别于Java、C#等语言,它他们都编译后执行的,this指向当前的对象。
1.function类型变量
javascript中的function也可理解为一种数据类型,通过function来定义函数(方法)。
function hello() { } alert(typeof(hello)); //输出function
this引用的对象究竟是什么?this指针指向一个对象,并且与function变量密不可分。要了解this指针的指向,需要先了解function变量是如何定义的。
2.function中的成员定义
function中可以定义三类:私有成员(var变量)、公有成员(this)和window对象成员。
function Person() { var age = 30; this.name = "Bass"; income = 0; } //age //私有成员,不能在Person之外调用 //name //公有成员,需要通过Person类对象调用 var p = new Person(); alert(p.name); //income //window对象成员,可以直接或通过window对象调用 income = 10000000; window.income = window.income * 10; alert(income);
3.this指针的指向
1) function变量作为对象方法被调用,此时this指针指向对象本身。
var obj = { hello: function (param) { return (this == param) } } alert(obj.hello(obj)); //输出true
2) function变量作为普通函数被调用,此时this指针指向window对象。
function hello(param) { return (this == param); } alert(hello(window)); //输出true //window.hello(window); //2)可以理解为1)的特情况,2)定义的函数默认是定义在window对象的作用域内的,默认是window对象的方法。
3) function变量作为构造函数被调用,此时this指针指向新创建的类对象。
function HelloWorld() { //为区别JavaScript类和普通JavaScript方法,HelloWorld首字母大写 this.hello = function (param) { //hello方法是定义在HelloWorld类中的,只能定义类实现,才能调用该方法 return (this == param); } } var obj = new HelloWorld(); alert(obj.hello(obj)); //输出true
4) function变量作为prototype方法被调用,此时this指针指向调用function的对象(新创建的类对象或prototype对象)。
prototype对象方法,是对拥有prototype对象的类的方法扩展,方法可视为是类的公有成员方法。
function HelloWorld() { } HelloWorld.prototype.hello = function (param) { return (this == param); } alert(HelloWorld.prototype.hello(HelloWorld.prototype)); //输出true var obj = new HelloWorld(); alert(obj.hello(obj)); //输出true alert(obj == HelloWorld.prototype); //输出false
5) function变量调用call或apply方法来执行,此时this指针指向被改变,并指向call或apply方法的第一个参数所引用的对象。
function HelloWorld() { this.hello = function (param) { alert(this == param); } } var t1 = new HelloWorld(); var t2 = new Object(); t1.hello(t1); //输出true //直接调用方法,this指向不改变 t1.hello.call(t2, t1); //输出false //通过call方法调用,this指向改变,并指对象t2 t1.hello.call(t2, t2); //true
6) function变量作为html元素的事件处理方法被调用,此时this指针指向触法事件的元素本身 ,并可作为实参传入事件处理方法。
不太明白以下的测试结果,谁知道告诉我一下。
<div onclick="hello(this)"> HelloWorld </div>
function hello(param) { alert(this == param); //true alert(this.innerText); //undefined alert(this == window); //true alert(param == window); //false
alert(param.innerText); //HelloWorld alert(this.innerText); //undefined }
以上就是我的测试验证结果,6)的结果不太明白为什么,我觉得this指向window还能理解,为什么this又等于param是为什么呢。麻烦知道的同鞋告诉我一下为什么?