js知識梳理2:對象屬性的操作

BearyChat 發布于2019-08-26 12:16 / 1257人閱讀

摘要：寫在前面注這個系列是本人對知識的一些梳理，其中不少內容來自書籍高級程序設計第三版和權威指南第六版，感謝它們的作者和譯者。打印和類似，只是它返回對象的所有自有屬性的名稱，包括不可枚舉的。

寫在前面

注：這個系列是本人對js知識的一些梳理，其中不少內容來自書籍:Javascript高級程序設計第三版和JavaScript權威指南第六版，感謝它們的作者和譯者。有發現什么問題的，歡迎留言指出。

1.屬性的查詢和設置 ①基本語法

這個簡單，可以通過點（.）或方括號（[]）運算來獲取屬性的值，注意點運算符后的標識符不能是保留字，方括號內的表達式必須返回字符串或返回一個可以轉換成字符串的值。

var person = {
    name:"jaychou",
    height:172,
    sayName:function () {
        console.log(this.name);
    }
};
console.log(person["name"]);
console.log(person.height);

往往有一些場景使用方括號比點語法更靈活：

var addr = "";
for(var i=0;i<4;i++){
    //讀取customer對象的address0,address1,address2,address3屬性
    addr += customer["address"+i] + "
";
}

②繼承相關的影響

原型鏈實現了屬性的繼承。簡單說，如果給對象o的屬性x賦值，如果o中已經有屬性x（自有屬性，不是繼承來的），那就會改變這個已有屬性x的值。如果o中不存在屬性x，那么賦值操作給o添加一個新屬性x。如果之前o繼承了屬性x，那么這個繼承的屬性就創建的同名屬性覆蓋了。當然，如果屬性的writable是false，就會拋出錯誤。

但是如果這個繼承來的屬性是具有setter方法的存取器屬性，這時會調用setter方法而不是給o創建一個屬性x。繼承來的屬性是只讀的，才會在o上創建屬性。

③屬性訪問錯誤

查詢一個不存在的屬性不會報錯，返回undefined。但如果嘗試查詢這個不存在的對象它的屬性就會報錯。

給null和undefined設置屬性會報類型錯誤，嚴格模式下，設置屬性操作只要失敗都會拋出類型錯誤異常。

2.刪除屬性

delete運算符可以刪除對象的屬性，注意的是delete只是斷開屬性和宿主對象的聯系，而不會去操作屬性中的屬性，而且為了避免內存泄漏，在銷毀對象的時候，要遍歷屬性中的屬性，依次刪除。

delete運算符只能刪除自有屬性（這是肯定的，否則就影響了整個原型鏈的對象）。

3.檢測屬性

判斷某個屬性是否存在于某個對象中即為檢測屬性，常用方法：in運算符、hasOwnProperty()、propertyIsEnumerable()，或者之前提及的屬性查詢也可以。

//in運算符：如果對象的自有屬性或繼承屬性中包含這個屬性則返回true:
var o = {x:1};
console.log("x" in o);//true:
console.log("y" in o);//false
console.log("toString" in o);//true:
//hasOwnProperty:檢測是否是對象的自有屬性
console.log(o.hasOwnProperty("x"));//true
console.log(o.hasOwnProperty("y"));//false
console.log(o.hasOwnProperty("toString"));//false
//propertyIsEnumerable:hasOwnProperty的增強版，是自有屬性且可枚舉
console.log(o.propertyIsEnumerable("x"));//true
console.log(Object.prototype.propertyIsEnumerable("toString"));//false:不可枚舉

其他小辦法：!==判斷一個屬性是否是undefined（缺陷：!==無法區分不存在的屬性和存在但值為undefined的屬性）

console.log(o.x !== undefined);//true
console.log(o.y !== undefined);
console.log(o.toString !== undefined);//true

4.枚舉屬性

常用的遍歷對象屬性的方法（未包括ES6）：for-in循環、Object.keys()、Object.getOwnPropertyNames()。

①for-in循環

for-in循環可以遍歷對象中所有可枚舉的屬性（包括自有屬性和繼承屬性）:

var o1 = {x:1,y:1,_z:111};
Object.defineProperty(o1,"sayX",{
    value:function () {
        console.log(this.x);
    },
    enumerable:false
});
Object.defineProperty(o1,"z",{
    get:function () { return this._z; },
    set:function (v) { this._z = v; },
    enumerable:false
})
//打印x,y,_z，不會打印sayX和z，因為其enumerable為false
for(var p in o1) console.log(p);

