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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
JS动态图片的实现方法完整示例
Jan 13 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版
2006/10/09 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
根据json字符串生成Html的一种方式
2013/01/09 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JS求平均值的小例子
2013/11/29 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
原生js调用json方法总结
2018/02/22 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python新手实现2048小游戏
2015/03/31 Python
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
计算机求职信
2013/12/01 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
超市周年庆活动方案
2014/08/16 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
毕业典礼邀请函
2015/01/31 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android