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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
Javascript 面向对象 继承
May 13 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
javascript基础知识讲解
Jan 11 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 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仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
js中有关IE版本检测
2012/01/04 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
vue实现登录功能
2020/12/31 Vue.js
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
不可错过的十本Python好书
2017/07/06 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python super的使用方法及实例详解
2019/09/25 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
一些Solaris面试题
2013/03/22 面试题
销售类个人求职信范文
2013/09/25 职场文书
打造完美自荐信
2014/01/24 职场文书
企业员工培训感言
2014/02/26 职场文书
具结保证书
2015/01/17 职场文书
离职信范文
2015/06/23 职场文书
2015年度女工工作总结
2015/10/22 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript