第一百一十六篇: JavaScript理解對象

来源:https://www.cnblogs.com/FatTiger4399/archive/2022/12/20/16995052.html
-Advertisement-
Play Games

好家伙，本篇為《JS高級程式設計》第八章“對象、類與面向對象編程”學習筆記 1.關於對象 ECMA-262將對象定義為一組屬性的無序集合。嚴格來說，這意味著對象就是一組沒有特定順序的值。 對象的每個屬性或方法都由一個名稱來標識，這個名稱映射到一個值。正因為如此（以及其他還未討論的原因），可以把 EC ...


好家伙，本篇為《JS高級程式設計》第八章“對象、類與面向對象編程”學習筆記

 

1.關於對象

ECMA-262將對象定義為一組屬性的無序集合。嚴格來說，這意味著對象就是一組沒有特定順序的值。

對象的每個屬性或方法都由一個名稱來標識，這個名稱映射到一個值。正因為如此（以及其他還未討論的原因），可以把

ECMAScript的對象想象成一張散列表，其中的內容就是一組名／值對，值可以是數據或者函數。

 

簡單使用一下

let object =new Object();

object.name ="panghu";
object.age ="20";
object.job ="student";
object.getName = function(){
    console.log(this.name)
};

看圖:

 

也可以這樣寫,在這種字面量中,等號變為了冒號,分號變為了逗號

(顯然第二種更美觀,直接)

let object = {
    name: "panghu",
    age: "20",
    job: "student",
    getName() {
        console.log(this.name)
    }
}
object.getName();

看圖:

 

 

2.屬性類型

ECMA-262使用一些內部特性來描述屬性的特征。這些特性是由為JavaScript實現引擎的規範定義的。

因此，開發者不能在JavaScript中直接訪問這些特性。

為了將某個特性標識為內部特性，規範會用兩個中括弧把特性的名稱括起來，比如［［Enumerable］］。

屬性分兩種，數據屬性和訪問器屬性。

2.1.1.數據屬性
數據屬性包含一個保存數據值的位置。值會從這個位置讀取，也會寫入到這個位置。

數據屬性有4個特性描述它們的行為。

（是否可以修改"數據屬性",是否可遍歷,值是否可修改,值   就是這個四個）


□［［Configurable］］：表示屬性是否可以通過delete 刪除並重新定義，是否可以修改它的特性，以及是否可以把它改為訪問器屬性。

預設情況下，所有直接定義在對象上的屬性的這個特性都是true，如前面的例子所示。
□［［Enumerable］］：表示屬性是否可以通過for-in迴圈返回。

預設情況下，所有直接定義在對象上的屬性的這個特性都是true，如前面的例子所示。
□［［writable］］：表示屬性的值是否可以被修改。

預設情況下，所有直接定義在對象上的屬性的這個特性都是true，如前面的例子所示。
□［［Value］］：包含屬性實際的值。這就是前面提到的那個讀取和寫入屬性值的位置。

這個特性的預設值為undefined。

 

2.1.2.object.defineProperty()方法

使用object.defineProperty()方法修改屬性的預設特性

這個方法接收3個參數：要給其添加屬性的對象、屬性的名稱和一個描述符對象。

示例:

let person ={};
Object.defineProperty(person,"name",{
    configurable:false,
    value:"panghu"
})
console.log(person.name);

Object.defineProperty(person,"name",{
    configurable:false,
    value:"xiaofu"
})
console.log(person.name);

此處,將configurable屬性改為false後,不可再修改數據屬性,

(writable屬性同理,writable改為false後,不可再修改"值"的屬性)

 

 (過河拆橋了屬於是)

 

2.2.訪問器屬性

訪問器屬性不包含數據值。(就像它的名字一樣,他是用來訪問的)

相反，它們包含一個獲取（getter）函數和一個設置（setter）函數，不過這兩個函數不是必需的。

在讀取訪問器屬性時，會調用獲取函數，這個函數的責任就是返回一個有效的值。

在寫入訪問器屬性時，會調用設置函數並傳入新值，這個函數必須決定對數據做出什麼修改。訪問器屬性有4個特性描述它們的行為。

(聯繫著上面那個一起記就好了)

□［［configurable］］：表示屬性是否可以通過delete 刪除並重新定義，是否可以修改它的特性，以及是否可以把它改為數據屬性。

預設情況下，所有直接定義在對象上的屬性的這個特性都是true。
□［［Enumerable］］：表示屬性是否可以通過for-in迴圈返回。

預設情況下，所有直接定義在對象上的屬性的這個特性都是true。
□［［Get］］：獲取函數，在讀取屬性時調用。預設值為undefined。
□［［set］］：設置函數，在寫入屬性時調用。預設值為undefined。


訪問器屬性是不能直接定義的，必須使用Object.defineProperty（）。

書本中的原例:

let book = {
    year_: 2017,
    edition: 1
}
Object.defineProperty(book, "year", {
    get() {
        return this.year_;
    },
    set(newValue) {
        if (newValue > 2017) {
            //此時this指向book
            this.year_ = newValue;
            this.edition += newValue - 2017;
        }
    }
});
book.year = 2018;
console.log(book.edition);

 

 這是訪問器屬性的典型使用場景，即設置一個屬性值會導致一些其他變化發生。

 

 

3.定義多個屬性

我們使用Object.defineProperty()去修改某個對象的屬性(數據屬性或訪問器屬性), 

那麼,按照JS一貫的尿性,定義多個屬性大概使用"它的複數"方法    (這個改複數我會,去y加ies)

Object.defineProperties()方法:

let person = {};
Object.defineProperties(person, {
    name_: {
        value: "panghu"
    },
    age: {
        value: "20"
    },

    name: {
        getName() {
            return this.name_;
        },
    }
})
console.log(person);

 

 

 

 

4.讀取屬性的特性

使用 Object.getOwnPropertyDescriptor()方法可以取得指定屬性的屬性描述符。

這個方法接收兩個參數：：屬性所在的對象和要取得其描述符的屬性名。

返回值是一個對象，對於訪問器屬性包含configurable、enumerable、get和 set屬性，

對於數據屬性包含 configurable，enumerable.writable和value屬性。

 (這個變複數我會,直接加s)

ECMAScript 2017 新增了 Object.getOwnPropertyDescriptors()靜態方法。

這個方法實際上會在每個自有屬性上調用object.getOwnPropertyDescriptor（）併在一個新對象中返回它們。

兩個方法放同一個例子了:

let person = {};
Object.defineProperties(person, {
    name_: {
        value: "panghu"
    },
    age: {
        value: "20"
    },

    name: {
        get:function() {
            return this.name_;
        },
        set:function(name){
            this.name=name;
        }
    }
})

let descriptor_1 = Object.getOwnPropertyDescriptor(person,"name");
let descriptor_2 = Object.getOwnPropertyDescriptors(person);

console.log(descriptor_1);
console.log(descriptor_2);

 

 

 

 

 

5.合併對象

 JavaScript 開發者經常覺得“合併”（merge）兩個對象很有用。

更具體地說，就是把源對象所有的本地屬性一起複制到目標對象上。

有時候這種操作也被稱為“混人”（mixin），因為目標對象通過混入源對象的屬性得到了增強。

ECMAScript6專門為合併對象提供了object.assign()方法。

這個方法接收一個目標對象和一個或多個源對象作為參數，

然後將每個源對象中可枚舉（object.propertyIsEnumerable（）返回 true）和自有（Object.hasownProperty（）返回true）屬性複製到目標對象。

以字元串和符號為鍵的屬性會被覆制。

對每個符合條件的屬性，這個方法會使用源對象上的［［Get］］取得屬性的值，然後使用目標對象上的［［Set］］設置屬性的值。

 

let book, person ,result;

book ={};
person ={ id:'999'};

result = Object.assign(book,person);

console.log(result);
console.log(book);

 

 

 

 

6.增強的對象語法

6.1.屬性值的簡寫

兩者等價

let name = "panghu";

let person ={
    name:name
};

console.log(person);

 簡寫:

let name = "panghu";

let person ={
    name:name
};

console.log(person);

 

 

 

6.2.可計算屬性

在引入可計算屬性之前，如果想使用變數的值作為屬性，

那麼必須先聲明對象，然後使用中括弧語法來添加屬性。

換句話說，不能在對象字面量中直接動態命名屬性。

有了可計算屬性，就可以在對象字面量中完成動態屬性賦值。

中括弧包圍的對象屬性鍵告訴運行時將其作為JavaScript表達式而不是字元串來求值

 示例如下:

const name_key ="panghu";
let person ={
    [name_key]: "xiaofu",
}
console.log(person);

 

 

 

