JavaScript中的this到底是什么?
2012-08-22 12:29
393 查看
对于常年使用C++,C#,Java等这些面向对象语言的程序员来说,几乎天天都和this打交道。在这些语言里,this含义非常明确,就是指向当前的对象实例,我们用起来也是相当的放心。然而,到了JavaScript这个动态语言里,this的写法没变,但是其含义却大大地不同了,下面用实例说明,使用浏览器为Firefox14.0.1.
例子一:
(1)源码
(2)执行结果
(3)分析与结论
此时,JS引擎会自动生成一个window对象的成员函数,把上述执行代码放入此函数执行,此时this指向对象window。此时与C++,J***A,C#的实例成员函数类似。
例子二:
(1)源码
(2)执行结果
(3)分析与结论
此例本质上与例子一相同,其中f();其实等价于window.f();也是通过window对象去调用成员函数,此时this仍指向window对象。此时与C++,J***A,C#的实例成员函数类似。
例子三:
(1)源码
(2)执行结果
(3)分析与结论
此时,f()被当做构造函数来执行,函数体内的this此时指向被新构造出来的对象a。此时,与C++,J***A,C#的构造函数类似。
例四:
(1)源码
(2)执行结果
(3)分析与结论
通过apply方式调用时,函数内的this是通过参数控制的,apply()的第一个参数就指定了this的值。在C++,J***A,C#中不存在这种特性。
例五:
(1)源码
(2)执行结果
(3)分析与结论
此处的f()函数是作为对象a的成员函数来执行的,所以f函数体内的this指向对象a;而其中嵌套的匿名函数没有显示指定其所属对象,则自动属于window对象,其执行是作为window的成员函数来执行,故其函数体内的this指向window。
总结:
(1)JavaScript中,执行代码必须放入函数中,如果没有显示写入函数中,则代码会自动被放入window的某个成员函数中;
(2)JavaScript的函数都是成员函数,一定属于某个对象,如果没有显示指定此对象,那么这个函数就属于window对象;
(3)JavaScript函数的执行方式有三种,一是作为成员函数来调用,此时函数体内的this指向函数所属对象;二是作为构造函数来调用,此时函数体内的this指向通过此构造函数新创建的对象;三是通过apply或call调用,此时函数体内的this是被参数控制的。
(4)this的指向与定义函数的语法与位置无关,只与函数被调用的方式有关。
例子一:
(1)源码
<!DOCTYPE html> <html> <body> <script> alert(this); </script> </body> </html>
(2)执行结果
(3)分析与结论
此时,JS引擎会自动生成一个window对象的成员函数,把上述执行代码放入此函数执行,此时this指向对象window。此时与C++,J***A,C#的实例成员函数类似。
例子二:
(1)源码
<!DOCTYPE html> <html> <body> <script> function f() { alert(this); } f(); </script> </body> </html>
(2)执行结果
(3)分析与结论
此例本质上与例子一相同,其中f();其实等价于window.f();也是通过window对象去调用成员函数,此时this仍指向window对象。此时与C++,J***A,C#的实例成员函数类似。
例子三:
(1)源码
<!DOCTYPE html> <html> <body> <script> function f(name) { this.name = name; } var a = new f('叶诗文'); alert(a.name); </script> </body> </html>
(2)执行结果
(3)分析与结论
此时,f()被当做构造函数来执行,函数体内的this此时指向被新构造出来的对象a。此时,与C++,J***A,C#的构造函数类似。
例四:
(1)源码
<!DOCTYPE html> <html> <body> <script> function f() { alert(this.name); } f.apply({name: '叶诗文'}); </script> </body> </html>
(2)执行结果
(3)分析与结论
通过apply方式调用时,函数内的this是通过参数控制的,apply()的第一个参数就指定了this的值。在C++,J***A,C#中不存在这种特性。
例五:
(1)源码
<!DOCTYPE html> <html> <body> <script> var name = '刘翔'; var a = {name: '叶诗文'}; a.f = function() { alert(this.name); (function(){ alert(this.name); })(); } a.f(); </script> </body> </html>
(2)执行结果
(3)分析与结论
此处的f()函数是作为对象a的成员函数来执行的,所以f函数体内的this指向对象a;而其中嵌套的匿名函数没有显示指定其所属对象,则自动属于window对象,其执行是作为window的成员函数来执行,故其函数体内的this指向window。
总结:
(1)JavaScript中,执行代码必须放入函数中,如果没有显示写入函数中,则代码会自动被放入window的某个成员函数中;
(2)JavaScript的函数都是成员函数,一定属于某个对象,如果没有显示指定此对象,那么这个函数就属于window对象;
(3)JavaScript函数的执行方式有三种,一是作为成员函数来调用,此时函数体内的this指向函数所属对象;二是作为构造函数来调用,此时函数体内的this指向通过此构造函数新创建的对象;三是通过apply或call调用,此时函数体内的this是被参数控制的。
(4)this的指向与定义函数的语法与位置无关,只与函数被调用的方式有关。
相关文章推荐
- JavaScript中的this到底是什么?
- 深入理解JavaScript的this指向问题
- javascript 基础 onclick(this)用法介绍
- javascript中var that=this
- 测试的一段小代码,关于javascript this 的一些理解
- 彻底搞清javascript中this, constructor, prototype
- JavaScript This 的六道坎
- Javascript:this用法整理
- javascript的一道this综合题目
- Javascript的this用法
- JavaScript中的this,call,apply使用及区别详解
- Effective JavaScript Item 25 使用bind方法来得到一个固定了this指向的方法
- 四个小demo来了解Javascript中的this指向
- Javascript的this用法
- javascript中this指向问题的综合
- javascript中的this,constructor ,prototype
- JavaScript中的this
- Javascript中this的工作原理
- 6.JavaScript深入之从ECMAScript规范解读this
- Javascript的this用法