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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
AngularJS表单验证功能
Oct 19 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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
我的论坛源代码(四)
2006/10/09 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
newxtree.js代码
2007/03/13 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
vue router demo详解
2017/10/13 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue h5移动端禁止缩放代码
2019/10/28 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python进行特征提取的示例代码
2020/10/15 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
抵押贷款承诺书
2014/05/30 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js