javascript對象不徹底探索記錄05:小夥子,你對象咋來的?下篇 - 啥樣的對象適合你

舒適提示:做者的爬坑記錄,對你等大神徹底沒有價值,別在我這浪費生命
舒適提示-續:本文內容簡單,發揚了潛入潛出的精神,請謹慎浪費時間
舒適提示-再續:《魔卡少女櫻》動畫再開!撒花javascript

通過前兩篇文章的梳理
javascript對象不徹底探索記錄03:小夥子,你對象咋來的?上篇
javascript對象不徹底探索記錄04:小夥子,你對象咋來的?中篇 - 現出你的原型!java

大概對javascript中對象的基本建立方法有了瞭解,總結一下segmentfault

1.字面量建立函數

var girlFriend = {};
girlFriend.name = "Sakura";
girlFriend.hairColor = "brown";

2.構造函數法動畫

function GirlFriend(name,hairColor){
    this.name = name;
    this.hairColor = hairColor
}
var sakura = new GirlFriend("Sakura","brown")

n.原型對象法(配合上面兩種使用)this

function GirlFriend() = {};
GirlFriend.prototype.name = "Sakura";
GrilFriend.prototype.hairColor = "brown";
var sakura = new GirlFriend();

是否是有種,對象盡在我手中,能夠隨心所欲了的感受?
年輕人,你太年輕了,你怎麼就知道你的對象適合你呢?prototype

舉個例子,個人對象是世界上惟一的Sakura醬(翼年代記什麼的我不知道!)
咱們能夠經過字面量方式建立code

var sakura = {
    name : "Kinomoto Sakura",
    age : 10,
    hairColor : "brown",
    job : "Cardcaptor",
    sayHello : function(yourName){
        alert("Ohayo! "+yourName)
    }
}

到此咱們建立了一個名叫sakuraCardcaptor你能看到她頭髮的顏色還能夠和她打招呼對象

console.log(sakura.age);//10
sakura.sayHello("lskrat");//Ohayo! lskrat

goodjob!
咱們都知道Sakura醬get的第一張卡(在動畫中)是Wind,咱們用一樣的方式建立一個新的對象繼承

var wind = {
    type : "ClowCard",
    owner : sakura   
}

後來Sakura醬又收集到了第二張卡片Fly

var fly = {
    type : "ClowCard",
    owner : sakura   
}

再後來,又收集到了Shadow,Water,Tree等等等等,發現問題了吧,這些ClowCard除了名字不同,其實內部屬性是徹底同樣的,每次建立都是再重複剛纔的工做,因而在這裏,咱們引入構造函數,來建立ClowCard

function ClowCard(name){
    this.name = name;
    this.type = "ClowCard";
    this.owner = sakura;
    this.showOwner = function(){
        return "Sakura"
    }
}
var wind = new ClowCard("Wind");
var fly = new ClowCard("Fly");

這樣寫卻是創造起來很快,可是還有兩個問題
1.根據構造函數建立對象的原理,實際上建立出來的對象中的屬性,和方法,都被重複的建立和儲存了,即使值是徹底相同的,而這徹底是沒有必要的
2.當某些共有的屬性發生變化時,須要一個個的改…,就像咱們都知道的,ClowCard最終都變成了SakuraCard,咱們是否是也要像Sakura醬那樣一張張的再攻略一遍呢……,並且ClowCard自己實際上是Clow Read創造的

在這種狀況下,咱們就要用到上一篇文章中梳理的關於對象原型和原型鏈的相關知識了,咱們改寫一下剛纔的代碼

function Card(name){
    this.name = name;
    this.showOwner = function(){
        return this.name + "-" +this.owner + "-" +this.type
    }
}
Card.prototype.type = "ClowCard";
Card.prototype.owner = "Clow Read";
var wind = new Card("Wind");
var fly = new Card("Fly");
console.log(wind.showOwner());//Wind-Clow Read-ClowCard
console.log(fly.showOwner());//Fly-Clow Read-ClowCard

咱們創造了Clow Read的ClowCard,這是Sakura將出現了,她要將ClowCard變成本身的SakuraCard

Card.prototype.type = "SakuraCard"
Card.prototype.owner = "Kinomoto Sakura";
console.log(wind.showOwner());//Wind-Kinomoto Sakura-SakuraCard
console.log(fly.showOwner());//Fly-Kinomoto Sakura-SakuraCard

這種將構造函數與對象原型相結合的方式,生成的對象既有各自不一樣的屬性,又能從原型對象處獲得公有的屬性和方法,適合於更多的情境下,同時還在必定程度上實現了繼承

這些都是最最初級的對象建立,掌握以後也就僅僅是會減小一些幼稚的錯誤,以及對對象有一個基本的認識
在javascript中對象是個深坑,關於繼承的實現,以及ES5中Object的不少新方法…
mdmddn

看到這裏的都是小櫻的真愛粉了
2017年最後一篇 - 新年快樂

相關文章
相關標籤/搜索