js 中對象屬性特性的描述

来源:http://www.cnblogs.com/Ziksang/archive/2016/02/13/5188222.html
-Advertisement-
Play Games

如何自定義屬性的特性？ 用對象.屬性的特性和自定義的屬性的特性有什麼區別？ 它的四大特性 writable enumerable configable 有什麼區別？ 先預習一個用對象.屬性定義 ，屬性的四大特性是以什麼方式呈現的。 這時個屬性的三大特性預設值都為true。 代碼演示： 1 <scri


如何自定義屬性的特性？

用對象.屬性的特性和自定義的屬性的特性有什麼區別？

它的四大特性 writable   enumerable   configable   有什麼區別？

先預習一個用對象.屬性定義 ，屬性的四大特性是以什麼方式呈現的。

這時個屬性的三大特性預設值都為true。

代碼演示：

 

 1 <script>
 2     //用對象.屬性定義的屬性，它的三大特性都為true
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     obj.addr = "上海"
 8     obj.telephone = 15921848427
 9     console.log(obj.name)//=>ziksang
10     obj.name = "博客園"   //修改了name屬性的值
11     console.log(obj.name) //=>博客園 因為此時定義的方式 writable為true,所以可以修改name的屬性值
12     for( var p in obj){    //因為此時定義的方式，enumerable為true, 此時也是可以枚舉的，
13         console.log(p)   //用for in枚舉可以把對象原型上的屬性也枚舉出來，因為原型上的屬性也是用此定義屬性，所以他的enumerable也為true
14     }
15     console.log(Object.keys(obj)) //用Object.keys(obj)方式枚舉只能枚舉對象自有的屬性
16     delete obj.addr         //刪除對象上addr屬性
17     console.log(obj.addr)      //=>undefined 因為用此定義時他的configurable為true,所以是可以刪除對象的
18     Foo.prototype.age = 33    //對於三大特性，我對原型上的屬性只做了一個修改的特性，因為原型上定義的方式如果也是對象.屬性定義的話，跟對象屬性的三大特性一樣，在此就不一一舉例了
19     console.log(Foo.prototype.age)  //=>33
20 </script>

 

 

     如何用Object.defineProperty自定義屬性的特性

 語法 ：

 Object.defineProperyty(obj,prop,descriptor)

 obj: 需要定義的對象

 prop：需要定義 或修改的屬性名

 descriptor:屬性定義或修改的屬性描述

 該方法允許精確添加或修改對象的屬性，正常屬性添加通過賦值來創建並顯示在屬性枚舉中（for in 迴圈或Object.keys()方法），這種 方式添加的屬性值可能被改變，也可能會被刪除。該方法允許改變這些額外細節預設設置。

configureable:當且僅當這個屬性描述符值為true時，該屬性可能會改變，也可能會被從相應的對象刪除。預設為false.

enumerable:true當且僅當該屬性出現在相應的對象枚舉屬性中。預設為false.

value:與屬性有關的值。可以是任何有效的javascript值。預設為undefined.

writable:true當且僅當可能用賦值運算符改變與屬性相關的值。預設為false.

第一種方式，當不設定三大屬性時？

代碼演示如下：

 1 <script>
 2     //如果用自定義Object.defineProperty方式來自定義屬性的話，沒有設置三大屬性為true時，預設為false,看看在預設情況下會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427    //這個語句的意思就是在obj對象上創建了一個telephone屬性，設定它的值為15921848427，對它的三大屬性沒有任何設置，此時三大屬性為預設false
 9     })
10     console.log(obj.telephone)   //因為上面自定義時賦值為15921848427，所以獲取值為159....
11     obj.telephone = 110    //此處我修改其屬性值
12     console.log(obj.telephone) //結果輸出結果還是159....因為writable是預設值false，所以是不可修改的
13     for(var p in obj){   //此處輸出結果為 name,age 因為用for in枚舉的是對象自身屬性和原型上的屬性，為什麼沒有telephone呢？因為此時obj對象上屬性的特性enumerable也是預設false
14         console.log(p)
15     }
16     console.log(Object.keys(obj)) //此處輸出結果為name，因為用object.keys枚舉的是對象自身的屬性
17     delete obj.telephone;  //刪除telephone屬性
18     console.log(obj.telephone) //因為自定義的屬性特性預設值為false 所以是不可以刪除的
19 
20 
21     //對象上的原型也可以用此方法定義屬性
22     Object.defineProperty(Foo.prototype,"addr",{
23           value:"上海"       //對象原型上自定義一個屬性addr 三大特性都為預設值
24     })
25     console.log(obj.addr);  //=>上海
26     for( var k in obj){     //=>name,age 因為上面addr的enumerable預設值是false，所以也是不可以枚舉的
27         console.log(k)
28     }
29     delete Foo.prototype.addr   //=刪除對象原型屬性
30     console.log(obj.addr)     //=>上海   因為對象原型上屬性特性configurable預設為false，所以是不可刪除的
31 </script>

第二種方式，當三大屬性都為true時，又有什麼不同？

 1 <script>
 2     //如果用自定義Object.defineProperty方式來自定義屬性的話，設置三大屬性為true時,看看以下情況又會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427,
 9         writable:true,
10         enumerable:true,
11         configurable:true//這個語句的意思就是在obj對象上創建了一個telephone屬性，設定它的值為15921848427，對它的三大屬性都設為true
12     })
13     console.log(obj.telephone)   //因為上面自定義時賦值為15921848427，所以獲取值為159....
14     obj.telephone = 110    //此處我修改其屬性值
15     console.log(obj.telephone) //結果輸出結果還是110 因為writable是為true ,所以是可修改的
16     for(var p in obj){   //此處輸出結果為 name,telephone,age 因為用for in枚舉的是對象自身屬性和原型上的屬性，為什麼沒有telephone呢？因為此時obj對象上屬性的特性enumerable也是預設false
17         console.log(p)
18     }
19     console.log(Object.keys(obj)) //此處輸出結果為name，telephone因為用object.keys枚舉的是對象自身的屬性
20     delete obj.telephone;  //刪除telephone屬性
21     console.log(obj.telephone) //因為自定義的屬性特configurable為false 所以是可以刪除的
22 
23 
24     //對象上的原型也可以用此方法定義屬性
25     Object.defineProperty(Foo.prototype,"addr",{
26           value:"上海",
27         writable:true,
28         enumerable:true,
29         configurable:true//對象原型上自定義一個屬性addr 三大特性都為true
30     })
31     console.log(obj.addr);  //=>上海
32     Foo.prototype.addr = "北京"
33     console.log(obj.addr)//因為writable設為true,所以可以修改原型的屬性，所以輸出是北京
34     for( var k in obj){     //=>name,age，addr 因為上面addr的enumerable為true，所以也是可以枚舉的
35         console.log(k)
36     }
37     delete Foo.prototype.addr   //=刪除對象原型屬性
38     console.log(obj.addr)     //=>undefined   因為對象原型上屬性特性configurable為true，所以是可刪除的
39 </script>

再來深入瞭解configurable配置項.

當configurable為flase時 對屬性從定義其特性時writable,enumerable的情況如何？

 1 <script>
 2     //如果用自定義Object.defineProperty方式來自定義屬性的話，設置三大屬性為true時,看看以下情況又會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427,
 9         writable:false,//如果把三大特性都設為false
10         enumerable:false,
11         configurable:false
12     })
13     Object.defineProperty(obj,"telephone",{
14         writable:true,     //再把writable 和enumerable再重新定義
15         enumerable:true
16     })                    //結果以下都報錯，返回空數組，原因是configurable是一個配置項，當配置項為false時，其它兩個特性則不能被重新定義
17     for(var p in obj){
18         console.log(p)
19     }
20     console.log(Object.keys(obj))
21     obj.name = "博客園"
22     console.log(obj.name) 
23 </script>

 

當configurable為true時 對屬性從定義其特性時writable,enumerable的情況如何？

 1 <script>
 2     //如果用自定義Object.defineProperty方式來自定義屬性的話，設置三大屬性為true時,看看以下情況又會如何
 3     function Foo(){}
 4     Foo.prototype.age = 22
 5     var obj = new Foo()
 6     obj.name = "ziksang"
 7     Object.defineProperty(obj,"telephone",{
 8         value:15921848427,
 9         writable:false,//如果把configurable設為true,其它設為false時
10         enumerable:false,
11         configurable:true
12     })    
13     Object.defineProperty(obj,"telephone",{
14         writable:true,     //再把writable 和enumerable再重新定義
15         enumerable:true
16     })                 //以下都會返回結果，因可配置的特性configurable設為true，所以其它兩個物性都可以從新定義為true    
17     for(var p in obj){    //=>name,age ,telephone
18         console.log(p)
19     }
20     console.log(Object.keys(obj)) //=>name,telephone
21     obj.name = "博客園"
22     console.log(obj.name)   //=>博客園
23 </script>

 


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

-Advertisement-
Play Games
更多相關文章
  • 你對position的瞭解有多少？
    當人們剛接觸佈局的時候都比較傾向於使用定位的方式。因為定位的概念看起來好像比較容易掌握。錶面上你確切地指定了一個塊元素所處的位置那麼它就會坐落於那裡。可是定位比你剛看到的時候要稍微複雜一點。對於定位來說，有一些東西會絆倒新手，所以在它成為你的慣用技巧前你需要掌握它們。 一旦你更深入地瞭解了它是怎麼運
  • 精心整理的十個必須要知道CSS+DIV技巧
    1.css font的簡寫規則 當我們寫字體樣式的時候，我們也許會這樣子寫 font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family
  • JavaScript理解
    Javascript，是從類型（type）開始，這些類型在JS中分為兩大類：原生類型與對象類型。原生類型包括：number，string, boolean, null, undefined；剩下的非原生類型對象都屬於對象類型，包括：object, array, function等，這裡的object
  • 瞭解HTML CSS格式化排版 文字排版
    這裡簡單的寫一些涉及到字體排版中常用到的屬性, 大家可以學習查看, 也可以mark下以後看. font-family: "Micrsoft Yahei"; 設置字體 font-size: 20px; 設置字型大小 color: red; 設置顏色 font-weight: bold; 文字加粗 font
  • js 中用Dom2級事件處理函數(改變樣式)
    下麵這些客戶端 javascript代碼用到了事件，它給一個很重要的事件--“load" 事件註冊了一個事件處理程式。同時展示了註冊”click“事件處理函數更高級的一種方法 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset=
  • 【Bootstrap基礎學習】00 序
    其實這樣的東西很多了，但是我就是要寫。 我寫這種鬼東西只是為了監督自己，如果能順便幫一下別人就更好了。 這個系列的基礎學習，不會去看實體書，主要是去看網上的資料和官網。 Bootstrap就是對jQuery的一次再開發，所以jQuery腳本引用必須在bootstrap腳本之前。 <link type
  • js 中如何通過提示框跳轉頁面
    通過提示框跳轉頁面 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script> 9 window.onlo
  • js 中對象屬性特性2
    對象的存儲描述： get 和 set 方法 1 <script> 2 var obj ={ 3 get age(){ 4 return 22 5 }, 6 set age(value){ 7 console.log(value) 8 } 9 } 10 console.log(obj.age) 11
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類