JavaScript--我發現,原來你是這樣的JS:面向對象編程OOP[1]--(理解對象和對象屬性類型)

来源:http://www.cnblogs.com/Ry-yuan/archive/2017/11/03/7774098.html
-Advertisement-
Play Games

一、介紹 老鐵們,這次是JS的面向對象的編程OOP(雖然我沒有對象,心累啊,但是可以自己創建啊,哈哈)。 JS高程里第六章的內容,這章內容在我看來是JS中很難理解的一部分。所以分成三篇博客來逐個理清。 這是第一篇:理解對象,認識對象屬性的類型。 二、理解對象 書中原話 ECMA 262中把對像定義為 ...


一、介紹

老鐵們,這次是JS的面向對象的編程OOP(雖然我沒有對象,心累啊,但是可以自己創建啊,哈哈)。
JS高程里第六章的內容,這章內容在我看來是JS中很難理解的一部分。所以分成三篇博客來逐個理清。
這是第一篇:理解對象,認識對象屬性的類型。

二、理解對象

書中原話--ECMA-262中把對像定義為:無序屬性的集合。其中屬性可以是基本值,對象或者是函數。

1.我們通俗點理解一下

對象是一個真實存在的東西,就像世上每一個人、每一個物體一樣,它有自己的屬性,行為。也就是說各種屬性集合在一起就是一個具體的對象。(你自己也是一個對象)

舉一些生活例子:
小明:有名字,年齡(基本值),說話(方法) 等屬性
電腦:有顏色,大小(基本值),cpu(對象)等屬性

2.我們js代碼理解一下:

1.用new Object()構造函數方法來創建對象

//obj是我創建的一個對象,它有name、age屬性,sayHi方法
var obj = new Object();
obj.name = "ry";
obj.age="3";
obj.sayHi = function(){
    console.log("Hi");
}

2.用對象字面量創建對象

//創建一個person對象
var person = {
    name : "ry",
    age : 3,
    sayBye: function(){
        console.log('bye bye');
    }
};

上面說這麼多,就想說明白js中的對象是什麼。總之:無序的屬性的集合 == 對象

三、理解對象屬性的類型

1.對象屬性有類型?奇怪嗎?

一開始我們對未知的事物都會充滿的疑惑和驚訝,但是知識這東西,我們更多的選擇去接受它,然後理解它,最後運用它。

  • 可能你會問對象屬性還有類型?一開始我也覺得驚訝。
  • 沒錯,對象屬性是有類型的,可能你不能理解,但只能接受。

2.對象屬性類型有哪些:數據屬性和訪問器屬性

對於對象屬性類型這塊,我們只是簡單的去瞭解有什麼類型,類型區別。 這也有助於我們去瞭解對象。

1.數據屬性(最常用的)

既然有不同的類型,那肯定要有一個東西去區分他們,那這個東西就是特性

  • js中用特性這東西去區分屬性類型。對於數據屬性,它有以下4個特性去說明它是數據屬性
名字 作用
[[Configurable]] 表示能否通過delete來刪除屬性,能否修改屬性的特性,或能否把屬性設為訪問器屬性,預設true。
[[Enumerable]] 能不能通過for in枚舉該屬性,預設true。
[[Writable]] 能不能修改屬性值,預設true。
[[Value]] 這個位置保存屬性的值。比如下麵的name屬性,它的[[Value]]就保存"ry"這個字元串
  • 數據屬性長什麼樣子(也就那樣,以前那樣)
//一個對象
var person = {
    //這就是一個數據屬性
    name:"ry";
};
console.log(person.name); //ry
//透過代碼可以看出,以前我們定義對象屬性就是數據屬性,以前不知道它叫數據屬性這個名字,但現在知道了。
  • 測試一下特性吧。用Object.defineProperty(),修改特性用到這個函數Object.defineProperty():接受3個參數:屬性所在對象,屬性名字,描述符對象
//創建一個對象person
var person = {};
//添加一個數據屬性
person.name = "ry";
//使用Object.definProperty方法
Object.definProperty(person,"name",{
    //writable表示能不能修改,false表示不能
    writable:false,
})

