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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
使用js 设置url参数
Jul 08 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
js实现简单数字变动效果
Nov 06 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
html5调用摄像头截图功能
Jan 18 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笔记 字符串处理
2010/10/19 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
js 操作css实现代码
2009/06/11 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python numpy库np.percentile用法说明
2020/06/08 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
4s店销售经理岗位职责
2014/07/19 职场文书
上课不认真检讨书
2014/09/17 职场文书
公司授权委托书范文
2014/09/21 职场文书
综合管理员岗位职责
2015/02/11 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
python基于turtle绘制几何图形
2021/06/15 Python