Javascript之this关键字深入解析

首先，我先抛出一个定论：”在Javascript中，This关键字永远都指向函数(方法)的所有者”。

函数


代码如下:

function introduce() {
     alert("Hello, I am Laruence\r\n");
}

对于这个函数，this关键字指向谁呢？

如我之前的文章所述(Javascript作用域)，定义在全局的函数，函数的所有者就是当前页面，也就是window对象。

这也就是为什么，我把函数用引号引起来，因为定义在全局的函数，其实也就是window对象的一个方法。

所以，我们即可用通过函数名直接调用，也可用通过window.方法名来调用，这个时候，方法中的this关键字指向它的所有者：window对象。

如果，我们查看window的introduce属性，就会得到：


代码如下:

var name = "I am Laruence";
function introduce() {
     alert(this.name);
}
alert(window.introduce);

看了上面的代码，也许你就会想到既然，全局函数是window对象的方法，全局变量是window对象的属性(Javasript作用域中已有述及)，那么，在全局函数中就可用通过this关键字来访问全局变量吧？

答案是肯定的，如果调用introduce函数，你就会认识我是Laruence。

事件处理函数

也许，对于this关键字的迷惑，绝大部分原因是来自把函数(方法)用在事件处理的时候。


代码如下:

<input id="name" type="text" name="name" value="Laruence" />比如，我们现在需要在点击”name”输入框的时候，显示出name输入框的value。那么，可用写下如下代码：

function showValue() {
     alert(this.value);
}
document.getElementById('name').onclick = showValue;

上面的代码，运行正常，但是why？不是说函数的this指针永远指向函数所有者么？不是说全局变量的所有者是window对象么？

呵呵，如果你能想到这个问题，那说明你在认真的看我的文章，否则，我建议你从头看起，否则看完了，你还是迷糊~

恩，对，对于上面的代码，showValue是定义在了全局对象，那么看来问题只能发生在onclick事件绑定的时候了。

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

也就是说，我们把函数showValue Copy 给了name输入框对象的onclick属性。如果我们查看此时的onclick：


代码如下:

function showValue() {
     alert(this.value);
}
document.getElementById('name').onclick = showValue;
alert(document.getElementById('name').onclick);

所以，当事件触发的时候，就会去调用name输入框的onclick方法，这个时候，this关键字自然就指向的是name输入框了。

但是，迷惑的事情就来了，比如下面这种写法：


代码如下:

function showValue() {
     alert(this.value);
}
<input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

就无法正常运行，这又是为什么呢？

恩，因为这个时候，并不是赋值，而是引用。

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

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

而对于刚才的方法：

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

这个也能侧面的反映出俩者的区别：对于前者，是赋值，而对于后者是引用。如果我们这个时候查看输入框的onclick属性，我们得到：

alert(dom.onclick);

看到区别了么？也就懂得为什么了吧？

讲到这里，有一个很有趣的例子，大家可以在IE下试试：

<img src="xxx" onerror="alert(1); function hi() { alert(2); }" />

改变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 laruence = {
    name : 'laruence',
    age : 26,
    position : 'Senior PHP Engineer',
    company : 'Baidu.inc'
};

function introduce() {
    alert(this.name);
}

introduce.call(laruence);

赞 (0)

