JScript中的"this"关键字使用方式补充材料


Posted in Javascript onMarch 08, 2007

在"JavaScript中this关键字使用方法详解"一文中,我曾例举了在JavaScript和JScript中的8种this关键字的方式。这不又发现还有两种this关键字的使用方式当时没有说到,现补充说明一下。并且通过第一种this关键字使用的说明,能让我们更好的理解JavaScript作为Object-Based语言的本质。

    一种是和JavaScript类中的定义有关,我们知道当我们定义如下类的时候:  

function JSClass()
{
}

JSClass.prototype.m_Properties = 100;

JSClass.prototype.ToString = function()
{
    alert(this.m_Properties);
}

    方法ToString中的this.m_Properties就是100,那么下面这种定义呢? 

function JSClass()
{
}

JSClass.m_Properties = -100;

JSClass.ToString()
{
    alert(this.m_Properties);
}

    这时ToString中的这个this.m_Properties是啥?是-100。一定吗?这个不一定了,这得看我们怎么调用这个ToString方法。 

JSClass.ToString();
var fun = JSClass.ToString();
fun();
    这时的运行结果居然是:-100和undefined。真是郁闷哈,怎么才能运行fun得到-100呢?需要这样来为fun赋值:

var fun = function() { JSClass.ToString(); }
fun();
    呵呵,这样就是-100了。好像挺废话的,最终不还是调用的JSClass.ToString()吗?这个我们后面再说,看看把这两个JSClass合在一起是什么情况呢? 

function JSClass()
{
}

JSClass.m_Properties = -100;
JSClass.prototype.m_Properties = 100;

JSClass.ToString = function()
{
    alert(this.m_Properties);
}

JSClass.prototype.ToString = function()
{
    alert(this.m_Properties);
}

    这两个ToString()方法,和里面的this关键字它们是什么关系呢?看下面的示例: 

var jsclass = new JSClass();
jsclass.ToString();
JSClass.ToString();
    结果为:100和-100。这里的jsclass实际上是JavaScript的语言机制,通过new关键字的说明来创建的一个新的实例。而JSClass是什么呢?他们本就是对象实例,只是长得像个函数,也像一个类的说明。对于this的问题,第一个jsclass.ToString()方法里的this是指新创建实例,而JSClass.ToString()方法里的this是值得JSClass这个对象实例。

    理解了这两个this所指代的东西的不同本质,也就能更好的明白,为什么JavaScript叫做Object-Based的语言,而更加清楚它和Object-Oriented语言的本质区别。

    回头再说一下补充第二中this的使用方法,就是在使用eval方法的时候,这个时候的this是什么呢?看看:

alert(this === eval("this"));
    的结果是什么?是true!这是因为eval内代码被执行的作用域就是当前页面本身的说。

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
js数组的操作详解
Mar 27 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
function, new function, new Function之间的区别
Mar 08 #Javascript
JavaScript中this关键字使用方法详解
Mar 08 #Javascript
区分JS中的undefined,null,"",0和false
Mar 08 #Javascript
在JavaScript中使用inline函数的问题
Mar 08 #Javascript
JS类中定义原型方法的两种实现的区别
Mar 08 #Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 #Javascript
从JavaScript的函数重名看其初始化方式
Mar 08 #Javascript
You might like
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
python 合并文件的具体实例
2013/08/08 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
vue常用指令代码实例总结
2020/03/16 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
2019年c语言经典面试题目
2016/08/17 面试题
应届生会计电算化求职信
2013/10/03 职场文书
学生打架检讨书
2014/02/14 职场文书
企业文化标语口号
2014/06/09 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
初中学习计划书范文
2014/09/15 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
Java 定时任务技术趋势简介
2022/05/04 Java/Android