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 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
js实现筛选功能
Nov 24 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 多关键字 高亮显示实现代码
2012/04/23 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
BootStrap selectpicker
2016/06/20 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python定时器实例代码
2017/11/01 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
用Eclipse写python程序
2018/02/10 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python给图像添加噪声具体操作
2019/03/03 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
给儿子的表扬信
2014/01/15 职场文书
房产委托公证书
2014/04/08 职场文书
活动总结报告范文
2014/05/04 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js