相关推荐

  • 跟我学习javascript的this关键字

    本文仅就这一问题展开讨论,阅罢本文,读者若能正确回答 JavaScript 中的 What 's this 问题,作为作者,我就会觉得花费这么多功夫,撰写这样一篇文章是值得的. 我们要记住一句话:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.也即:谁调用,指向谁.切记- 本文将分三种情况来分析this对象到底身处何方. 1.普通函数中的this 无论this身处何处,第一要务就是要找到函数运行时的位置. var name="全局"; function getNam

  • 关于javascript中this关键字(翻译+自我理解)

    关于javascript中this关键字(翻译+自我理解)

    下文有大概70%的内容出自http://www.quirksmode.org/js/this.html,另外30%是我自己对它的理解和感想.希望能对有需要的人一点帮助... 首先,先看一个很典型的关于this关键字题目: 复制代码 代码如下: var name = 'hong' var obj = { name: 'ru', getName: function(){ return function(){ return this.name; }; } } alert(obj.getName()()

  • Javascript中this关键字的一些小知识

    Javascript应该是现在最流行的跨平台语言之一,一直在玩前端的一些有意思的东西,发现竟然没有掌握好这门语言.有点舍本逐末,于是想趁着现在这有空的时候好好补充一点遗漏的东西. this的隐性绑定 一开始这是我很迷惑的东西,刚开始看到的时候,不理解.而后,在相似的情况下,又能用类似的方法解决同样的问题.便试着理清这其中的知识,方便于查找. 这是一个Javascript语言上设计的错误,但是似乎这个错误是不可避免的,函数是对象,数组是对象等等.引用<Javascript: The Good Pa

  • 关于js里的this关键字的理解

    this关键字在c++,java中都提供了这个关键字,在刚开始学习时觉得有难度,但是只要理解了,用起来就方便多了,下面通过本篇文章给大家详解js里this关键字的理解. 关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:knockout,有时候不明白为什么不直接使用this,而要把 this 作为参数传入. 接下来你谈谈我对它的理解,也作为一个笔记,

  • javascript与jquery中的this关键字用法实例分析

    本文实例分析了javascript与jquery中的this关键字用法.分享给大家供大家参考,具体如下: this 表示当前的对象,这个当前对象可以是表单,<p>等任何元素 1.javascript中this的用法: JS部分: <script type="text/javascript"> function chimg(obj){ obj.src="./images/2.jpg"; } </script> HTML部分: 复制代

  • 图解JavaScript中的this关键字

    图解JavaScript中的this关键字

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(

  • JavaScript中的this关键字使用方法总结

    在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代. 它可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式.JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用. 1.作为对象方法调用 在 JavaScript 中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法,在使用这种调用方式时,this 被

  • javascript中this关键字详解

    不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:this涵义 1.2:this指向的可变性 2.使用场合 2.1:全局环境 2.2:构造函数 2.3:对象的方法 3.使用注意点 3.1:避免多层嵌套this 3.2:避免数组处理方法中的this 3.3:避免回调函数中的this 1.涵义 1.1:this涵义 在我写的一篇关于 构造函数与new关键字

  • JavaScript中的this关键字使用详解

    和其它许多面向对象的语言一样,JavaScript 中也有 this 关键字,this 在函数中用来指向调用此方法的对象.实际编程中要判断 this 到底指向谁,一般可遵循以下原则: 如果该函数被 Function.call 或者 Function.apply 调用,那么 this 指向 call/apply 的第一个参数,如果参数是 null 或者 undefined,this 则指向全局对象(在浏览器中的话,全局对象就是 window 对象). 如果该函数被 Function.bind 调用

  • js中的this关键字详解

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码 代码如下: function test(){ this.x = 1; } 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 下面分四种情况,详细讨论this的用法. 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 请看下面这段代码,它的运行结果是1.

  • 深入理解Javascript中的this关键字

    自从接触javascript以来,对this参数的理解一直是模棱两可.虽有过深入去理解,但却也总感觉是那种浮于表面,没有完全理清头绪. 但对于this参数,确实会让人产生很多误解.那么this参数到底是何方神圣? 理解this this是一个与执行上下文(execution context,也就是作用域)相关的特殊对象.因此,它可以叫作上下文对象(也就是用来指明执行上下文是在哪个上下 文中被触发的对象). 任何对象都可以做为上下文中的this的值.在一些对ECMAScript执行上下文和部分th

  • 精通JavaScript的this关键字

    JS中的this关键字让很多新老JS开发人员都感到困惑.这篇文章将对this关键字进行完整地阐述.读完本文以后,您的困惑将全部消除.您将学会如何在各种不同的情形正确运用this. 我们和在英语.法语这样的自然语言中使用名词一样地使用this.比如,"John飞快地跑着,因为他想追上火车".请注意这句话中的代指John的代名词"他".我们原本也可以这样表达,"John飞快地跑着,因为John想追上火车".按照正常的语言习惯,我们并不按第二种方式表达

  • JavaScript中的this关键字介绍与使用实例

    当创建一个类的时候,如果希望下面new出来的每个类都拥有一些通用的变量或者其他的函数,这个this关键字这是最好的方式. 当然,既然是面向对象的语言,必然存在访问权限的问题,这里也和this关键字息息相关.下面我们来演示一个例子来说明一下这个类的访问权限的问题. 复制代码 代码如下: //Person类     function Person(){     var name="abc";//var声明的都是类内部的私有变量,外部无法访问      var age = 20; this.

随机推荐