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的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
jquery css实现流程进度条
Mar 26 jQuery
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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随机数生成代码与使用实例分析
2011/04/08 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php使用PDO方法详解
2014/12/27 PHP
WordPress网站性能优化指南
2015/11/18 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
"火柴棍式"程序员面试题
2014/03/16 面试题
竞争上岗演讲稿范文
2014/05/12 职场文书
商业项目策划方案
2014/06/05 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
财务年终工作总结大全
2019/06/20 职场文书
深入理解python多线程编程
2021/04/18 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript