javascript this 关键字

在Javascript中,This关键字永远都指向函数(方法)的所有者。

定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象。

如：

var name = "I am tianlong";
function show() 
{     
	alert(this.name);
}

//调用
window.show();
//或者
show();

但是在 另外一种情况：

<input id="name" type="text" name="name" value="tianlong" />

function showValue() {     
	alert(this.value);
}

document.getElementById('name').onclick = showValue;

也可以正常运行。 结果为 tianlong

在Js中一切都是对象, 函数和方法也都是对象的属性, 只不过函数有可执行的内部属性. 所以, 对于上面的代码, 在对onclick绑定处理器的时候, 其实是对id为name的输入框Dom对象的onclick属性赋值.

也就是说, 我们把函数showValue 复制了一份 给了name输入框对象的onclick属性. 并不是传递了一个引用。

但是这种情况：

var value="I am tianlong";
function showValue() {     
	alert(this.value);
}
<input id="name" type="text" name="name" value="tianlong" οnclick="showValue()"/>

结果为  I am tianlong。 造成这种情况的原因是 此处是 传递了一个函数引用。

如果我们注意俩种onclick的写法, 你会发现, 对于之前的方法, 我们使用的是:

dom.onclick = showvalue; //没有调用符

后一种是

onclick = "showvalue()" //有调用符

俩者的区别:对于前者,是赋值, 而对于后者是引用.

改变this的指向

那, 既然我们已经知道为什么了, 那怎么才能让this指向我们想要指的地方呢?

对于上面的事件处理函数来说, 我们可以有如下几种写法:

  
  
dom.onclick = showValue();
dom.onclick = function() { alert(this.value) ;}
<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.
dom.addEventListener(dom, showValue, false); //ff only

而对于不是事件处理函数的场合, 我们可以使用apply, 或者call, 来改变this关键字的指向.

比如:

 

var tianlong= {     
	name : 'tianlong',     
	age : 25,     
	position : 'Senior Engineer',     
	company : 'baozun'
}; 
function introduce() {     
	alert(this.name);
}
introduce.call(tianlong);