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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
javascript 常见功能汇总
Jun 11 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
Vue动态组件与异步组件实例详解
Feb 23 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/07/03 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
什么是python的id函数
2020/06/11 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
python实现图片素描效果
2020/09/26 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
什么是lambda函数
2013/09/17 面试题
英文版餐饮运营管理求职信
2013/11/06 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
出国考察邀请函
2014/01/21 职场文书
致全体运动员广播稿
2014/02/01 职场文书
学校招生宣传广告词
2014/03/19 职场文书
作风建设剖析材料
2014/10/06 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Pandas自定义选项option设置
2021/07/25 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python