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在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
React中获取数据的3种方法及优缺点
Feb 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版
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
jquery的each方法使用示例分享
2014/03/25 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python中的exec、eval使用实例
2014/09/23 Python
python调用百度语音REST API
2018/08/30 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python实现超市商品销售管理系统
2019/11/22 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
《鸿门宴》教学反思
2014/04/22 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
会计主管竞聘书
2015/09/15 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python