深入理解javascript對象系列第二篇——屬性操作

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/08/06/5742933.html
-Advertisement-
Play Games

[1]屬性查詢 [2]屬性設置 [3]屬性刪除 [4]屬性繼承 ...


×
目錄
[1]查詢 [2]設置 [3]刪除[4]繼承

前面的話

　　對於對象來說，屬性操作是繞不開的話題。類似於“增刪改查”的基本操作，屬性操作分為屬性查詢、屬性設置、屬性刪除，還包括屬性繼承。本文是對象系列的第二篇——屬性操作

 

屬性查詢

　　屬性查詢一般有兩種方法，包括點運算符和方括弧運算符

var o = {
  p: 'Hello World'
};
o.p // "Hello World"
o['p'] // "Hello World"

　　[註意]變數中可以存在中文，因為中文相當於字元，與英文字元同樣對待，因此可以寫成person.白或person['白']

var person = {
    白 : 1
}
person.白;//1
person['白'];//1

【點運算符】

　　點運算符是很多面向對象語句的通用寫法，由於其比較簡單，所以較方括弧運算符相比，更常用

　　由於javascript是弱類型語言，在任何對象中都可以創建任意數量的屬性。但當通過點運算符(.)訪問對象的屬性時，屬性名用一個標識符來表示，標識符要符合變數命名規則。標識符必須直接出現在javascript程式中，它們不是數據類型，因此程式無法修改它們

var o = {
    a:1,
    1:2
};
console.log(o.a);//1
//由於變數不可以以數字開頭，所以o.1報錯
console.log(o.1);//Uncaught SyntaxError: missing ) after argument list

【方括弧運算符】

　　當通過方括弧運算符([])來訪問對象的屬性時，屬性名通過字元串來表示。字元串是javascript的數據類型，在程式運行中可以修改和創建它們

　　使用方括弧運算符有兩個優點

　　【1】可以通過變數來訪問屬性

var a = 1;
var o = {
    1: 10
}
o[a];//10

　　【2】屬性名稱可以為javascript無效標識符

var myObject = {
    123:'zero',
    class:'foo'
};
console.log(myObject['123'],myObject['class']);//'zero' 'foo'
console.log(myObject.123);//報錯

　　方括弧中的值若是非字元串類型會使用String()隱式轉換成字元串再輸出；如果是字元串類型，若有引號則原值輸出，否則會被識別為變數，若變數未定義，則報錯

var person = {};
person[0];  //[]中的數字不會報錯，而是自動轉換成字元串
person[a];  //[]中符合變數命名規則的元素會被當成變數，變數未被定義，而報錯
person['']; //[]中的空字元串不會報錯，是實際存在的且可以調用，但不會在控制台右側的集合中顯示

person[undefined];//不會報錯，而是自動轉換成字元串
person[null];//不會報錯，而是自動轉換成字元串
person[true];//不會報錯，而是自動轉換成字元串
person[false];//不會報錯，而是自動轉換成字元串

可計算屬性名

　　在方括弧運算符內部可以使用表達式

var a = 1;
var person = {
    3: 'abc'
};
person[a + 2];//'abc'

　　但如果要在對象字面量內部對屬性名使用表達式，則需要使用ES6的可計算屬性名

var a = 1;
//Uncaught SyntaxError: Unexpected token +
var person = {
    a + 3: 'abc'
};

　　ES6增加了可計算屬性名，可以在文字中使用[]包裹一個表達式來當作屬性名

var a = 1;
var person = {
    [a + 3]: 'abc'
};
person[4];//'abc'

屬性查詢錯誤

　　【1】查詢一個不存在的屬性不會報錯，而是返回undefined

var person = {};
console.log(person.a);//undefined

　　【2】如果對象不存在，試圖查詢這個不存在的對象的屬性會報錯

console.log(person.a);//Uncaught ReferenceError: person is not defined

　　可以利用這一點，來檢查一個全局變數是否被聲明

// 檢查a變數是否被聲明
if (a) {...} // 報錯
//所有全局變數都是window對象的屬性。window.a的含義就是讀取window對象的a屬性，如果該屬性不存在，就返回undefined，並不會報錯
if (window.a) {...} // 不報錯

 

屬性設置

　　屬性設置又稱為屬性賦值，與屬性查詢相同，具有點運算符和方括弧運算符這兩種方法

o.p = 'abc';
o['p'] = 'abc';

　　在給對象設置屬性之前，一般要先檢測對象是否存在

var len = undefined;
if(book){
    if(book.subtitle){
        len = book.subtitle.length;
    }
}

