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 有用的脚本函数
May 07 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
Angular实现响应式表单
Aug 04 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
基于JavaScript实现控制下拉列表
May 08 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
破解Session cookie的方法
2006/07/28 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python端口扫描简单程序
2016/11/10 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
店长助理岗位职责
2013/12/13 职场文书
出国考察邀请函
2014/01/21 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
学生病假条范文
2015/08/17 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL
Moment的feature导致线上bug解决分析
2022/09/23 Javascript