javascript原型模式用法實(shí)例詳解

更新時(shí)間：2015年06月04日 11:03:08 作者：MaxOmnis

這篇文章主要介紹了javascript原型模式用法,以實(shí)例形式較為詳細(xì)的分析了javascript原型模式的原理與使用技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript原型模式用法。分享給大家供大家參考。具體分析如下：

一般在了解了工廠模式和構(gòu)造函數(shù)模式的弊端之后,就知道為什么需要原型模式了

原型模式i的定義:每個(gè)函數(shù)都有一個(gè)prototype(原型)屬性，這個(gè)屬性是一個(gè)對(duì)象，它的用途是包含可以由特定類(lèi)型的所有實(shí)例共享的屬性和方法。比如在構(gòu)造函數(shù)模型中sayInformation()方法，如果聲明兩個(gè)實(shí)例就要構(gòu)造兩次sayInformation方法，但是聲明兩次是沒(méi)有必要的，這就是為什么有原型模式的出現(xiàn)(尼瑪，網(wǎng)上那些博客上面都是扯談的東西，還是看書(shū)講的容易理解),sayInformation()聲明為原型模式之后，實(shí)例就共享了,就沒(méi)有必要聲明兩次了

function Person(){}
Person.prototype.name="jack";
Person.prototype.age=10;
Person.prototype.sayInformation=function()
{
  console.log("my name is"+this.name+" age is"+this.age);
}
var person1 = new Person();
person1.sayInformation();
console.info(person1.name);
//來(lái)自原型的屬性name
person1.name="Greg";
//修改實(shí)例的name屬性
console.info(person1.name);
//來(lái)自實(shí)例的屬性name
delete person1.name ;
//來(lái)自實(shí)例的屬性,這里刪除的是實(shí)例的屬性，但是原型的屬性依然存在
console.info(person1.name);
//來(lái)自原型的屬性name
var person2 = new Person();
person2.sayInformation();
console.info(person1.hasOwnProperty("name"));
//hasOwnProperty檢查屬性是屬于實(shí)例還是原型中,如果是實(shí)例中就返回true
console.info(person1.name==person2.name);
console.info(person1.sayInformation==person2.sayInformation);
console.info(person1.constructor);
//指向person1的構(gòu)造函數(shù)
//原型更加簡(jiǎn)便的寫(xiě)法
function Person2(){}
Person2.prototype={
  name:"jack",
  age:29,
  sayInformationfunction:function()
    {
      console.log("my name is"+this.name+" age is"+this.age);
    }
}

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript數(shù)組去重3種方法的性能測(cè)試與比較
面試題中有一題數(shù)組去重，首先想到的是對(duì)象存鍵值的方法可是遇到不同類(lèi)型又能轉(zhuǎn)換成同樣的字符串的就完了接下來(lái)為大家介紹下雙重循環(huán)/存鍵值和類(lèi)型實(shí)現(xiàn)去重，感興趣的各位可以參考下哈
2013-03-03
使用JS解析excel文件的完整實(shí)現(xiàn)步驟
解析excel文件是我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于使用JS解析excel文件的完整實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
webpack4.0+vue2.0利用批處理生成前端單頁(yè)或多頁(yè)應(yīng)用的方法
這篇文章主要介紹了webpack4.0+vue2.0利用批處理生成前端單頁(yè)或多頁(yè)應(yīng)用的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
GoJs基本使用示例詳解
這篇文章主要為大家介紹了GoJs基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
全面解析Bootstrap圖片輪播效果
這篇文章主要介紹了全面解析Bootstrap圖片輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-12-12
通過(guò)JS自動(dòng)隱藏手機(jī)瀏覽器的地址欄實(shí)現(xiàn)原理與代碼
大家通過(guò)手機(jī)自帶瀏覽器打開(kāi)百度、淘寶，在首頁(yè)加載完畢后，會(huì)自動(dòng)隱藏頁(yè)面上方的地址欄,感興趣的朋友可以參考下
2013-01-01
JS命名空間的另一種實(shí)現(xiàn)
這篇文章介紹了js命名空間的另一種簡(jiǎn)單實(shí)現(xiàn)方法，有需要的朋友可以參考一下
2013-08-08
event.srcElement+表格應(yīng)用
event.srcElement+表格應(yīng)用...
2006-08-08
簡(jiǎn)介alert()與console.log()的不同
alert（）和console.log()在程序中經(jīng)常會(huì)用到，大家知道他們的區(qū)別嗎，接下來(lái)，通過(guò)本文給大家介紹alert()與console.log()的不同，需要的朋友可以參考下
2015-08-08
JavaScript里實(shí)用的原生API匯總
這段時(shí)間翻了一番JavaScript的api，發(fā)現(xiàn)不少好的輪子，省去造的麻煩了。下面給大家匯總一下，有需要的小伙伴可以參考下。
2015-05-05