細說 Javascript 對象篇（一） : 對象的使用和屬性

codecook 發布于2019-08-19 14:40 / 2627人閱讀

摘要：中的一切都可以視為對象，除了兩個特例和。上例中的第三個情形已說明刪除對象的屬性刪除屬性的唯一方法是使用，將屬性值設置為或只是移除了與屬性相關的值，并沒有真正刪除屬性本身。命名對象的屬性對象的屬性可以用普通字符或字符串來命名。

Javascript 中的一切都可以視為對象，除了兩個特例：null 和 undefined。

false.toString(); // "false"
[1, 2, 3].toString(); // "1,2,3"

function Foo(){}
Foo.bar = 1;
Foo.bar; // 1

一個經常容易被誤解的就是數字常量不能視為對象，實際上數字常量仍然可以視為對象。這是因為 Javascript 解析器在解析點操作符時而將其視為浮點數特征而犯下的錯誤。

2.toString(); // raises SyntaxError

實際上，我們有很多方法可以使得數字常量表現為一個對象。

2..toString(); // the second point is correctly recognized
2 .toString(); // note the space left to the dot
(2).toString(); // 2 is evaluated first

對象作為數據類型

Javascript 中的對象可以當做哈希表使用，它們主要包含鍵與值的對應關系。
使用 {} 符號來創建一個簡單的對象，這個新建的對象將從 Object.prototype 繼承而來，并且不包含自己定義的屬性。

var foo = {}; // a new empty object

// a new object with a "test" property with value 12
var bar = {test: 12};

訪問對象的屬性

我們可以使用兩種方式來訪問 Javascript 的對象，分別是點操作符 . 和中括號操作符 [] 。

var foo = {name: "kitten"}
foo.name; // kitten
foo["name"]; // kitten

var get = "name";
foo[get]; // kitten

foo.1234; // SyntaxError
foo["1234"]; // works

兩種操作符的效果幾乎一樣，唯一的不同是中括號操作符允許動態設置屬性而且屬性名可以有語法錯誤。（上例中的第三個情形已說明）

刪除對象的屬性

刪除屬性的唯一方法是使用 delete，將屬性值設置為 undefined 或 null 只是移除了與屬性相關的值，并沒有真正刪除屬性本身。

var obj = {
    bar: 1,
    foo: 2,
    baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;

for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, "" + obj[i]);
    }
}

上面的輸出 bar undefined 和 foo null，只有 baz 真正被刪除。
這里要說明一點，delete 只能刪除屬性，并不能刪除變量。所以我們在定義變量時一定要養成寫 var 的好習慣，任何時候，變量一定要使用 var 關鍵字才能聲明。因為如果不寫 var，變量會被誤認給全局對象創建了一個新屬性。

這個例子相當清楚給出了答案，a 為變量，而 b 只是一個全局對象的屬性而已。

命名對象的屬性

var test = {
    "case": "I am a keyword, so I must be notated as a string",
    delete: "I am a keyword, so me too" // raises SyntaxError
};

對象的屬性可以用普通字符或字符串來命名。同樣也是由于 Javascript 解析器的一個錯誤設計，上例中的第二種表示方法在 ECMAScript 5 中將會拋出一個錯誤。
錯誤的原因是因為 delete 是一個關鍵詞，所以必須使用一個字符串常量來命名來適應老版的 Javascript 解析器。

參考

http://bonsaiden.github.io/JavaScript-Garden/#object.general

GPU云服務器云服務器匹配對象的屬性和函數對象的屬性 javascript類和對象 js中集合對象的屬性

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

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

細說 Javascript 函數篇（四） : ?arguments 對象

因為最近有博友反饋我的博文是直接翻譯的參考鏈接內的內容，所以我在這里要說明一下，以免引起不必要的誤會。首先，我很喜歡 segmentfault 的交流和學習的氛圍，所以我很愿意在這里跟各位 SFer 交流學習心得，相互學習，共同進步。第二，我做技術方面的工作不久，所以學習經歷也不是很長，但是我發現寫博客，總結自己的學習心得是個很好的學習習慣，至少對于我個人而言，我于此收益頗豐，所以我決定堅持一...

aristark 2019-08-21 12:15 評論0 收藏0
細說 Javascript 函數篇（二） : this 的工作機制

摘要：與其他編程語言相比，對的使用是一套完全不同的機制。在五種情況下的值是各有不同的。調用一個函數時在這里，同樣指向全局對象。此時在函數內，指向新建的對象。盡管，晚綁定初看上去是個不好的決定，但實際上這是原型式繼承工作的基礎。與其他編程語言相比，Javascript 對 this 的使用是一套完全不同的機制。this 在五種情況下的值是各有不同的。全局作用域下 this; 當在全...

ZoomQuiet 2019-08-21 12:16 評論0 收藏0
細說 Javascript 對象篇（二） : 原型對象

摘要：并沒有類繼承模型，而是使用原型對象進行原型式繼承。我們舉例說明原型鏈查找機制當訪問一個對象的屬性時，會從對象本身開始往上遍歷整個原型鏈，直到找到對應屬性為止。原始類型有以下五種型。此外，試圖查找一個不存在屬性時將會遍歷整個原型鏈。 Javascript 并沒有類繼承模型，而是使用原型對象 prototype 進行原型式繼承。盡管人們經常將此看做是 Javascript 的一個缺點，然...

lansheng228 2019-08-19 14:40 評論0 收藏0
細說 Javascript 對象篇（四） : for in 循環

摘要：第二是，由于會遍歷整個原型鏈，所以當原型鏈過長時，會對性能造成影響。總結建議養成過濾屬性的好習慣，不要對運行環境做任何假設，也無論原生的原型對象是否被擴展。如同 in 運算符一樣，使用 for in 循環遍歷對象屬性時，也將往上遍歷整個原型鏈。 // Poisoning Object.prototype Object.prototype.bar = 1; var foo = {m...

Kross 2019-08-19 14:39 評論0 收藏0
細說 Javascript 對象篇（三） : hasOwnProperty

摘要：方法是中唯一一個處理對象屬性而不會往上遍歷原型鏈的。在這里，只有能給出正確答案，這在遍歷一個對象的屬性時是非常必要的。這里還要提醒下，當我們使用來遍歷對象時，使用將會很好地避免來自原型對象擴展所帶來的困擾。判斷一個屬性是定義在對象本身而不是繼承自原型鏈，我們需要使用從 Object.prototype 繼承而來的 hasOwnProperty 方法。hasOwnProperty 方法...

elva 2019-08-19 14:39 評論0 收藏0