6.3.簡寫方法名

let person ={
    name:"panghu",
    getName: function(){
        return this.name
    }
}
person.getName();

 

let person ={
    name:"panghu",
    getName(){
        return this.name
    }
}
person.getName();

 

 

 

 

7.對象解構

 ECMAScript6新增了對象解構語法，可以在一條語句中使用嵌套數據實現一個或多個賦值操作。

簡單地說，對象解構就是使用與對象匹配的結構來實現對象屬性賦值。

 （簡單的說，就是拆開來用）

let person = {
    name: "panghu",
    age: "20",
};

let {
    name: personName,
    age: personAge
} = person;

console.log(personName);
console.log(personAge);

//簡寫版本
let {
    name,
    age
} = person;

console.log(name);
console.log(age);

 

註意：undefined和null不能被解構

 


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

-Advertisement-
Play Games
更多相關文章
  • WPF開發經驗-實現一種通用閥門控制項
    一 引入 在設計設備界面時，經常會有一種需求，展示一個閥門，閥門有通斷兩種狀態： 二 CommonValveControl 考慮實現一個自定義控制項，CommonValveControl。 使用自定義控制項比用戶控制項更靈活，更具擴展性，可以使用不同的樣式和模板。 CommonValveControl定義 ...
  • 微服務項目Git倉庫自動化腳本
    說明 基於微服務項目，產生的的多項目倉庫管理腳本。可直接保存 shell 腳本後酌情修改後試用 目錄結構 xxxx Xxx1Api/ Xxx2Api/ git_clone_api.sh git_branch_dev.sh git_pull_all.sh git_status.sh api-build ...
  • 常用 Linux 命令
    1. 查看當做操作目錄位置 > pwd2. 查看(當前)目錄裡邊的文件內容 > ls //list > ls -l 或ll //顯示文件的詳細信息 > ls -al //all顯示文件的詳細信息(包括隱藏文件) > ls -a //顯示目錄全部文件名字(包括隱藏文件) > ls [-al] 目錄 / ...
  • Iceberg在袋鼠雲的探索及實踐
    “數據湖”、“湖倉一體”及“流批一體”等概念，是近年來大數據領域熱度最高的辭彙，在各大互聯網公司掀起了一波波的熱潮，各家公司紛紛推出了自己的技術方案，其中作為全鏈路數字化技術與服務提供商的袋鼠雲，在探索數據湖架構的早期，就調研並選用了Iceberg作為基礎框架，在落地過程中深度使用了Iceberg並 ...
  • 海量監控數據處理如何做，看華為雲SRE案例分享
    摘要：openGemini的設計和優化都是根據時序數據特點而來，在面對海量運維監控數據處理需求時，openGemini顯然更加有針對性。 IT運維誕生於最早的信息化時代。在信息化時代，企業的信息化系統，主要為了滿足企業內部管理的需求。通常是集中、可控和固化的煙囪式架構。傳統IT運維，以人力運維為主， ...
  • 互聯網寒冬的程式員們都是這樣薅羊毛！！！
    說說幾種薅免費伺服器羊毛的方法吧 經過我多年的薅羊毛經驗，總結得知，編程只需要: Terminal + VPS主機 + 網路 為了達到這些目的，肯定需要Vim搭建IDE，安裝環境等等操作 當時記得使用的是ChromeOS的筆記本，所有的應用都是在Chrome瀏覽器當中的，續航時間長，又輕薄屬實快得飛 ...
  • MySQL-InnoDB磁碟結構
    主要闡述InnoDB存儲引擎（MySQL5以後的預設引擎）。 資料庫中最基本的組成結構是數據表，視覺上的表和其對應的磁碟結構如下： 此圖參考了廈門大學課堂：MySQL原理 。但是視頻中一些更多細節沒有涉及，比如Leaf node segment和Non-leaf node segment其實就是葉子 ...
  • 如何優化大場景實時渲染？HMS Core 3D Engine這麼做
    在先前舉辦的華為開發者大會2022（HDC）上，華為通過3D數字溪村展示了自有3D引擎“HMS Core 3D Engine”（以下簡稱3D Engine）的強大能力。作為一款高性能、高畫質、高擴展性的3D引擎，3D Engine不僅能通過實時光追、水體渲染、體積雲霧、多維GPU粒子系統等技術還原真 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類