js對象、原型的初步探討（上）

xushaojieaaa 發(fā)布于2019-08-20 13:52 / 1194人閱讀

摘要：經(jīng)過我的試驗，對象實例也就是創(chuàng)建的有名稱有值不是虛的是具體的能拿來用的對象比如這樣的和構造函數(shù)可以加原型，工廠函數(shù)不可以，其他的還沒試，等下一篇文章再補充。

開這個專欄，是想記錄下我學習的歷程，埋之前走過的坑，整理下思路，或許也還可以幫助到其他人。
然而從創(chuàng)建到現(xiàn)在，每次想寫些東西，打開專欄，先寫幾句扯皮的話，然后呆坐半個小時，發(fā)現(xiàn)自己還有很多沒有弄懂的地方，于是關掉網(wǎng)頁，草稿都不要了。
就這樣連續(xù)廢了三次。終于今天聽老師講了對象原型，之前看書看出來的種種疑惑稍微明朗，趕緊記錄下來先，不管對錯與否，不然又要鴿。以下純屬個人理解，如有誤請指正~

要開始了哦

首先是對象的聲明。
我們都知道，沒有對象是非常不好的，要有對象，首先要相親聲明一個變量。這里列舉三個比較常用的聲明方式。

1、直接創(chuàng)建：

var obj = new Object();
    obj.屬性名 = 值;
    obj.方法名 = function(){就是函數(shù)的寫法}

或者

var obj = {}；
    obj.屬性名 = 值;
    obj.方法名 = function(){還是函數(shù)的寫法}

或者直接在{}里面加

var obj = {屬性名1：值,屬性名2：值,方法名：function(){這里不講函數(shù)怎么寫}}
    //格式為{}括起來，名字和值用“：”隔開，各個屬性用“，”隔開
    //當然可以在外面繼續(xù)加屬性
    obj.屬性名N = 值;

ok，應該沒什么錯誤吧~~沒檢查心虛~~

2、工廠模式
第一次見到這個這個名字，心里想的是：這是什么鬼名字！
然而一天后我就接受了……
具體來說，是在函數(shù)中創(chuàng)建一個對象，然后把這個對象作為返回值賦值就好了。
比如說

function createObj(name,value){    //寫個函數(shù)，把聲明挑出來
    var obj = new Object();        //要用到new Object();
    obj.name = name;
    obj.value = value;
    obj.方法名 = function(){函數(shù)的寫法}
    return obj;                    //把創(chuàng)建的obj作為返回值
}
var objName = createObj(參數(shù)1，參數(shù)2);

應該是這樣寫吧，var objName = new createObj(1,2);少個new或多個new貌似無影響。

這樣寫的好處是可以多次調(diào)用，不用每次都寫一串的值了。然而！有個問題是，無法應用原型的屬性（至少我現(xiàn)在還沒發(fā)現(xiàn)有方法能用，等啥時候能用了再補~~懷疑態(tài)度~~）

3、構造函數(shù)
這個方法是我最喜歡的方法，既可以用原型，看起來也舒服簡便。通過與原型的配合使用，還可以形成大家說的第四種方法混合模式白眼，然而我不想分那么細，就這么一塊說了吧！
因為構造函數(shù)純粹是為了定義對象的，于是它一定會指向一個對象（要是非要把它當函數(shù)用我也木得剛），于是可以用this這個神奇的字符來指向調(diào)用它的對象，也就是我們想要創(chuàng)建的對象！~~好繞口~~
具體來說，是這樣的：

function CreateObj(name,value){ //也可以不傳參數(shù)，創(chuàng)建了后再賦值，可那樣多麻煩啊
    this.name = name;
    this.value = value;
    this.方法 = function(){又是一個函數(shù)}
}
var objName = new CreateObj();
    //權威指南上說，通常把前面要用new的函數(shù)命名為第一個首字母大寫，方便辨識
    //這個習慣是要推薦的

差不多就這樣，接下來將原型，第四種第五種創(chuàng)建方法暫時不表~

原型的個人理解

前方口胡高能，望大神指正！
我覺得，原型這個詞翻譯的不是很好，以我對字面上的理解，“原型”嘛，像初號機那樣，要先于后面量產(chǎn)的機型出現(xiàn)，然后量產(chǎn)機仿照原型來制造，也導致量產(chǎn)機根本就是渣，一點進步都沒有，最后還得靠初號機來收人頭（大霧）。
然而實際上在js里，原型并不是要先聲明，也不必獨立出來，甚至相反，它存在于對象“里面”。
“原型”實際上是指各個對象之間通用的部分，“公共對象”、“通用對象”、“公用部分”、“通用部分”之類的詞可能會更好些~~個人理解~~。
也就是說，如果設置了原型，相同原型的對象就有了共同的部分。
既然是對象的一部分，那原型是一個對象（對象的一部分還是對象嘛，不過要先創(chuàng)建）。
經(jīng)過我的試驗，對象實例（也就是創(chuàng)建的有名稱有值不是虛的是具體的能拿來用的對象比如obj1={value:1}這樣的）和構造函數(shù)可以加原型，工廠函數(shù)不可以，其他的還沒試，等下一篇文章再補充。
添加原型的方法是用prototype這個詞（找不到形容這個詞的概念了，方法、變量什么的太容易引起混淆，就用這個詞吧！），這個prototype是一個對象……吧應該，我理解的是，它是對象中的對象。
用個例子來演示一下原型的好處，用構造函數(shù)為例：

function CreateObj(name,value){    //先寫個構造函數(shù)壓壓驚
    this.name = name;
    this.value = value;
    this.方法 = function(){因為我懶不想寫函數(shù)好吧，想名字很難的}
}
var obj1 = new CreateObj("第一個",1);    //用構造函數(shù)創(chuàng)建一個對象
var obj2 = new CreateObj("第二個",1);    //用構造函數(shù)創(chuàng)建另一個對象