　　上面代碼可以簡化為

var len = book && book.subtitle && book.subtitle.length;

　　[註意]關於邏輯與&&運算符的應用移步至此

　　null和undefined不是對象，給它們設置屬性會報錯

null.a = 1;//Uncaught TypeError: Cannot set property 'a' of null
undefined.a = 1;//Uncaught TypeError: Cannot set property 'a' of undefined

　　由於string、number和boolean有對應的包裝對象，所以給它們設置屬性不會報錯

'abc'.a = 1;//1
(1).a = 1;//1
true.a = 1;//1

 

屬性刪除

　　使用delete運算符可以刪除對象屬性(包括數組元素)

var o = {
    a : 1
};
console.log(o.a);//1
console.log('a' in o);//true
console.log(delete o.a);//true
console.log(o.a);//undefined
console.log('a' in o);//false

　　[註意]給對象屬性置null或undefined，並沒有刪除該屬性

var o = {
    a : 1
};
o.a = undefined;
console.log(o.a);//undefined
console.log('a' in o);//true
console.log(delete o.a);//true
console.log(o.a);//undefined
console.log('a' in o);//false

　　使用delete刪除數組元素時，不會改變數組長度

var a = [1,2,3];
delete a[2];
2 in a;//false
a.length;//3

　　delete運算符只能刪除自有屬性，不能刪除繼承屬性(要刪除繼承屬性必須從定義這個屬性的原型對象上刪除它，而且這會影響到所有繼承自這個原型的對象)

var o  = {
    a:1
}
var obj = Object.create(o);
obj.a = 2;

console.log(obj.a);//2
console.log(delete obj.a);//true
console.log(obj.a);//1
console.log(delete obj.a);//true
console.log(obj.a);//1

返回值

　　delete操作符的返回值是個布爾值true或false

　　【1】當使用delete操作符刪除對象屬性或數組元素刪除成功時，返回true

var o = {a:1};
var arr = [1];
console.log(delete o.a);//true
console.log(delete arr[0]);//true

　　【2】當使用delete操作符刪除不存在的屬性或非左值時，返回true

var o = {};
console.log(delete o.a);//true
console.log(delete 1);//true
console.log(delete {});//true

　　【3】當使用delete操作符刪除變數時，返回false，嚴格模式下會拋出ReferenceError錯誤

var a = 1;
console.log(delete a);//false
console.log(a);//1

'use strict';
var a = 1;
//Uncaught SyntaxError: Delete of an unqualified identifier in strict mode
console.log(delete a);

　　【4】當使用delete操作符刪除不可配置的屬性時，返回false，嚴格模式下會拋出TypeError錯誤

var obj = {};
Object.defineProperty(obj,'a',{configurable:false});
console.log(delete obj.a);//false

'use strict';
var obj = {};
Object.defineProperty(obj,'a',{configurable:false});
//Uncaught TypeError: Cannot delete property 'a' of #<Object>
console.log(delete obj.a);

 

屬性繼承

　　每一個javascript對象都和另一個對象相關聯。“另一個對象”就是我們熟知的原型，每一個對象都從原型繼承屬性。所有通過對象直接量創建的對象都具有同一個原型對象，並可以通過Object.prototype獲得對原型對象的引用

var obj = {};
console.log(obj.__proto__ === Object.prototype);//true

　　[註意]Object.prototype的原型對象是null，所以它不繼承任何屬性

console.log(Object.prototype.__proto__ === null);//true

　　對象本身具有的屬性叫自有屬性(own property)，從原型對象繼承而來的屬性叫繼承屬性

var o = {a:1};
var obj = Object.create(o);
obj.b = 2;
//繼承自原型對象o的屬性a
console.log(obj.a);//1
//自有屬性b
console.log(obj.b);//2

in

　　in操作符可以判斷屬性在不在該對象上，但無法區別自有還是繼承屬性

var o = {a:1};
var obj = Object.create(o);
obj.b = 2;
console.log('a' in obj);//true
console.log('b' in obj);//true
console.log('b' in o);//false

for-in

　　通過for-in迴圈可以遍歷出該對象中所有的可枚舉的屬性　

var o = {a:1};
var obj = Object.create(o);
obj.b = 2;
for(var i in obj){
    console.log(obj[i]);//2 1
}

hasOwnProperty()

　　通過hasOwnProperty()方法可以確定該屬性是自有屬性還是繼承屬性

var o = {a:1};
var obj = Object.create(o);
obj.b = 2;
console.log(obj.hasOwnProperty('a'));//false
console.log(obj.hasOwnProperty('b'));//true

