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 相关文章推荐
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 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+mysql留言本源码
2009/11/11 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
jquery编写日期选择器
2017/03/16 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python3简单实现微信爬虫
2015/04/09 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python3监控疫情的完整代码
2020/02/20 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
pandas map(),apply(),applymap()区别解析
2021/02/24 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
如何写一份好的自荐信
2014/01/02 职场文书
爱情保证书大全
2014/04/29 职场文书
家长会标语
2014/06/24 职场文书
圣诞节开幕词
2015/01/29 职场文书
优秀团员自我评价
2015/03/10 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
入党申请书怎么写?
2019/06/11 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
java如何实现socket连接方法封装
2021/09/25 Java/Android