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 相关文章推荐
jQuery实现动画效果的实例代码
May 07 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
深入理解PHP中的count函数
2016/05/31 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python File(文件) 方法整理
2019/02/18 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Python同时处理多个异常的方法
2020/07/28 Python
Python 忽略文件名编码的方法
2020/08/01 Python
开工仪式策划方案
2014/05/23 职场文书
分公司任命书
2014/06/06 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Vue如何清空对象
2022/03/03 Vue.js
Linux磁盘管理方法介绍
2022/06/01 Servers