javascript里面this机制的几个例子

标签：

javascript里面的this值会随着使用场景的不同二发生变化，但是总有一个原则，那就是this总指向当前调用函数的那个对象。以下我会举几个例子来说明这个问题。
1.this本身总是指向当前的类的实例
function showMsg(){
var msg=1;
alert(this.msg);
}
showMsg();
这样调用的时候显示undefined，因为showMsg没有实例，所以不能用this
2.下面来看一个点击事件
<div id="nav" onclick="getId();">ddd</div>
function getId() {
alert(this.id)
}

在段代码运行结果显示this.id是未定义的，判断this指向谁，看执行时而不是定义时。只要函数没有绑定在对象上使用，那么它的this就是window。 里面这个this是getId函数内部的，但不是div这个dom内部的。
这段代码相当于div.onclick = function() { getId(); }
有几种解决方法
a.
<div id="nav">ddd</div>
window.onload=initForm;
function initForm()
{
document.getElementById("nav").onclick=getId;
}
function getId() {
console.log(this)
alert(this.id)
}

在这段代码中，函数被绑定在了对象上。所以结果是可行的。
b.
<div id="nav" onclick="getId(this);">ddd</div>
function getId(elem)
{
alert(elem.id);
}

这段代码是相当于把this传给了elem ，elem.id是可以得到的。
3.针对第二个例子的c方法，还想再这多说点其它东西
<div id="nav" onclick="getId(this);" xid="weixin">ddd</div>
function getId(elem)
{
console.log(elem)
alert(elem.id ); //这个是可以的 id是html里面有的属性
alert(elem.xid ); //但是这个不可以，因为xid不是固有属性$(item).attr("xid")
alert(this.id) //这个也是不行的
}

4.可以再看一下这个例子，跟前面是一样的

<form action="#">
<select id="nav">
<option value="">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
</select>
</form>

window.onload=initForm;
function initForm(){
document.getElementById("nav").onchange = getId;
}
function getId() {
console.log(this)
var xid= this.options[this.selectedIndex].value;
alert(xid);
} //这个可以得到id值

这种也是可以得到结果的。

javascript里面this机制的几个例子

标签：

原文地址：http://www.cnblogs.com/qianxinxu/p/5477294.html