②Object.keys()

返回一個數組，這個數組由對象中可枚舉的自有屬性的名稱組成。

//打印["x", "y", "_z"]
console.log(Object.keys(o1));

③Object.getOwnPropertyNames()

和Object.keys()類似，只是它返回對象的所有自有屬性的名稱，包括不可枚舉的。

//打印["x", "y", "_z", "sayX", "z"]
console.log(Object.getOwnPropertyNames(o1));
//打印["constructor", "__defineGetter__", "__defineSetter__", 
// "hasOwnProperty", "__lookupGetter__", "__lookupSetter__", 
// "isPrototypeOf", "propertyIsEnumerable", "toString", 
// "valueOf", "__proto__", "toLocaleString"]
console.log(Object.getOwnPropertyNames(Object.prototype));

④小拓展

給Object.prototype添加一個不可枚舉的extend()方法，這個方法將作為參數傳入的對象的所有自有屬性（包括不可枚舉的）一一復制，除了值，也復制屬性的所有特性，除非在目標對象中存在同名的屬性。

Object.defineProperty(Object.prototype,"extend",{
   configurable:true,
   enumerable:false,//不可枚舉
   writable:true,
   value:function (o) {
       //先獲取o的全部自有屬性（包括不可枚舉的）
       var names = Object.getOwnPropertyNames(o);
       for(var i=0,len=names.length;i

GPU云服務器云服務器 js中集合對象的屬性 js包裝對象中的屬性 js操作tr屬性 js_window對象屬性

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

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

js知識梳理5：關于函數的要點梳理(1)

摘要：構造函數調用會使用新創建的對象作為調用上下文。函數的參數相關可選形參當傳入的實參比函數聲明時指定的形參數量要少，剩下的形參都將設置為值實參多則會自動省略。它們的第一個實參是要調用函數的母對象，它是調用上下文，函數體內通過引用它。寫在前面注：這個系列是本人對js知識的一些梳理，其中不少內容來自書籍:Javascript高級程序設計第三版和JavaScript權威指南第六版，感謝它們的...

付倫 2019-08-26 12:16 評論0 收藏0
js知識梳理1:理解對象的屬性特性

摘要：對象直接量的默認值表示能否通過循環返回屬性。同樣密封對象操作是不可逆的。代表未凍結已凍結屬性特性規則總結如果對象是不可拓展的，則可以編輯已有的自有屬性，但不能給它添加新屬性。寫在前面注：這個系列是本人對js知識的一些梳理，其中不少內容來自書籍:Javascript高級程序設計第三版和JavaScript權威指南第六版，感謝它們的作者和譯者。有發現什么問題的，歡迎留言指出。 1.數據...

13651657101 2019-08-26 12:16 評論0 收藏0
JS核心知識點梳理——原型、繼承（上）

摘要：同理，原型鏈也是實現繼承的主要方式的只是語法糖。原型對象也可能擁有原型，并從中繼承方法和屬性，一層一層以此類推。利用構造函數小明張三張三小明缺點每次實例化都需要復制一遍函數到實例里面。寄生構造函數模式只有被類出來的才能用。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言最近又攀登了一下JS三座大山中的第二...

villainhr 2019-08-26 13:53 評論0 收藏0
JS核心知識點梳理——變量篇

摘要：核心知識點梳理數據篇看了一些資料，結合高程和對核心知識點進行了梳理。所以，一共有種聲明變量的方法。凡是在聲明之前就使用這些變量，就會報錯。還是那句話，建議大家掌握核心知識點，細枝末節的東西就隨意啦。 JS核心知識點梳理——數據篇 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 看了一些資料，結合ES6、高程和MD...

aristark 2019-08-23 15:32 評論0 收藏0
JS核心知識點梳理——原型、繼承（下）

摘要：引言上篇文章介紹原型，這篇文章接著講繼承，嘔心瀝血之作，大哥們點個贊呀明確一點并不是真正的面向對象語言，沒有真正的類，所以我們也沒有類繼承實現繼承有且僅有兩種方式，和原型鏈在介紹繼承前我們先介紹下其他概念函數的三種角色一個函數，有三種角色。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言上篇文章介紹原型，...

joyqi 2019-08-26 13:53 評論0 收藏0