首頁 > web前端 > js教程 > JavaScript物件導向詳細解析之屬性描述符

JavaScript物件導向詳細解析之屬性描述符

WBOY
發布: 2022-05-27 17:29:37
轉載
1793 人瀏覽過

本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了關於物件導向的相關問題,包括了屬性描述符、資料描述符、訪問描述符等等內容,下面一起來看一下,希望對大家有幫助。

JavaScript物件導向詳細解析之屬性描述符

【相關推薦:javascript影片教學web前端

JavaScript物件導向-屬性描述符

JavaScript其實支出多種程式設計範式的,包括函數式程式設計和物件導向程式設計:

  • JavaScript中的物件被設計成一組屬性的無序集合,像是嘻哈表,有key和value組成;
  • key是一個識別符名稱,value可以是任意類型,也可以是其他物件或函數型別;
  • 如果值是函數,那麼我們可以稱為物件的方法;

1、如何建立一個物件呢?

  • 早起使用創建物件方式最多的是使用Object類,並且使用new關鍵字來創建一個物件,然後再將屬性或方法存入物件中:
var obj = new Object()
obj.name = 'why'
console.log(obj.name, obj) // why { name: 'why' }
登入後複製
  • 後來很多開發者為了方便起見,都是直接透過字面量的形式來建立物件:
// 字面量方式
var obj2 = { name: 'jam', age: '8' }
console.log(obj) // { name: 'jam', age: '8' }
登入後複製

2、操作物件的屬性-屬性描述符

在之前我們的屬性都是直接定義在物件內部,或是直接加入物件內部;
但是這樣我們就不能對這個屬性做一些限制:例如這個屬性是否可以透過delect刪除,是否可以在for-in遍歷的時候被遍歷出來呢?
如果我們想要對一個屬性進行比較精準的操作控制,那麼我就可以使用 屬性描述子。透過屬性描述符可以精確的新增或修改物件的屬性;
屬性描述子需要使用 Object.defineProperty來對屬性進行新增或修改。

屬性描述符分為兩種:資料描述符和存取描述符

#2.1資料描述符

#資料描述符是一個具有值的屬性,該值可能是可寫的,也可能是不可寫的。資料描述符具有以下可選鍵值:

  • value:此屬性對應的值。可以是任何有效的JavaScript值(數值,對象,函數等)。預設為undefined。
  • writable:當且僅當該屬性的writable為true時,value才能被複製運算子改變。預設為false。
  • configurable:當且僅當該屬性的configurable為true時,此屬性描述子才能夠被改變,同時該屬性也能從對應的物件上刪除。預設為false。
  • enumerable:當且僅當該屬性的enumerable為true時,此屬性才能夠出現在物件的列舉屬性中。預設為false。

2.2.1、取得屬性描述子Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法傳回指定物件上一個自有屬性對應的屬性描述符。

Object.getOwnPropertyDescriptor(obj,prop)
登入後複製
  • obj:需要尋找的目標物件
  • prop:目標物件內屬性名稱(String類型)。
  • 傳回值:如果指定的屬性存在在於物件上,則傳回其屬性描述符對象,否則傳回undefined。

注意:如果該方法的第一個參數不是對象,會報錯(TypeError)。

2.1.2、設定屬性描述子Object.defineProperty

#Object.defineProperty() 方法會直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性, 並傳回這個物件。

Object.defineProperty(obj,prop,descriptor)
登入後複製
  • obj:要在其上定義屬性的物件。
  • prop:要定義或修改的屬性的名稱。
  • descriptor:將被定義或修改的屬性描述符
  • #:被傳遞給函數的物件
如下示例代码展示了属性描述符的设置和获取
var obj = {
    name: 'jam',
    age: 8
}
Object.defineProperty(obj, 'job', {
    value: '律师'
})
console.log(Object.getOwnPropertyDescriptor(obj, 'age')) // { value: 8, writable: true, enumerable: true, configurable: true }

console.log(obj.job) // 律师
// 通过defineProperty新增的属性,该新属性是不可修改、不可删除以及不可枚举的
console.log(Object.getOwnPropertyDescriptor(obj, 'job')) // {value: '律师',writable: false,enumerable: false,configurable: false}
登入後複製

注意:透過defineProperty新增的屬性,該新屬性是不可修改、不可刪除以及不可列舉的

#(1)configurable在物件上是否可刪除

var obj = {
    name: 'jam',
    age: 8
}
Object.defineProperty(obj, 'address', {
    value: '河北',
    // configurable 该属性不可删除,更不可再次使用defineProperty修改属性描述符
    configurable: false,

})
delete obj.address // 想使用delete删除该属性
obj.address = '广州' // 想修改obj中的属性address值为广州
console.log(obj.address)  // 输出结果:河北
登入後複製

因為屬性描述符configurable值為false 不可刪除和修改,所以delete和修改都沒生效

(2)enumerable 是否可列舉遍歷

var obj = {
    name: 'jam',
    age: 8}Object.defineProperty(obj, 'sex ', {
    value: '男',
    // enumerable 配置该属性是否可以枚举
    enumerable: true})for (i in obj) {
    console.log(i)}
登入後複製

當enumerable: false時,輸出結果為name age
當enumerable: true時,輸出結果為name age sex

#(3)writable 此特性控制該屬性是否可以賦值(寫入值)

var obj = {
    name: 'jam',
    age: 8}Object.defineProperty(obj, 'score', {
    value: 80,
    // writable: true 
    writable: false})obj.score = 100 console.log(obj.score) // 80
登入後複製

因為writeable的值為false,所以修改score為100時,並沒有修改成功,最終輸出80

2.1.3、同时设置多个属性描述符 Object.defineProperties

是不是感觉每次只能设置一个属性的属性描述符很繁琐,Object.defineProperties可以帮你解决问题。
Object.defineProperties()方法为对象定义一个或多个新属性或修改现有属性,并返回该对象。

Object.defineProperties(obj,props)
登入後複製
  • obj:要在其上定义属性的对象。
  • props:要定义其可枚举属性或修改的属性描述符的对象。
  • 返回值:被传递给函数的对象。

示例代码如下:

var obj = {
    name: 'jam',}Object.defineProperties(obj, {
    'age': {
        value: 28,
        writable: true,
        configurable: false,
        enumerable: true
    },
    'job': {
        value: '律师',
        writable: true,
        configurable: false,
        enumerable: true
    },
    'sex': {
        value: '男',
        writable: false,
        configurable: false,
        enumerable: true
    },
    'height': {
        value: '1.8 m',
        writable: false,
        configurable: false,
        enumerable: true
    }})console.log(obj) //  name: 'jam', age: 28, job: '律师', sex: '男', height: '1.8m' }
登入後複製

2.2存取描述符

存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值:

  • get:给属性提供getter的方法,如果没有getter则为undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象。
  • set:给属性提供setter的方法,如果没有setter则为undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
  • configurable:当且仅当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为false。
  • enurnerable:当且仅当该属性的enurnerable为true时,该属性才能够出现在对象的枚举属性中。默认为false。

configurable 和 enurnerable 的使用与数据描述符中的一致,这里就不过多讲解了。
主要讲一下get 和 set 方法的使用

2.2.1 get()与set()的使用

var obj = {
    name: 'jam',
    age: 8,
    _address: '河北'
}

// 存取描述符的使用场景
// 1.隐藏某一个私有属性被希望直接被外界使用和赋值
// 2.如果我们希望解惑某一个属性它访问和设置值的过程时,也会使用存储属性描述符
Object.defineProperty(obj, 'address', {
    enumerable: true,
    configurable: true,
    get: function () {
        foo()
        return this._address
    },
    set: function (value) {
        bar()
        this._address = value
    }
})
function foo () {
    console.log("截获了一次address的值")
}

function bar () {
    console.log("设置了一次address的值")
}
登入後複製

上述示例代码控制台打印结果如下:
JavaScript物件導向詳細解析之屬性描述符

【相关推荐:javascript视频教程web前端

以上是JavaScript物件導向詳細解析之屬性描述符的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板