JavaScript prototype对象的属性说明


Posted in Javascript onMarch 13, 2010

一、什么是JavaScript中对象的prototype属性

JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会”继承”赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢?
对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。

在JavaScript中,prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象(Function),函数对象都有一个子对象prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。

1、该对象被类所引用,只有函数对象才可引用;

2、在new实例化后,其成员被实例化,实例对象方可调用。

同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。
JavaScript通过一种链接机制来支持继承,而不是通过完全面向对象语言(如Java)所支持的基于类的继承模型。每个JavaScript对象都有一个内置的属性,名为prototype。prototype属性保存着对另一个JavaScript对象的引用,这个对象作为当前对象的父对象。 
 

 当通过点记法引用对象的一个函数或属性时,倘若对象上没有这个函数或属性,此时就会使用对象的prototype属性。当出现这种情况时,将检查对象prototype属性所引用的对象,查看是否有所请求的属性或函数。如果prototype属性引用的对象也没有所需的函数或属性,则会进一步检查这个对象(prototype属性引用的对象)的prototype属性,依次沿着链向上查找,直到找到所请求的函数或属性,或者到达链尾,如果已经到达链尾还没有找到,则返回undefined。从这个意义上讲,这种继承结构更应是一种“has a”关系,而不是“is a”关系
神啊,我什么也看懂,怎么办?看似搞得我很牛,说实话我也看不懂!^_^ ^_^ ^_^
二、prototype属性应用实例
 我们所常见的类包括:数组变量(Array)、逻辑变量(Boolean)、日期变量(Date)、结构变量(Function)、数值变量(Number)、对象变量(Object)、字符串变量(String) 等,而相关的类的方法,也是程序员经常用到的(在这里要区分一下类的注意和属性发方法),例如数组的push方法、日期的get系列方法、字符串的split方法等等,

但是在实际的编程过程中不知道有没有感觉到现有方法的不足?prototype 方法应运而生!下面,将通过实例由浅入深讲解 prototype 的具体使用方法:
 先看一个很傻的例子:

JavaScript代码
function func(){   
    func.prototype.name = “prototype of func”;   
}   
var f = new func();          
alert(f.name);  //prototype of func
 先创建一个func对象,设置func对象的name属性,实例化f;

1.几个简单的例子:
(1)数字相加:
JavaScript代码
Number.prototype.add=function(num){   
    return (this+num);//这里的this指向Number   
};   
alert((3).add(15));//18  
(2) Boolean.rev(): 作用,布尔变量取反
实现方法:Boolean.prototype.rev = function(){return(!this);}
试验:alert((true).rev()) -> 显示 false
2、已有方法的实现和增强,初识 prototype:
(1) Array.push(new_element)

作用:在数组末尾加入一个新的元素

实现方法:

Array.prototype.push = function(new_element){
        this[this.length]=new_element;
        return this.length;
    }

让我们进一步来增强他,让他可以一次增加多个元素!

实现方法:

Array.prototype.pushPro = function() {
        var currentLength = this.length;
        for (var i = 0; i < arguments.length; i++) {
            this[currentLength + i] = arguments[i];
        }
        return this.length;
    }

应该不难看懂吧?以此类推,你可以考虑一下如何通过增强 Array.pop 来实现删除任意位置,任意多个元素(具体代码就不再细说了)

3、新功能的实现,深入 prototype:在实际编程中所用到的肯定不只是已有方法的增强,更多的实行的功能的要求,下面我就举两个用 prototype 解决实际问题的例子:
(1) String.left()

问题:用过 vb 的应该都知道left函数,从字符串左边取 n 个字符,但是不足是将全角、半角均视为是一个字符,造成在中英文混排的版面中不能截取等长的字符串

作用:从字符串左边截取 n 个字符,并支持全角半角字符的区分

实现方法:

String.prototype.left = function(num,mode){
        if(!/\d+/.test(num))return(this);
        var str = this.substr(0,num);
        if(!mode) return str;
        var n = str.Tlength() ? str.length;
        num = num ? parseInt(n/2);
        return this.substr(0,num);
    }

试验:alert(“aa啦啦aa”.left(4)) -> 显示 aa啦啦
     alert(“aa啦啦aa”.left(4,true)) -> 显示 aa啦

本方法用到了上面所提到的String.Tlength()方法,自定义方法之间也能组合出一些不错的新方法呀!
(2) Date.DayDiff()

作用:计算出两个日期型变量的间隔时间(年、月、日、周)

实现方法:

