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


Posted in Javascript onSeptember 12, 2007

我们知道,给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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
js类中获取外部函数名的方法与代码
Sep 12 #Javascript
javascript下过滤数组重复值的代码
Sep 10 #Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 #Javascript
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 #Javascript
IE不出现Flash激活框的小发现的js实现方法
Sep 07 #Javascript
用javascript实现画板的代码
Sep 05 #Javascript
js中的escape及unescape函数的php实现代码
Sep 04 #Javascript
You might like
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php 短链接算法收集与分析
2011/12/30 PHP
PHP中设置时区方法小结
2012/06/03 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
python如何实现视频转代码视频
2019/06/17 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
体育活动总结范文
2014/05/04 职场文书
教师工作证明范本
2015/06/12 职场文书
大学生受助感言
2015/08/01 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript