Javascript this指针(2)

在上面这段代码中,我们定义了一个Person的“类”(实际上还是一个对象),然后在这个类的原型(类原型相当于C++中的静态成员变量的概念)中定义了sayHello属性,使其指向全局的sayHi对象。运行代码我们可以看到,marry和kevin都成功的向我们打了声“招呼”。

在这段代码中有两点需要思考的,一个是new我们很熟悉,但是在这里new到底做了什么操作呢?另外一个是,这里执行sayHello的时候,this指针为什么能够正确的指向marry和kevin对象呢?

我们来把上面定义“类”和实例化类对象的操作重新“翻译”一下:

<script type="text/javascript"> var name = "Kevin Yang"; function sayHi(){ alert("你好,我的名字叫" + this.name); } function Person(name){ var this; this.name = name; return this; } Person.prototype.sayHello = sayHi; var marry = Person("Marry"); marry.sayHello(); var kevin = Person("Kevin"); kevin.sayHello(); script>

当然这段代码并不能正确执行,但是它可以帮助你更好的理解这个过程。

当我们使用new关键字实例化一个“类”对象的时候,Javascript引擎会在这个对象内部定义一个新的对象并将其存入this指针。所有此对象内部用到this的代码实际上都是指向这个新的对象。如this.name = name,实际上是将参数中的name对象赋值给了这个新创建的对象。函数对象执行完之后Javascript引擎会将此对象返回给你,于是就有 marry变量得到的对象的name为“Marry”,而kevin变量得到的对象的name属性确实“Kevin”。

容易误用的情况

理解了this指针后,我们再来看看一些很容易误用this指针的情况。

示例1——内联式绑定Dom元素的事件处理函数

<script type="text/javascript"> function sayHi(){ alert("当前点击的元素是" + this.tagName); } script> <input id="btnTest" type="button" value="点击我" onclick="sayHi()">

在此例代码中,我们绑定了button的点击事件,期望在弹出的对话框中打印出点击元素的标签名。但运行结果却是:

image

也就是this指针并不是指向input元素。这是因为当使用内联式绑定Dom元素的事件处理函数时,实际上相当于执行了以下代码:

<script type="text/javascript"> document.getElementById("btnTest").onclick = function(){ sayHi(); } script>

在这种情况下sayHi函数对象的所有权并没有发生转移,还是属于window所有。用上面的指导原则一套我们就很好理解为什么this.tagName是undefined了。

那么如果我们要引用元素本身怎么办呢?

我们知道,onclick函数是属于btnTest元素的,那么在此函数内部,this指针正是指向此Dom对象,于是我们只需要把this作为参数传入sayHi即可。

<script type="text/javascript"> function sayHi(el){ alert("当前点击的元素是" + el.tagName); } script> <input id="btnTest" type="button" value="点击我" onclick="sayHi(this)">

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwyzj.html