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 相关文章推荐
javascript+mapbar实现地图定位
Apr 09 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
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
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
python3+PyQt5实现柱状图
2018/04/24 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python变量类型知识点总结
2019/02/18 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python字典dict常用方法函数实例
2020/11/09 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
客户代表自我评价范例
2013/09/24 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
西游记读书笔记
2015/06/25 职场文书
2016年元旦主持词
2015/07/06 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技