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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 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实现下载文件的两种方法
2013/07/05 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python绘制七段数码管实例代码
2017/12/20 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
对于Python深浅拷贝的理解
2019/07/29 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
修理厂厂长岗位职责
2014/01/30 职场文书
高中打架检讨书
2014/02/13 职场文书
护士个人自我鉴定
2014/03/24 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
服务理念口号
2014/06/11 职场文书
务虚会发言材料
2014/12/25 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
PHP中->和=>的意思
2021/03/31 PHP
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL