學(xué)習(xí)筆記：對象，原型和繼承（1）

zhangrxiang 發(fā)布于2019-08-19 17:55 / 2000人閱讀

摘要：一創(chuàng)建對象工廠模式構(gòu)造函數(shù)模式和都是的不同實例。寄生構(gòu)造函數(shù)模式不使用和創(chuàng)建要返回的對象可以在這里添加私有變量和函數(shù)添加方法注意，在以這種模式創(chuàng)建的對象中，除了使用方法之外，沒有其他辦法訪問的值

一：創(chuàng)建對象
1 工廠模式

 function createPerson(name, age, jod){
     var obj = new Object();
     obj.name = name;
     obj.age = age;
     obj.job = job;
     obj.sayName = function(){
         console.log(this.name);
     };
     return obj;
 }

 var person1 = createPerson("NEVAR", 23, "Front-end Engineer");
 var person2 = createPerson("Amy", 27, "Doctor");

2 構(gòu)造函數(shù)模式

 function Person(name, age, job){
     this.name = name;
     this.age = age;
     this.job = job;
     this.sayName = function(){
         console.log(this.name);
     }
 }

 var person1 = new Person("NEVAR", 23, "Front-end Engineer");
 var person2 = new Person("Amy", 27, "Doctor");
 //person1和person2都是Person的不同實例。
 alert(person1.constructor == Person); //true
 alert(person2.constructor == Person); //true
 //即是Object的實例也是Person的實例
 alert(person1 instanceof Object); //true
 alert(person1 instanceof Person); //true
 //構(gòu)造函數(shù)產(chǎn)生的是兩個不同實例，同名函數(shù)是不相等的
 alert(person1.sayName == person2.sayName); //false

3 原型模式

 function Person(){
 }

 Person.prototype.name = "NEVAR";
 Person.prototype.age = 23;
 Person.prototype.job = "Front-end Engineer";
 Person.prototype.sayName = function(){
     console.log(this.name);
 };

 var person1 = new Person();
 person1.sayName(); //NEVAR

 var person2 = new Person();
 person2.sayName; //NEVAR

 console.log(person1.sayName == person2.sayName);// true

 var person3 = new Person();
 person3.name = "PP";
 console.log(person3.name); //PP 來自實例

 delete person3.name;
 console.log(person3.name); //NEVAR 來自原型

 alert(person1.hasOwnProperty("name")); //false 來自原型
 alert(person3.hasOwnProperty("name")); //true  來自實例

 alert("name" in person1); //true in操作符的使用

 function hasPrototypeProperty (obj, name){
     return !obj.hasOwnProperty(name) && (name in obj)
 }
 //判斷屬性來自實例 真 然后取反 
 //并且name屬性存在于obj原型鏈上 說明這個 屬性是屬于prototype的

 alert(hasPrototypeProperty(person1,"name")) // true
 alert(hasPrototypeProperty(person3,"name")) // false

 alert(Object.keys(Person.prototype)) //"name,age,job,sayName" 
 //Person的可枚舉屬性

不過以上方法太過于麻煩每次都要寫重復(fù)的prototype

 function Person(){
 }

 Person.prototype = {
     name : "NEVAR",
     age : "23",
     job : "Front-end Engineer",
     sayName : function(){
         console.log(this.name);
     }
 };

constructor 屬性不再指向Person 了指向Object

var friend = new Person();
 alert(friend instanceof Object); //true
 alert(friend instanceof Person); //true
 alert(friend.constructor == Person); //false
 alert(friend.constructor == Object); //true

于是可以這樣

 Person.prototype = {
     constructor : Person,
     name : "NEVAR",
     age : "23",
     job : "Front-end Engineer",
     sayName : function(){
         console.log(this.name);
     }
 };

原型的動態(tài)性

var friend = new Person();

 Person.prototype.sayHi = function(){
     alert("Hi");
 }
friend.sayHi();//Hi
//這時沒有問題，如果我們重寫原型對象 那么情況就不一樣了
function Person(){
}
var friend = new Person();
Person.prototype = {
constructor: Person,
name : "NEVAR",
age : 23,
job : "Front-end Engineer",
sayName : function () {
alert(this.name);
}
};
friend.sayName(); //error

重寫原型對象切斷了現(xiàn)有原型與任何之前已經(jīng)存在的對象實例之間的聯(lián)系；它們引用的仍然是最初的原型。

原型模式也不是沒有缺點。首先，它省略了為構(gòu)造函數(shù)傳遞初始化參數(shù)這一環(huán)節(jié)，結(jié)果所有實例在默認(rèn)情況下都將取得相同的屬性值

對于那些包含基本值的屬性倒也說得過去，畢竟（如前面的例子所示），通過在實例上添加一個同名屬性，可以隱藏原型中的對應(yīng)屬性。然而，對于包含引用類型值的屬性來說，問題就比較突出了

function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

4組合使用構(gòu)造函數(shù)模式和原型模式

 function Person(name, age, job){
     this.name = name;
     this.age = age;
     this.job = job;
     this.friends = ["Shelby","Court"];
 }
 Person.prototype = {
     constructor : Person,
     sayName : function(){
         console.log(this.name);
     }
 }

 var person1 = new Person("NEVAR", 23, "Front-end Engineer");
 var person2 = new Person("Amy", 27, "Doctor");

 person1.friends.push("Van");

 console.log(person1.friends) //"Shelby,Court,Van"
 console.log(person2.friends) //"Shelby,Court"
 console.log(person1.friends === person2.friends); // false
 console.log(person1.sayName === person2.sayName); //true

5動態(tài)原型模式
它把所有信息都封裝在了構(gòu)造函數(shù)中，而通過在構(gòu)造函數(shù)中初始化原型（僅在必要的情況下），又保持了同時使用構(gòu)造函數(shù)和原型的優(yōu)點。換句話說，可以通過檢查某個應(yīng)該存在的方法是否有效，來決定是否需要初始化原型。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName != function){
        Person.prototype.sayName = function(){
            console.log(this.name);
        }
    }
}

 var person1 = new Person("NEVAR", 23, "Front-end Engineer");
 friend.sayName();

6寄生構(gòu)造函數(shù)模式

//不使用this和new
function Person(name, age, job){
    //創(chuàng)建要返回的對象
    var o = new Object();
    //可以在這里添加私有變量和函數(shù)

    //添加方法
    o.sayName = function(){
        console.log(name);
    }
    return o;
}

注意，在以這種模式創(chuàng)建的對象中，除了使用sayName()方法之外，沒有其他辦法訪問name 的值

云服務(wù)器 GPU云服務(wù)器原型繼承原型鏈繼承 js原型鏈的繼承對象繼承objective-cclass

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78983.html

發(fā)表評論

登陸后可評論

0條評論

zhangrxiang

男|高級講師

我要關(guān)注我要私信

TA的文章

cloudstars，香港VPS促銷(CTG+CN2線路)，9.9元/月(贈防護(hù)CDN20G流量包)

閱讀 4648·2021-10-25 09:48
干了 5 年 Android 開發(fā)突然感覺自己啥也不會，還要繼續(xù)嗎？

閱讀 3224·2021-09-07 09:59
SPI、PCI、IIC、UART、GPIO、AXI4協(xié)議總結(jié)大全

閱讀 2210·2021-09-06 15:01
測試人生 | 突破“大專學(xué)歷+半路轉(zhuǎn)行”標(biāo)簽，從拉垮菜鳥到測試團(tuán)隊骨干，走到這一步很知足！

閱讀 2710·2021-09-02 15:21
前端框架及庫簡介

閱讀 2741·2019-08-30 14:14
搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

閱讀 2196·2019-08-29 13:59
LESS

閱讀 2531·2019-08-29 11:02
js中時間格式問題： new Date(str) IOS系統(tǒng)跟Android系統(tǒng)不兼容

閱讀 2545·2019-08-26 13:33

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

學(xué)習(xí)筆記：對象，原型和繼承（1）

相關(guān)文章

JavaScript學(xué)習(xí)第十天筆記（繼承）

JS學(xué)習(xí)筆記（第6章）（實現(xiàn)繼承的幾種方式）

JavaScript學(xué)習(xí)筆記第四天_面向對象編程

**JavaScript MVC 學(xué)習(xí)筆記（三）類的使用（中）**

**JavaScript高級程序設(shè)計學(xué)習(xí)筆記之繼承模式**

**[JavaScript 學(xué)習(xí)筆記] 2. 繼承**

發(fā)表評論

0條評論

zhangrxiang

男|高級講師

TA的文章

cloudstars，香港VPS促銷(CTG+CN2線路)，9.9元/月(贈防護(hù)CDN20G流量包)

干了 5 年 Android 開發(fā)突然感覺自己啥也不會，還要繼續(xù)嗎？

SPI、PCI、IIC、UART、GPIO、AXI4協(xié)議總結(jié)大全

測試人生 | 突破“大專學(xué)歷+半路轉(zhuǎn)行”標(biāo)簽，從拉垮菜鳥到測試團(tuán)隊骨干，走到這一步很知足！

前端框架及庫簡介

搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

LESS

js中時間格式問題： new Date(str) IOS系統(tǒng)跟Android系統(tǒng)不兼容

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

學(xué)習(xí)筆記：對象，原型和繼承（1）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

學(xué)習(xí)筆記：對象，原型和繼承（1）