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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 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
提高PHP编程效率的方法
2013/11/07 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python如何实现int函数的方法示例
2018/02/19 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python读取实时数据流示例
2019/12/02 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
python 多线程中join()的作用
2020/10/29 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
普师专业个人自荐信范文
2013/11/26 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
晨会主持词
2014/03/17 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
期末复习计划
2015/01/19 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
画展观后感
2015/06/17 职场文书
小学生安全教育心得体会
2016/01/15 职场文书