JavaScript - 對象

對象

  1. JavaScript 是一門面向?qū)ο竽_本語言骗污,在 JavaScript 中适肠,萬物皆對象。而對象只是帶有屬性和方法的特殊數(shù)據(jù)類型制圈,它擁有屬性和方法;
  2. 屬性畔况,可以理解為對象的特征鲸鹦;
  3. 方法,是能夠在對象上執(zhí)行的動作跷跪,也就是對象能夠做什么馋嗜,其實也就是寫在對象里的函數(shù)。如果我們把汽車當(dāng)成一個對象吵瞻,那么汽車的顏色和大小就是對象的屬性葛菇,汽車的啟動和剎車就是對象的方法。

創(chuàng)建對象的方法

關(guān)于原型橡羞、原型鏈和原型繼承請看 這里眯停。

方法一:通過字面量創(chuàng)建對象


代碼:

<script>
    // 1. 聲明一個空對象
    var person1 = {};
    // 2. 給對象添加屬性和方法
    person1.name = 'Li Si 01';
    person1.say = function () {
        console.log('Hello, I am ' + this.name + '.');
    };
    // 3. 訪問對象的屬性和方法
    console.log(person1.name);
    person1.say();
</script>

也可以這樣寫:

<script>
    // 聲明一個對象
    var person1 = {
        name: 'Li Si 01',
        say: function () {
            console.log('Hello, I am ' + this.name + '.');
        }
    };
</script>

效果演示:

字面量.png

方法二:通過 new 關(guān)鍵字來創(chuàng)建對象


代碼:

<script>
    // 1. 聲明一個對象
    var person2 = new Object();
    // 2. 為對象添加屬性和方法
    person2.name = 'Li Si 02';
    person2.say = function () {
        console.log('Hello, I am ' + this.name + '.');
    };
    // 3. 訪問對象的屬性和方法
    console.log(person2.name);
    person2.say();
</script>

方法一和方法二不夠智能,每次實例化一個對象都要寫一大堆的代碼卿泽,在實際中比較少用莺债。

效果演示:

new.png

方法三:通過工廠模式創(chuàng)建對象


代碼:

<script>
    function createPerson(name) {
        // 1. 聲明一個空對象
        var obj = {};
        // 2. 為對象添加屬性和方法
        obj.name = name;
        obj.say = function () {
            console.log('Hello, I am ' + obj.name + '.');
        };
        // 3. 返回對象
        return obj;
    }
    // 4. 實例化對象
    var person3 = createPerson('Li Si 03');
    // 5. 訪問對象的屬性和方法
    console.log(person3.name);
    person3.say();
</script>

效果演示:

工廠模式.png

方法四:通過構(gòu)造函數(shù)創(chuàng)建對象


在 JavaScript 中,通過定義構(gòu)造函數(shù)來定義一個類签夭,這時的構(gòu)造函數(shù)就是一個類齐邦。

代碼:

<script>
    // 1. 聲明一個有參構(gòu)造函數(shù)
    function Person(name) {
        // 2. 為對象添加屬性和方法
        this.name = name;
        this.say = function () {
            console.log('Hello, I am ' + this.name + '.');
        }
    }
    // 3. 實例化對象
    var person4 = new Person('Li Si 04');
    // 4. 訪問對象的屬性和方法
    console.log(person4.name);
    person4.say();
</script>

效果演示:

構(gòu)造函數(shù).png

方法四咋一看是不錯,但是太耗內(nèi)存第租,每次實例化一個對象都要再一次聲明所有的屬性和方法措拇,假如有一些屬性或方法是相同的,這樣做就很消耗內(nèi)存慎宾,也沒必要丐吓。

方法五:通過原型模式創(chuàng)建對象


代碼:

<script>
    // 1. 聲明一個無參構(gòu)造函數(shù)
    function Person() {
    }
    // 2. 為對象添加屬性和方法
    Person.prototype.name = 'Li Si 05';
    Person.prototype.say = function () {
        console.log('Hello, I am ' + this.name + '.');
    };
    // 3. 實例化對象
    var person5 = new Person();
    // 4. 訪問對象的屬性和方法
    console.log(person5.name);
    person5.say();
</script>

通過原型創(chuàng)建對象的好處就是可以將一些對象公有的屬性和方法移到這些實例共有的原型上浅悉,缺點就是這樣寫會導(dǎo)致對象所有的屬性值和方法都是相同的。

效果演示:

原型模式.png

方法六:構(gòu)造函數(shù)和原型組合模式


代碼:

<script>
    // 1. 聲明一個有參構(gòu)造函數(shù)
    function Person(name) {
        this.name = name;
    }
    // 2. 為對象的原型添加屬性和方法
    Person.prototype.what = 'Hello';
    Person.prototype.say = function () {
        console.log(this.name + ' say ' + this.what + ' to you.');
    };
    // 3. 實例化對象
    var person6 = new Person('Li Si 06');
    // 4. 訪問對象的屬性和方法
    console.log(person6.name);
    person6.say();
</script>

效果演示:

構(gòu)造函數(shù)和原型組合模式.png

方法六結(jié)合了構(gòu)造函數(shù)和原型模式的優(yōu)點汰蜘,將對象共有的屬性和方法移到原型里仇冯,對象特有的屬性和方法寫在構(gòu)造函數(shù)里。


參考資料:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末族操,一起剝皮案震驚了整個濱河市苛坚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌色难,老刑警劉巖泼舱,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異枷莉,居然都是意外死亡娇昙,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門笤妙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來冒掌,“玉大人,你說我怎么就攤上這事蹲盘」珊粒” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵召衔,是天一觀的道長铃诬。 經(jīng)常有香客問我,道長苍凛,這世上最難降的妖魔是什么趣席? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘溃论。我一直安慰自己,他們只是感情好钉寝,可當(dāng)我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著闸迷,像睡著了一般嵌纲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上腥沽,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天逮走,我揣著相機與錄音,去河邊找鬼今阳。 笑死师溅,一個胖子當(dāng)著我的面吹牛茅信,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播墓臭,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼蘸鲸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窿锉?” 一聲冷哼從身側(cè)響起酌摇,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嗡载,沒想到半個月后窑多,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡洼滚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年埂息,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片遥巴。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡千康,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出铲掐,到底是詐尸還是另有隱情拾弃,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布迹炼,位于F島的核電站,受9級特大地震影響颠毙,放射性物質(zhì)發(fā)生泄漏斯入。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一蛀蜜、第九天 我趴在偏房一處隱蔽的房頂上張望刻两。 院中可真熱鬧,春花似錦滴某、人聲如沸磅摹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽户誓。三九已至,卻和暖如春幕侠,著一層夾襖步出監(jiān)牢的瞬間帝美,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工晤硕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留悼潭,地道東北人庇忌。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像舰褪,于是被迫代替她去往敵國和親皆疹。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容