JS类中定义原型方法的两种实现的区别

 更新时间:2007年03月08日 00:00:00   作者:  
我们知道,给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接口实现方法实例分析

    这篇文章主要介绍了JavaScript接口实现方法,结合实例形式详细分析了JavaScript接口实现原理、操作步骤与相关注意事项,需要的朋友可以参考下
    2020-05-05
  • js实现俄罗斯方块小游戏分享

    js实现俄罗斯方块小游戏分享

    这篇文章主要介绍了js实现俄罗斯方块小游戏分享,,需要的朋友可以参考下
    2014-01-01
  • javascript禁止访客复制网页内容的实现代码

    javascript禁止访客复制网页内容的实现代码

    这篇文章主要介绍了javascript禁止访客复制网页内容的方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js中如何向数组中添加元素unshift()方法

    js中如何向数组中添加元素unshift()方法

    这篇文章主要介绍了js中如何向数组中添加元素unshift()方法,具有很好的参考价值,希望对大家有所帮助,
    2023-12-12
  • webpack项目使用eslint建立代码规范实现

    webpack项目使用eslint建立代码规范实现

    这篇文章主要介绍了webpack项目使用eslint建立代码规范实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Underscore.js 的模板功能介绍与应用

    Underscore.js 的模板功能介绍与应用

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下
    2012-12-12
  • 80行代码写一个Webpack插件并发布到npm

    80行代码写一个Webpack插件并发布到npm

    最近在学习 Webpack 相关的原理,本文用80行代码写一个Webpack插件并发布到npm,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Javascript 颜色渐变效果的实现代码

    Javascript 颜色渐变效果的实现代码

    在搭建博主博客的时候,寻思着做一些效果,看到菜单,就想是不是可以做一下颜色的渐变,增加一点动态的感觉。有个jquery的插件,效果相当不错,不过博主还是打算自立更生写一下,看看能不能实现
    2013-10-10
  • 分享JS数组求和与求最大值的方法

    分享JS数组求和与求最大值的方法

    数组求和在项目需求中还是挺常见的,比如购物车金额统计、人员的前台统计等等。今天小编先是给大家分享了JS数组求和的两个方法,而后又用实例演示js数组求和,并求出数组中的最大值,一起来看看吧。
    2016-08-08
  • JSON 对象未定义错误的解决方法

    JSON 对象未定义错误的解决方法

    下面小编就为大家带来一篇JSON 对象未定义错误的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09

最新评论