JS类中定义原型方法的两种实现的区别


Posted in Javascript onMarch 08, 2007

我们知道,给JavaScript类添加原形(prototype)方法是很简单的。而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗?

    JScript Class:
 function JSClass()
 {

 }
    Extends prototype method:
 JSClass.prototype.MethodA = function()
 {

 };
    Or

 function = JSClass.prototype.MethodA()
 {

 };
其实这两个原形定义方式可以简化一下来讨论,先把它们看作是两个函数,如下: 
  Foo1(); 

  function Foo1() 
  { 
      alert(’This is Foo1.’); 
  }
     和   Foo2(); 
  var Foo2 = function() 
  { 
      alert(’This is Foo2.’); 
  }

     运行第一个显然是不会有任何错误的,可是运行第二个就有问题了,这时系统会说:Microsoft JScript runtime error: Object expected。这就是说函数定义(Foo1)在脚本解析器中有最高的初始化优先级,这个很好理解。如果不优先处理函数,那么对于函数中的函数调用就没有办法处理了,假使我们先定fn1()再定义fn2(),却从fn1中调fn2,那么就通不过解析了。为什么Foo2不能被初始化,Foo2的定义根本不是函数定义,它是一个标准的赋值语句,之所以能象标准函数一样的使用Foo2(Foo2()),完全是因为它指向的是一个函数对象的实例而已。
再来看原形方法导入里的两种方式,就很简单了。并且不同的执行优先循序,也决了它们在使用中的不同,看如下示例: 
<script language="javascript">
function NormalClass() 

    this.m_Property1 = ’P1 in Normal Class.’; 
    this.m_Property2 = ’P2 in Normal Class.’; 

    this.toString = function() 
    { 
         return ’[class NormalClass]’; 
    }

    return new InnerClass();   

    function InnerClass() 
    { 
         this.m_Property1 = ’P1 in Inner Class.’;  
         this.m_Property2 = ’P2 in Inner Class.’;  

         this.toString = function() 
         { 
              return ’[class InnerClass]’; 
         }     
    }

    InnerClass.prototype.Method1 = function() 
    { 
         alert(this.m_Property1); 
    }; 

    function InnerClass.prototype.Method2() 
    { 
         alert(this.m_Property2); 
    };   
}
</script>

     执行: 
var nc = new NormalClass(); 
nc.Method1(); 
nc.Method2();

     是什么效果?为什么? 

Javascript 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
jQuery 联动日历实现代码
May 31 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 #Javascript
从JavaScript的函数重名看其初始化方式
Mar 08 #Javascript
翻译整理的jQuery使用查询手册
Mar 07 #Javascript
用window.location.href实现刷新另个框架页面
Mar 07 #Javascript
javascript中的location用法简单介绍
Mar 07 #Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 #Javascript
动态控制Table的js代码
Mar 07 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
js 操作符汇总
2014/11/08 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
Python正则表达式经典入门教程
2017/05/22 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
新员工培训个人的自我评价
2013/10/09 职场文书
二年级语文教学反思
2014/02/02 职场文书
优秀护士获奖感言
2014/02/20 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书