console.log(person.name);  "ry"
//修改name的值
person.name = "yuan";
//name的值不變,修改不了
console.log(person.name);  "ry"

除此之外還可以修改其他特性,大家可以試試哦。

2.訪問器屬性

訪問器屬性的4個特性:

名字 作用
[[Configurable]] 表示能否通過delete來刪除屬性,能否修改屬性的特性,或能否把屬性設為訪問器屬性,預設true。
[[Enumerable]] 能不能通過for in枚舉該屬性,預設true。
[[Get]] 讀取時調用的函數,預設undefined
[[Set]] 寫入時調用的函數,預設undefined

訪問器屬性特性不包含數據值,它們包含一對getter和setter函數(但這兩個不是必須的)
訪問器屬性不能直接定義,只能通過Object.defineProperty()來定義。

▶ 書上的例子:

//一個對象
var book = {
    _year : 2004,
    edition : 1
};

//定義一個叫year的訪問器屬性
Object.defineProperty(book,"year",{
    //設置get特性,這是一個方法
    get: function(){
        retrun this._year;
    };
    //設置set特性
    set:function(newValue){
        if(newValue > 2004){
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});

//測試一下,給訪問器屬性賦值,即寫入year,它會調用set的方法
book.year = 2005;
//上面的2005大於2004,set方法中會改變edition的值,變成2
console.log(book.edtion); //2

▶ 特別提醒:Objecct.defineProperty() 的相容性:IE9+,Firefox4+,chrome,Opera12+,Safari 5+

▶ 除此之外

  • 還有一次定義多個屬性的方法:Objecct.defineProperties() , 相容性:IE9+,Firefox4+,chrome,Opera12+,Safari 5+。

  • 讀取屬性特性方法:Object.getOwnPropertyDescriptor(),接受兩參數:屬性所在對象和要讀取器描述符的屬性名稱。 返回一個對象。

//實踐比較容易理解
//一個對象
var book = {};
//用Objecct.defineProperties()方法設置多個屬性 
Object.defineProperties(book,{
    _year:{
        value:"ry"
    },
    edition:{
        value:1
    },
    year:{
        get:function(){
            return this._year ;
        }
    }
});

//函數返回一個對象
//descriptor對象有configurable,enumerable,writable,value屬性/(如果是訪問器屬性:configurable,enumerable,get,set)
//_year是數據屬性
var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value);  //2004
console.log(descriptor.configurable);  //true
console.log(descriptor.enumerable);  //true
//數據屬性沒有get
console.log(descriptor2.get); //undefined

//year是訪問器屬性
var descriptor2 = Object.getOwnPropertyDescriptor(book,"year");
//訪問器屬性有get
console.log(descriptor2.get); //function

四、小結

這次介紹主要介紹:
1.什麼是對象:無序屬性的集合。
2.還有屬性的類型:數據屬性和訪問器屬性。還有兩種屬性的各個特性,區別。不用深入,起碼知道有這些東西。
3.屬性的類型有個瞭解就好,主要用的還是數據屬性(平時用的)。
不忘初心,方得始終。覺得寫得很好就贊一下吧,也可以關註博主哦

同系列前幾篇:
第一篇:JavaScript--我發現,原來你是這樣的JS(一)(初識)
第二篇:JavaScript--我發現,原來你是這樣的JS(二)(基礎概念--軀殼篇)
第三篇:JavaScript--我發現,原來你是這樣的JS(三)(基礎概念--靈魂篇)
第四篇:JavaScript--我發現,原來你是這樣的JS(四)(看看變數,作用域,垃圾回收是啥)
第五篇:JavaScript--我發現,原來你是這樣的JS(引用類型不簡單[上篇],且聽我娓娓道來)
第六篇:JavaScript--我發現,原來你是這樣的JS(引用類型不簡單[下篇],基本包裝類型與個體內置對象)

本文出自博客園:http://www.cnblogs.com/Ry-yuan/
作者:Ry(淵源遠願)
歡迎轉載,轉載請標明出處,保留該欄位。


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

-Advertisement-
Play Games
更多相關文章
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...