JavaScript面向?qū)ο笾畬傩悦枋龇趺词褂?/h1>

發(fā)布時間：2022-05-30 11:14:52 來源：億速云 閱讀：167 作者：iii 欄目：web開發(fā)

本文小編為大家詳細介紹“JavaScript面向?qū)ο笾畬傩悦枋龇趺词褂谩?，?nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“JavaScript面向?qū)ο笾畬傩悦枋龇趺词褂谩蔽恼履軒椭蠹医鉀Q疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

JavaScript中的對象被設(shè)計成一組 屬性的無序集合，像是一個嘻哈表，有key和value組成；

key是一個標識符名稱，value可以是任意類型，也可以是其他對象或者函數(shù)類型；

如果值是一個函數(shù)，那么我們可以稱之為對象的方法；

1、如何創(chuàng)建一個對象呢？

• 早起使用創(chuàng)建對象方式最多的是使用Object類，并且使用new關(guān)鍵字來創(chuàng)建一個對象,然后再將屬性或方法存入對象中：

var obj = new Object()
obj.name = 'why'
console.log(obj.name, obj) // why { name: 'why' }

• 后來很多開發(fā)者為了方便起見，都是直接通過字面量的形式來創(chuàng)建對象：

// 字面量方式
var obj2 = { name: 'jam', age: '8' }
console.log(obj) // { name: 'jam', age: '8' }

2、操作對象的屬性——屬性描述符

在之前我們的屬性都是直接定義在對象內(nèi)部，或者直接添加到對象內(nèi)部；
但是這樣我們就不能對這個屬性進行一些限制：比如這個屬性是否可以通過 delect刪除，是否可以在 for-in遍歷的時候被遍歷出來呢？
如果我們想要對一個屬性進行比較精準的操作控制，那么我就可以使用 屬性描述符。通過屬性描述符可以精準的添加或修改對象的屬性；
屬性描述符需要使用 Object.defineProperty來對屬性進行添加或修改。

屬性描述符分為兩種：數(shù)據(jù)描述符和存取描述符

2.1數(shù)據(jù)描述符

數(shù)據(jù)描述符是一個具有值的屬性，該值可能是可寫的，也可能是不可寫的。數(shù)據(jù)描述符具有以下可選鍵值：

• value：該屬性對應(yīng)的值?？梢允侨魏斡行У腏avaScript值（數(shù)值，對象，函數(shù)等）。默認為undefined。

• writable：當且僅當該屬性的writable為true時，value才能被復(fù)制運算符改變。默認為false。

• configurable：當且僅當該屬性的configurable為true時，該屬性描述符才能夠被改變，同時該屬性也能從對應(yīng)的對象上被刪除。默認為false。

• enumerable：當且僅當該屬性的enumerable為true時，該屬性才能夠出現(xiàn)在對象的枚舉屬性中。默認為false。

2.2.1、獲取屬性描述符 Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法返回指定對象上一個自有屬性對應(yīng)的屬性描述符。

Object.getOwnPropertyDescriptor(obj，prop)

• obj：需要查找的目標對象

• prop：目標對象內(nèi)屬性名稱（String類型）。

• 返回值：如果指定的屬性存在在于對象上，則返回其屬性描述符對象，否則返回undefined。

注意：如果該方法的第一個參數(shù)不是對象，會報錯（TypeError）。

2.1.2、設(shè)置屬性描述符 Object.defineProperty

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性， 并返回這個對象。

Object.defineProperty（obj，prop，descriptor）

• obj：要在其上定義屬性的對象。

• prop：要定義或修改的屬性的名稱。

• descriptor：將被定義或修改的屬性描述符

• 返回值：被傳遞給函數(shù)的對象

如下示例代碼展示了屬性描述符的設(shè)置和獲取
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)  // 輸出結(jié)果：河北

因為屬性描述符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時，輸出結(jié)果為 name age
當enumerable: true時，輸出結(jié)果為 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、同時設(shè)置多個屬性描述符 Object.defineProperties

是不是感覺每次只能設(shè)置一個屬性的屬性描述符很繁瑣，Object.defineProperties可以幫你解決問題。
Object.defineProperties（）方法為對象定義一個或多個新屬性或修改現(xiàn)有屬性，并返回該對象。

Object.defineProperties（obj，props）

• obj：要在其上定義屬性的對象。

• props：要定義其可枚舉屬性或修改的屬性描述符的對象。

• 返回值：被傳遞給函數(shù)的對象。

示例代碼如下：

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函數(shù)對描述的屬性。存取描述符具有以下可選鍵值:

• get：給屬性提供getter的方法，如果沒有g(shù)etter則為undefined。當訪問該屬性時，該方法會被執(zhí)行，方法執(zhí)行時沒有參數(shù)傳入，但是會傳入this對象。

• set：給屬性提供setter的方法，如果沒有setter則為undefined。當屬性值修改時，觸發(fā)執(zhí)行該方法。該方法將接受唯一參數(shù)，即該屬性新的參數(shù)值。

• configurable：當且僅當該屬性的configurable為true時，該屬性描述符才能夠被改變，同時該屬性也能從對應(yīng)的對象上被刪除。默認為false。

• enurnerable：當且僅當該屬性的enurnerable為true時，該屬性才能夠出現(xiàn)在對象的枚舉屬性中。默認為false。

configurable 和 enurnerable 的使用與數(shù)據(jù)描述符中的一致，這里就不過多講解了。
主要講一下get 和 set 方法的使用

2.2.1 get()與set()的使用

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

// 存取描述符的使用場景
// 1.隱藏某一個私有屬性被希望直接被外界使用和賦值
// 2.如果我們希望解惑某一個屬性它訪問和設(shè)置值的過程時，也會使用存儲屬性描述符
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("設(shè)置了一次address的值")
}

上述示例代碼控制臺打印結(jié)果如下：
讀到這里，這篇“JavaScript面向?qū)ο笾畬傩悦枋龇趺词褂谩蔽恼乱呀?jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。