WEB前端開(kāi)發(fā)社區(qū) 2021-07-23

1.1 什么是對(duì)象？

對(duì)象是事物，在現(xiàn)實(shí)世界中，一個(gè)球，一張桌子，一輛汽車(chē)都是對(duì)象。

對(duì)象就是具有可描述特征的事物，我們可以用某種特定的方式去影響和操作它。

在JS中或者說(shuō)在面向?qū)ο蟮木幊陶Z(yǔ)言中，對(duì)象是一系列屬性和方法的組合。

一個(gè)屬性包含屬性名和屬性值，這個(gè)值可以是任意類(lèi)型的數(shù)據(jù)，也可以是個(gè)函數(shù)，這種情況下函數(shù)也被稱(chēng)為方法。

而在JS中，你遇到的所有東西幾乎都是對(duì)象，那么我們來(lái)了解一下對(duì)象的細(xì)節(jié)。

1.2 對(duì)象的特征？

對(duì)象有屬性，也就是對(duì)象的特征，可以通過(guò)點(diǎn)符號(hào)來(lái)訪(fǎng)問(wèn)一個(gè)對(duì)象的屬性。

objectName.propertyName;

如果把對(duì)象比作現(xiàn)實(shí)中的一個(gè)球，那這個(gè)球就是一個(gè)對(duì)象，擁有屬性，有顏色有大小。這些可以這樣表示：

var ball = new Object();ball.color = “red";ball.size = 12;

對(duì)象還有方法，方法用于定義對(duì)象的行為方式。

比如這個(gè)球可能有滾動(dòng)的方法可以計(jì)算能滾多遠(yuǎn)，有彈跳的方法可以計(jì)算跳多高。

可以這樣表示：

ball.roll = function() {return this.size * laps}

1.3 訪(fǎng)問(wèn)對(duì)象的屬性

前面講過(guò)我們可以通過(guò)點(diǎn)符號(hào)來(lái)訪(fǎng)問(wèn)對(duì)象的屬性，但如果是這樣的情況，還能通過(guò)點(diǎn)符號(hào)訪(fǎng)問(wèn)對(duì)象的屬性嗎：

var ball = new Object();ball.color = “red";ball.size = 12;var spec = “color”;ball.spec ??

這里假設(shè)有一個(gè)變量spec，我們需要通過(guò)這個(gè)變量spec來(lái)訪(fǎng)問(wèn)對(duì)象屬性。

但如果用點(diǎn)符號(hào)將會(huì)訪(fǎng)問(wèn)ball的spec屬性然后返回一個(gè)undefined，說(shuō)明這里直接將spec當(dāng)做了一個(gè)屬性而不是變量。

如果我們想要獲得變量的值，來(lái)作為對(duì)象的屬性那應(yīng)該怎么做呢？

可以使用方括號(hào)標(biāo)記訪(fǎng)問(wèn)，這個(gè)標(biāo)記法在屬性名稱(chēng)那里是動(dòng)態(tài)判定的，這樣就可以通過(guò)存儲(chǔ)在變量中的字符串來(lái)訪(fǎng)問(wèn)屬性了：

ball[spec]; // red

1.4 枚舉對(duì)象的屬性

另外我們可以通過(guò)for in循環(huán)語(yǔ)句來(lái)枚舉對(duì)象的所有屬性：

var ball = {color: “red”, size: 12, border: 2};for (var prop in ball) {console.log(“ball.” + prop + “=“ + obj[prop]);}// ball.color = red// ball.size = 12// ball.border = 2// 如果希望繼承的屬性不顯示，那么可以用hasOwnProperty函數(shù)來(lái)過(guò)濾一遍var bar = {a: 1, b: 2, c: 3};function Foo() {this.color = 'red';}Foo.prototype = bar;var obj = new Foo();for (var prop in obj) {if (obj.hasOwnProperty(prop)) {console.log(prop);}}

也可以通過(guò)Object.keys(obj)的方法來(lái)返回一個(gè)屬性名集合的數(shù)組：

var obj = {a: “123”, b: “das”, c: “web”};console.log(Object.keys(obj)); // [“a”,”b”,”c”];var arr = [“a”, “b”, “c”];console.log(Object.keys(arr)); // [“0”,”1”,”2”];