搜尋
首頁web前端js教程JavaScript prototype对象的属性说明_javascript技巧

一、什么是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             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        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        if(max            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代码
          

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版