这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了深入解析 JavaScript 编程中的 this 关键字使用, 是 JS 入门学习中的基础知识, 需要的朋友可以参考下
JavaScript 里的 this 到底指得是什么?很多人都会告诉你 this 指的是当前对象。这样理解对么?在大多数情况下确实没错。比如我们经常会在网页上写这样的 JavaScript:
- <input type="submit" value="提交" onclick="this.value='正在提交数据'" />
这里的 this 显然指的是当前对象,即这个提交按钮。通常,我们使用 this 的情况都与此类似。但是有什么情况不是这样的呢?
大家看看这个例子:
- var foo = function() {
- console.log(this);
- }
- foo();
- new foo();
比较一下 foo() 和 new foo() 的运行结果,你会发现,前者 this 指向的并非 foo 本身,而是当前页面的 window 对象,而后者才真正的指向 foo。这是为什么呢?
其实这牵涉到 JavaScript 的一条重要特性,就是所谓的 "闭包"。闭包这个概念说复杂也不复杂,但也不是简单到能用一两句话说清。偶会在以后的文章中深入探讨这个 Javascript 最重要的特性。现在,我要告诉大家的是,因为闭包的存在,JavaScript 中的作用域变得相当重要。
所谓的作用域,简单的说,就是创建一个函数时在什么环境下创建的。而 this 变量的值,如果没有指定的话,就是函数当前的作用域。
在前面的例子里,foo() 函数是在全局作用域(这里就是 window 对象),所以 this 的值是当前的 window 对象。而通过 new foo() 这样的形式,其实是创建了一个 foo() 的副本,并在这个副本上进行的操作,所以这里的 this 就是 foo() 的这个副本。
这样讲可能有点抽象,大家来看个实际的例子:
- <input type="button" id="aButton" value="demo" onclick="" />
- <script type="text/javascript">
- function demo() {
- this.value = Math.random();
- }
- </script>
如果直接调用 demo() 函数,程序就会报错,因为 demo 函数是在 window 对象中定义的,所以 demo 的拥有者(作用域)是 window,demo 的 this 也是 window。而 window 是没有 value 属性的,所以就报错了。
如果我们通过创建副本的方式,将这个函数的副本添加到一个 html 元素,那么他的所有者就成了这个元素,this 也指代了这个元素:
- document.getElementById("aButton").onclick = demo;
这样就将 aButton 的 onlick 属性设置为 demo() 的一个副本,this 也指向了 aButton。
你甚至可以为多个不同的 HTML 元素创建不同的函数副本。每个副本的拥有者都是相对应的 HTML 元素,各自的 this 也都指向他们的拥有者,不会造成混乱。
但是,如果你这样定义某个元素的 onlick 事件:
- <input type="button" id="aButton" value="demo" onclick="demo()" />
点击这个 button 之后,你会发现,程序又会报错了——this 又指向了 window!
其实,这种方法并没有为程序创建一个函数,而只是引用了这个函数。
具体看一下区别吧。
使用创建函数副本的方法:
- <input type="button" id="aButton" value="demo" />
- <script type="text/javascript">
- var button = document.getElementById("aButton");
- function demo() {
- this.value = Math.random();
- }
- button.onclick= demo;
- alert(button.onclick);
- </script>
得到的输出是:
- function demo() {
- this.value = Math.random();
- }
使用函数引用的方法:
- <input type="button" id="aButton" value="demo" onclick="demo()" />
- <script type="text/javascript">
- var button = document.getElementById("aButton");
- function demo() {
- this.value = Math.random();
- }
- alert(button.onclick);
- </script>
得到的输出是:
- function onclick() {
- demo();
- }
这样就能看出区别了吧。函数引用的方式中,onclick 事件只是直接调用 demo() 函数,而 demo() 函数的作用域仍旧是 window 对象,所以 this 仍然指向 window。
这样就又引出了一个问题:既然函数副本这么好用,为什么还需要函数引用的方法呢?答案是性能。每新建一个函数的副本,程序就会为这个函数副本分配一定的内存。而实际应用中,大多数函数并不一定会被调用,于是这部分内存就被白白浪费了。而使用函数引用的方式,程序就只会给函数的本体分配内存,而引用只分配指针,这样效率就高很多。程序员么,节约为主,恩
所以我们来看一个更好的解决方案:
- <script type="text/javascript">
- function demo(obj) {
- obj.value = Math.random();
- }
- </script>
- <input type="button" value="demo" onclick="demo(this)" />
- <input type="button" value="demo" onclick="demo(this)" />
- <input type="button" value="demo" onclick="demo(this)" />
这样,效率和需求就都能兼顾了。
this 的指向 JavaScript 由于其在运行期进行绑定的特性,JavaScript 中的 this 可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。常言道,字不如表,表不如图。为了让人更好的理解 JavaScript this 到底指向什么?下面用一张图来进行解释:
上图我称之为 "JavaScript this 决策树"(非严格模式下)。下面通过例子来说明这个图如何来帮助我们对 this 进行判断:
- var point = {
- x : 0,
- y : 0,
- moveTo : function(x, y) {
- this.x = this.x + x;
- this.y = this.y + y;
- }
- };
- //决策树解释:point.moveTo(1,1)函数不是new进行调用,进入否决策,
- //是用dot(.)进行调用,则指向.moveTo之前的调用对象,即point
- point.moveTo(1,1); //this 绑定到当前对象,即point对象
point.moveTo()函数在 "JavaScript this 决策树" 中进行判定的过程是这样的:
1)point.moveTo 函数调用是用 new 进行调用的么?这个明显不是,进入 "否" 分支,即函数是否用 dot(.) 进行调用?;
2)point.moveTo 函数是用 dot(.) 进行调用的,即进入 "是" 分支,即这里的 this 指向 point.moveTo 中. 之前的对象 point;
图解 point.moveTo 函数的 this 指向什么的解析图如下图所示:
再举例,看下面的代码:
- function func(x) {
- this.x = x;
- }
- func(5); //this是全局对象window,x为全局变量
- //决策树解析:func()函数是用new进行调用的么?为否,进入func()函数是用dot进行调用的么?为否,则 this指向全局对象window
- x;//x => 5
func()函数在 "JavaScript this 决策树" 中进行判定的过程是这样的:
1)func(5) 函数调用是用 new 进行调用的么?这个明显不是,进入 "否" 分支,即函数是否用 dot(.) 进行调用?;
2)func(5) 函数不是用 dot(.) 进行调用的,即进入 "否" 分支,即这里的 this 指向全局变量 window,那么 this.x 实际上就是 window.x;
图解 func 函数的 this 指向什么的解析图如下图所示:
针对作为函数直接调用的方式,下面看一个复杂的例子:
- var point = {
- x : 0,
- y : 0,
- moveTo : function(x, y) {
- // 内部函数
- var moveX = function(x) {
- this.x = x;//this 指向什么?window
- };
- // 内部函数
- var moveY = function(y) {
- this.y = y;//this 指向什么?window
- };
- moveX(x);
- moveY(y);
- }
- };
- point.moveTo(1,1);
- point.x; //=>0
- point.y; //=>0
- x; //=>1
- y; //=>1
point.moveTo(1,1) 函数实际内部调用的是 moveX() 和 moveY() 函数, moveX() 函数内部的 this 在"JavaScript this 决策树 " 中进行判定的过程是这样的:
1)moveX(1) 函数调用是用 new 进行调用的么?这个明显不是,进入 "否" 分支,即函数是否用 dot(.) 进行调用?;
2)moveX(1) 函数不是用 dot(.) 进行调用的,即进入 "否" 分支,即这里的 this 指向全局变量 window,那么 this.x 实际上就是 window.x;
下面看一下作为构造函数调用的例子:
- function Point(x,y){
- this.x = x; // this ?
- this.y = y; // this ?
- }
- var np=new Point(1,1);
- np.x;//1
- var p=Point(2,2);
- p.x;//error, p是一个空对象undefined
- window.x;//2
Point(1,1) 函数在 var np=new Point(1,1) 中的 this 在 "JavaScript this 决策树" 中进行判定的过程是这样的:
1)var np=new Point(1,1) 调用是用 new 进行调用的么?这个明显是,进入 "是" 分支,即 this 指向 np;
2)那么 this.x=1,即 np.x=1;
Point(2,2) 函数在 var p= Point(2,2) 中的 this 在 "JavaScript this 决策树" 中进行判定的过程是这样的:
1)var p= Point(2,2) 调用是用 new 进行调用的么?这个明显不是,进入 "否" 分支,即函数是否用 dot(.) 进行调用?;
2)Point(2,2) 函数不是用 dot(.) 进行调用的?判定为否,即进入 "否" 分支,即这里的 this 指向全局变量 window,那么 this.x 实际上就是 window.x;
3)this.x=2 即 window.x=2.
最后看一下函数用 call 和 apply 进行调用的例子:
- function Point(x, y) {
- this.x = x;
- this.y = y;
- this.moveTo = function(x, y) {
- this.x = x;
- this.y = y;
- }
- }
- var p1 = new Point(0, 0);
- var p2 = {
- x: 0,
- y: 0
- };
- p1.moveTo.apply(p2, [10, 10]); //apply实际上为p2.moveTo(10,10)
- p2.x //10
p1.moveTo.apply(p2,[10,10]) 函数在 "JavaScript this 决策树" 中进行判定的过程是这样的:
我们知道,apply 和 call 这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。p1.moveTo.apply(p2,[10,10]) 实际上是 p2.moveTo(10,10)。那么 p2.moveTo(10,10) 可解释为:
1)p2.moveTo(10,10) 函数调用是用 new 进行调用的么?这个明显不是,进入 "否" 分支,即函数是否用 dot(.) 进行调用?;
2)p2.moveTo(10,10) 函数是用 dot(.) 进行调用的,即进入 "是" 分支,即这里的 this 指向 p2.moveTo(10,10) 中. 之前的对象 p2, 所以 p2.x=10;
关于 JavaScript 函数执行环境的过程,IBM developerworks 文档库中的一段描述感觉很不错,摘抄如下:
"JavaScript 中的函数既可以被当作普通函数执行,也可以作为对象的方法执行,这是导致 this 含义如此丰富的主要原因。一个函数被执行时,会创建一个执行环境(ExecutionContext),函数的所有的行为均发生在此执行环境中,构建该执行环境时,JavaScript 首先会创建 arguments 变量,其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量,首先初始化函数的形参表,值为 arguments 变量中对应的值,如果 arguments 变量中没有对应值,则该形参初始化为 undefined。如果该函数中含有内部函数,则初始化这些内部函数。如果没有,继续初始化该函数内定义的局部变量,需要注意的是此时这些变量初始化为 undefined,其赋值操作在执行环境(ExecutionContext)创建成功后,函数执行时才会执行,这点对于我们理解 JavaScript 中的变量作用域非常重要,鉴于篇幅,我们先不在这里讨论这个话题。最后为 this 变量赋值,如前所述,会根据函数调用方式的不同,赋给 this 全局对象,当前对象等。至此函数的执行环境(ExecutionContext)创建成功,函数开始逐行执行,所需变量均从之前构建好的执行环境(ExecutionContext)中读取。" 理解这段话对于理解 Javascript 函数将大有好处。
来源: http://www.phperz.com/article/17/0408/268806.html