這樣我們就獲得了兩個對象實例
那么現(xiàn)在問題來了，我們在之后的編碼過程中，發(fā)現(xiàn)他們有共同的屬性value，而且這兩個值總是相等的，好在我們現(xiàn)在只有兩個，要修改起來還算容易。

obj1.value = 2;
obj2.value = 2;

再后來，我們創(chuàng)建了好多好多的對象，他們都有個value值，而且都相等

var obj3 = new CreateObj("第三個",2);
var obj4 = new CreateObj("第四個",2);
var obj5 = new CreateObj("第五個",2);
…………………………
var objn = new CreateObj("第n個",2);

我們想改一下他們的value這個屬性，由于創(chuàng)建的太多了，改起來簡直是個災難~~只要功夫深鐵杵磨成針~~
于是為了應對這種情況發(fā)生，把value設置成通用的屬性不就好了！由于大家都是調(diào)用的CreateObj這個構造函數(shù)（這里構造函數(shù)的好處就顯現(xiàn)了，工廠模式無法添加原型！），那就給CreateObj這個函數(shù)添加個原型（通用屬性），以后大家調(diào)用的時候，就能有個通用的屬性了！重新寫是這樣的：

function CreateObj(name){        //構建函數(shù)
    this.name = name;
}
CreateObj.prototype = {value:1};        
//之前說過，prototype是個對象，對象的創(chuàng)建方式是怎樣，它就能怎么寫（吧……）
var obj1 = new CreateObj("第一個");
var obj2 = new CreateObj("第二個");
.......
var objn = new CreateObj("第n個")；

    //objn.value 有值了

這么一來，我們就可以直接修改這么多對象的通用部分了，通過修改

CreateObj.prototype.value = 2;

來修改所有對象的value值，是不是很爽！

先寫這么多，還有繼承等內(nèi)容，容我再研究研究，純屬個人理解，如有誤請及時指正！也是在幫助我~謝謝您的支持！

云服務器 GPU云服務器 js原型鏈的繼承數(shù)據(jù)分析的探討計算機的初步學習 js原型面試題

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81285.html

JavaScript的創(chuàng)世神話——一切源于對象

摘要：但是，中并沒有類的概念，而是通過構造函數(shù)替代了類的功能，為某一類的對象提供共同的屬性和方法。一只名叫的狗，首先繼承了構造函數(shù)的原型對象，而的原型對象中的有繼承了函數(shù)的原型對象，函數(shù)對象中的有繼承了的原型對象。《圣經(jīng)》里的第一章創(chuàng)世紀中其中有一段經(jīng)典記載上帝是如何創(chuàng)造人的。神說：我們要照著我們的形象，按照我們的樣式造人。不謀而合的是，JavaScript中似乎也遵循著上帝的旨意去創(chuàng)造程...

enda 2019-08-22 10:50 評論0 收藏0
原型鏈一：原型與原型鏈

摘要：說白了，原型就是構造函數(shù)用來構造新實例的模板對象。什么是原型鏈先回答什么是原型。例如這個原型的原型就是這個構造函數(shù)的，既這個原型對象。這些原型對象通過像鏈子一樣連起來，就叫做原型鏈。原型鏈初步學習這篇博客只是我初步理解原型鏈的一個個人學習筆記,寫的比較粗略,且有的地方可能理解錯誤. 更多更專業(yè)的關于原型鏈的解釋請看JavaScript深入之從原型到原型鏈和阮一峰的博客:Javas...

MudOnTire 2019-08-22 17:04 評論0 收藏0
初步學習 jQuery 核心 API

摘要：進一步了解類數(shù)組對象可以看這篇文章對象的構建和分離構造器然后我們回來看看，讓我們悲傷的代碼。。。然后又通過下面的語句，將兩個獨立的構造器關聯(lián)起來了。背景不造輪子的程序員不是好程序員，所以我們今天嘗試造一下輪子。今天的主角是 jQuery ，雖然現(xiàn)在市面上已被 React，Angular，Vue 等擠的容不下它的位置，但是它的簡單 API 設計依然優(yōu)秀，值得學習和體會。任務今天造...

張巨偉 2019-08-20 19:01 評論0 收藏0
JavaScript面向對象的程序設計

摘要：目錄導語理解對象和面向?qū)ο蟮某绦蛟O計創(chuàng)建對象的方式的繼承機制原型對象原型鏈與原型對象相關的方法小結(jié)導語前面的系列文章，基本把的核心知識點的基本語法標準庫等章節(jié)講解完本章開始進入核心知識點的高級部分面向?qū)ο蟮某绦蛟O計，這一部分的內(nèi)容將會對對象目錄導語 1.理解對象和面向?qū)ο蟮某绦蛟O計 2.創(chuàng)建對象的方式 3.JavaScript的繼承機制 3.1 原型對象 3.2 原型鏈 3.3 與...

gitmilk 2019-08-20 13:30 評論0 收藏0
揭開JS中constructor的秘密

摘要：學習原型與繼承的時候，經(jīng)常會碰到，現(xiàn)在來揭開神秘面紗描述所有對象都會從它的原型上繼承一個屬性繼承中的用于設置原型重新分配原始構造函數(shù)現(xiàn)在不手動重置構造函數(shù)用于設置原型重新分配原始構造函數(shù)可以看到除了的不同，重置不重置原始構造函數(shù)對我們的繼承學習js原型與繼承的時候，經(jīng)常會碰到constructor，現(xiàn)在來揭開神秘面紗描述：所有對象都會從它的原型上繼承一個 constructor 屬...

MorePainMoreGain 2019-08-23 16:58 評論0 收藏0