javascript對象不完全探索記錄05：小伙子，你對象咋來的？下篇 - 啥樣的對象適合你

hlcfan 發布于2019-08-21 18:27 / 2357人閱讀

摘要：溫馨提示作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示續本文內容簡單，發揚了潛入潛出的精神，請謹慎浪費時間溫馨提示再續魔卡少女櫻動畫再開撒花經過前兩篇文章的梳理對象不完全探索記錄小伙子，你對象咋來的上篇對象不完全探索記

溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命
溫馨提示-續：本文內容簡單，發揚了潛入潛出的精神，請謹慎浪費時間
溫馨提示-再續：《魔卡少女櫻》動畫再開！撒花

經過前兩篇文章的梳理
javascript對象不完全探索記錄03：小伙子，你對象咋來的？上篇
javascript對象不完全探索記錄04：小伙子，你對象咋來的？中篇 - 現出你的原型！

大概對javascript中對象的基本創建方法有了了解，總結一下

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.原型對象法（配合上面兩種使用）

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

是不是有種，對象盡在我手中，可以為所欲為了的感覺？
年輕人，你太年輕了，你怎么就知道你的對象適合你呢？

舉個例子，我的對象是世界上唯一的Sakura醬（翼年代記什么的我不知道！）
我們可以通過字面量方式創建

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

到此我們創建了一個名叫sakura的Cardcaptor你能看到她頭發的顏色還可以和她打招呼

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年最后一篇 - 新年快樂

GPU云服務器云服務器 javascript對象 javascript 面向對象 javascript對象方法 JavaScript對象進階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90479.html

從-1開始的ES6探索之旅02：小伙子，你對象咋來的？續篇 - 你的對象班（class）里來的？

摘要：這是因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：你們要非得看，我也攔不住，但是至少得準備個支持ES6的Chrome瀏覽器吧？溫馨提示-再續：ES6簡直了，放著不用簡直令人發指！書接上回，即便是程序員，也還是能夠通過自己的努力辛辛苦苦找到合適對象的，見前文《javascript對象不完全...

incredible 2019-08-21 18:41 評論0 收藏0
javascript對象不完全探索記錄03：小伙子，你對象咋來的？上篇

摘要：看著別人寫的功能對，就直接拿過來用，寫出來的代碼臃腫到爆炸，滿屏幕的的初級使用方式，運氣好了能湊合跑起來，出了問題全臉懵逼，心中安慰自己一萬遍我可是干設計的，但是既然打算好好整下就得從頭開始看了。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命首先，說實話，我對不起javascript，作為一個接觸前端快10年的老前端(偽)，一直發揚的是不求甚解的拿來就用主義。看...

Pluser 2019-08-22 11:15 評論0 收藏0
javascript對象不完全探索記錄04：小伙子，你對象咋來的？中篇 - 現出你的原型！

摘要：譯者注根據定義，沒有原型，并作為這個原型鏈中的最后一個環節。由于這個屬性不標準，因此一般不提倡使用。中用函數獲得一個對象的。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命在上一篇博文javascript對象不完全探索記錄03：小伙子，你對象咋來的？上篇，中大概說了說在js中，比較好理解的對象創建方式，分別是直接定義／字面量，和調用構造函數你對象還有原型？在一...

trigkit4 2019-08-22 11:22 評論0 收藏0
關于JavaScript函數柯里化問題探索

摘要：函數柯里化關于函數柯里化的問題最初是在忍者秘籍中講閉包的部分中看到的，相信很多同學見過這樣一道和柯里化有關的面試題實現一個函數，使得如下斷言能夠能夠通過簡單說就是實現一個求值函數，能夠將所有參數相加得出結果。方法返回一個表示該對象的字符串。函數柯里化 ??關于函數柯里化的問題最初是在《JavaScript忍者秘籍》中講閉包的部分中看到的，相信很多同學見過這樣一道和柯里化有關的面試題：...

vboy1010 2019-08-21 17:49 評論0 收藏0
javascript閉包不完全探索記錄01：閉包？啥餡的？

摘要：閉包一詞來源于以下兩者的結合要執行的代碼塊由于自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放和為自由變量提供綁定的計算環境作用域。在以及及以上等語言中都能找到對閉包不同程度的支持。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命閉包，好吃嗎？第一次聽到這個詞，很不幸是在一次面試中，可想而知結果很細碎，從此閉包和跨域在我匱乏的前端知識中成為了...

TANKING 2019-08-21 17:41 評論0 收藏0