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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
Js sort排序使用方法
Oct 17 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery事件详解
Feb 23 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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中一个控制字符串输出的函数
2006/10/09 PHP
php在线打包程序源码
2008/07/27 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php自定义分页类完整实例
2015/12/25 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
js jquery数组介绍
2012/07/15 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
Seajs的学习笔记
2014/03/04 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
原生js实现日历效果
2020/03/02 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Python中使用PDB库调试程序
2015/04/05 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
源码安装apache脚本部署过程详解
2022/09/23 Servers