JS类定义原型方法的两种实现的区别评论很多

所属分类: 网络编程 / JavaScript 阅读数: 547
收藏 0 赞 0 分享
我们知道,给JavaScript类添加原形(prototype)方法是很简单的。而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗? 
    JScript Class: 
复制代码 代码如下:

 function JSClass() 
 {       
 } 

    Extends prototype method: 
复制代码 代码如下:

 JSClass.prototype.MethodA = function() 
 { 

 }; 

    Or 
 
复制代码 代码如下:

function = JSClass.prototype.MethodA() 
 { 

 };

# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
我先来说一个简单的区别:这两个方法导入的原型方法,第一个是一个匿名方法;第二个方法有方法名"JSClass.prototype.MethodA"。 
2005-03-01 10:52 | birdshome 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
<BODY> 
<script> 
function JSClass() 



function = JSClass.prototype.MethodA() 


}; 
</script> 
</BODY> 

提示出错乜。 
2005-03-01 13:51 | 阮 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
faint,我发现FreeTextBox修改少量数据(一两个字符)提交有时会没有效果:( 
我那个是手误多写了个"=",可是我记得我修改过了的。 
2005-03-01 14:00 | birdshome 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
     其实这两个原形定义方式可以简化一下来讨论,先把它们看作是两个函数,如下:
  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()),完全是因为它指向的是一个函数对象的实例而已。

2005-03-03 22:17 | birdshome 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
     再来看原形方法导入里的两种方式,就很简单了。并且不同的执行优先循序,也决了它们在使用中的不同,看如下示例:
<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();

     是什么效果?为什么? 


2005-03-03 22:21 | birdshome 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
最后结果居然是nc.Method1()没有定义,nc.Method2()运行正常。
其实不奇怪了,InnerClass.prototype.Method1 = function()依赖于赋值语句的执行,而 function InnerClass.prototype.Method2() 以最高优先级被脚本引擎初始化。 
2005-03-05 02:43 | birdshome 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
我在Antechinus JavaScript Editor测试你的代码在: 

function InnerClass.prototype.Method2()报错, 

SyntaxError:missing( before formal parameters See: .prototype.Method2( 
2005-05-10 17:11 | Error 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
@Error 
用IE来试过吗? 
2005-05-10 17:30 | birdshome 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
我用FF也是一样的报错: missing( before formal parameters See: .prototype.Method2( 
2006-08-19 22:40 | jzz 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
return new InnerClass(); 把这行移到 
function InnerClass.prototype.Method2() 

alert(this.m_Property2); 
}; 
后面ie执行正常.FF报错: missing( before formal parameters See: .prototype.Method2( 
ie是安顺序执行下来的,而NS系列不是! 
FF在执行到function InnerClass.prototype.Method2() 这个的时候它根本不知道有这个InnerClass类,自然就不能无缘无故的来个prototype.xxx的东东 
2006-11-13 00:57 | Doutu 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
@Doutu 
把return new InnerClass();放到function InnerClass.prototype.Method2()这个方法之后,就完全违背了我编写这个示例的初衷。这个示例恰好说明了,IE对function foo()这种函数定义格式有较高的解析优先级,而foo = function()只是一个普通的赋值语句。至于ff中的情况我没有研究过,既然你说ff找不到return后的InnerClass,那么就说明是顺序的解析function foo()这种还属定义格式的。 
2006-11-13 01:29 | birdshome 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
唉。可怜的只会用ie的人呀。 function x.y.z() {} 的写法根本就是不标准的写法,只有ie支持,其他js引擎中如ff或opera都会报错。符合标准的写法只有 x.y.z = function () {};

当然,就语法层面来说,我挺喜欢这种写法的,希望以后的标准能采纳这种写法。 
2006-11-28 11:04 | hax 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
呵呵 hax说得对啊。 只有ie才会像妈妈一样包容孩子的各种错误 

标准的写法只有 x.y.z = function () {}; 

其实,ie还支持更诡异的写法。 

看看这个 
function window::onload(){ 
alert("go_rush") 

2006-11-28 14:39 | Go_Rush 
# re: JS类定义原型方法的两种实现的区别  回复  更多评论    
@hax 
标准再好,也是为人服务的,争论这个是学院派和工程派之间的事情,我们实现好我们自己系统就可以了,何必过分在神仙打架。 
// 你的评论其实挺好的。Sigh,只可惜因为IE,我好可怜啊~~~ 
更多精彩内容其他人还在看

纯javascript判断查询日期是否为有效日期

很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多