Object.keys()

　　Object.keys()方法返回所有可枚舉的自有屬性

var o = {a:1};
var obj = Object.create(o,{
    c:{value:3,configurable: false}
});
obj.b = 2;
console.log(Object.keys(obj));//['b']

Object.getOwnPropertyNames()

　　與Object.keys()方法不同，Object.getOwnPropertyNames()方法返回所有自有屬性(包括不可枚舉的屬性)

var o = {a:1};
var obj = Object.create(o,{
    c:{value:3,configurable: false}
});
obj.b = 2;
console.log(Object.getOwnPropertyNames(obj));//['c','b']

 

參考資料

【1】 W3School-Javascript高級教程——對象應用 http://www.w3school.com.cn/js/
【2】 阮一峰Javascript標準參考教程——對象 http://javascript.ruanyifeng.com/grammar/object.html
【3】《javascript權威指南(第6版)》第6章 對象
【4】《javascript高級程式設計(第3版)》第6章 面向對象的程式設計
【5】《javascript語句精粹》第3章 對象
【6】《javascript面向對象精要》 第3章 理解對象
【7】《你不知道的javascript上捲》第3章 對象
【8】《ECMAScript6入門》 第7章 對象的擴展


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 暑假集訓(4)第五彈——— 數論（hdu1222）
    題意概括：那天以後，你好說歹說，都快煉成三寸不爛之舍之際，小A總算不在擺著死人臉，鼓著死魚眼。有了點恢復的徵兆。可孟子這家伙說的話還是有點道理，那什麼天將降....額，總之，由於賢者法陣未完成，而小A又遲遲不現身，FFF團團長連下七道聖火令追殺你們，最先趕到地，機械化部隊，它們除了智能不高外，可以說 ...
  • CGLib與JDKProxy的區別
    Spring AOP 的實現主要有兩種：CGLib與JDK自帶的Proxy。 他們主要的區別是，需要JDKProxy修改的類必須實現介面（因此也只能代理public方法），在創建Proxy時可以使用class.getInterfaces()獲得所有介面併進行代理。 而CGLib不受這個限制可以修改任 ...
  • C++之面向對象的三個基本特征
    三大特性是：封裝,繼承,多態 所謂封裝 就是把客觀事物封裝成抽象的類，並且類可以把自己的數據和方法只讓可信的類或者對象操作，對不可信的進行信息隱藏.封裝是面向對象的特征之一，是對象和類概念的主要特性. 簡單的說，一個類就是一個封裝了數據以及操作這些數據的代碼的邏輯實體。在一個對象內部，某些代碼或某些 ...
  • springmvc mybatis 整合 bootstrap maven shiro
    A集成代碼生成器 [正反雙向(單表、主表、明細表、樹形表，開發利器)+快速構建表單;freemaker模版技術 ，0個代碼不用寫，生成完整的一個模塊，帶頁面、建表sql腳本，處理類，service等完整模塊B 集成阿裡巴巴資料庫連接池druid; 資料庫連接池 阿裡巴巴的 druid。Druid在監 ...
  • Design Patterns Simplified - Part 3 (Simple Factory)【設計模式簡述--第三部分（簡單工廠）】
    原文鏈接：http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part3-factory/ Design Patterns Simplified - Part 3 (Simple Factory)【設計模 ...
  • Design Patterns Simplified - Part 2 (Singleton)【設計模式簡述--第二部分（單例模式）】
    原文鏈接： http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part-2-singleton/ Design Patterns Simplified - Part 2 (Singleton)【設計模式 ...
  • 設計模式學習筆記（三）—抽象工廠模式
    概念 抽象工廠模式是所有形態的工廠模式中最為抽象和最具一般性的一種形態。抽象工廠模式是指當有多個抽象角色時，使用的一種工廠模式。抽象工廠模式可以向客戶端提供一個介面，使客戶端在不必指定產品的具體的情況下，創建多個產品族中的產品對象。根據里氏替換原則，任何接受父類型的地方，都應當能夠接受子類型。因此， ...
  • JavaScriptd給onclick事件賦值，動態傳參數實例辯錯
    錯誤的例子： 以上代碼執行起來是有錯誤的,因為show(certid.value)這句,直接就執行了show方法,而沒有正確把這個方法對象賦給btn.onclick事件. 正確的方式有： 缺陷：但是這樣無法傳值的！ 最好可以改成這樣： 這樣就實現了動態給onclick事件句柄賦值,並支持參數的傳遞！ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類