Date.prototype.DayDiff = function(cDate,mode){
        try{
            cDate.getYear();
        }catch(e){
            return(0);
        }
        var base =60*60*24*1000;
        var result = Math.abs(this ? cDate);
        switch(mode){
            case “y”:
                result/=base*365;
                break;
            case “m”:
                result/=base*365/12;
                break;
            case “w”:
                result/=base*7;
                break;
            default:
                result/=base;
                break;
        }
        return(Math.floor(result));
    }

试验:alert((new Date()).DayDiff((new Date(2002,0,1)))) -> 显示 329
     alert((new Date()).DayDiff((new Date(2002,0,1)),”m”)) -> 显示 10

当然,也可以进一步扩充,得出响应的小时、分钟,甚至是秒。
(3) Number.fact()

作用:某一数字的阶乘

实现方法:

Number.prototype.fact=function(){
        var num = Math.floor(this);
        if(num<0)return NaN;
        if(num==0 || num==1)
            return 1;
        else
            return (num*(num-1).fact());
    }

试验:alert((4).fact()) -> 显示 24

这个方法主要是说明了递归的方法在 prototype 方法中也是可行的!
 实例:
取数组的最大值:
JavaScript代码
var oArr=new Array();   
oArr=[100,190,199,189,3000,400,4001];   
Array.prototype.MAX=function(){   
    var i,max=this[0];   
    for(i=1;i<this.length;i++){   
        if(max<this[i]){   
            max=this[i];   
        }   
    }   
    return max;   
}   
alert(oArr.MAX());  
 实例为用户自定义类添加方法:
JavaScript代码
function TestObject()   
 {   
     this.m_Name = “ffffffffff”;   
 }   

 TestObject.prototype.ShowName = function()   
 {   
     alert(this.m_Name);   
 };   
var f=new TestObject();   
f.ShowName();  
更新自定义类的prototype:

JavaScript代码
function TestObjectA()   
{   
   this.MethodA = function()   
   {   
      alert(‘TestObjectA.MethodA()');   
   }   
}   

function TestObjectB()   
{   
   this.MethodB = function()   
   {   
      alert(‘TestObjectB.MethodB()');   
   }   
}   

TestObjectB.prototype = new TestObjectA();  
听说这是错说中的继承;哦以后慢慢学。
再看一个例子,估计你我都已经疯掉了:

JavaScript代码
function RP()   
{   
    RP.PropertyA = 1;   
    RP.MethodA = function()   
    {   
         alert(“RP.MethodA ”);   
    };   

    this.PropertyA = 100;    
    this.MethodA = function()   
    {   
         alert(“this.MethodA”);   
    };   
}   

RP.prototype.PropertyA = 10;    
RP.prototype.MethodA = function()   
{   
    alert(“RP.prototype.MethodA”);   
};   
//以下执行   
rp = new RP();   
alert(RP.PropertyA);//警告结果为:1   
RP.MethodA();//警告结果为:RP.MethodA   
alert(rp.PropertyA);//警告结果为:100   
rp.MethodA();//警告结果为:this.MethodA   
delete RP.PropertyA;   
alert(RP.PropertyA);//警告结果为:undefined   

delete rp.PropertyA;   
alert(rp.PropertyA);//警告结果为:100   
delete rp.MethodA;   
rp.MethodA();//警告结果为:RP.prototype.MethodA  
 再看一个带有参数的,计算圆的面积:

JavaScript代码
        <script type=“text/javascript”>   
function Circle(x,y,r){       
  this.x = x;       
  this.y = y;       
  this.r = r;       
  //this.prototype = null ;     /*这句代码可以看作是隐含存在的,因为javascript 中“类”的定义和函数的定义结构上没有差异,所以可以说,所有函数都隐藏有这样一个属性。*/       
}   
Circle.prototype.area=function(){   
    return this.r*this.r*3.1415926;   
}   
var Circ=new Circle(0,0,5);   
alert(parseInt(Circ.area()));   
        </script>  

Javascript 相关文章推荐
htm调用JS代码
Mar 15 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
JS模板实现方法
Apr 03 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 #Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 #Javascript
javascript offsetX与layerX区别
Mar 12 #Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 #Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 #Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 #Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 #Javascript
You might like
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
JS变量及其作用域
2017/03/29 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
bpython 功能强大的Python shell
2016/02/16 Python
理论讲解python多进程并发编程
2018/02/09 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
经济管理毕业生求职信
2014/03/15 职场文书
法制宣传日活动总结
2014/04/29 职场文书
公证委托书标准格式
2014/09/11 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
法人委托书范本
2014/09/15 职场文书
2014年司法局工作总结
2014/12/11 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
Hive HQL支持2种查询语句风格
2022/06/25 数据库