1. 對象的定義與賦值

經(jīng)常使用的定義與賦值方法obj.prop =value或者obj['prop']=value

let Person = {};
Person.name = "Jack";
Person["gender"] = "female";
console.log(Person.name); // Jack
console.log(Person.gender); // female
console.log(Person); // {name: 'Jack', gender: 'female'}

2. Object.defineProperty()語法說明

Object.defineProperty()的作用就是直接在一個對象上定義一個新屬性，或者修改一個已經(jīng)存在的屬性

Object.defineProperty(obj, prop, desc)

1. obj 需要定義屬性的當前對象
2. prop 當前需要定義的屬性名
3. desc 屬性描述符

一般通過為對象的屬性賦值的情況下，對象的屬性可以修改也可以刪除，但是通過Object.defineProperty()定義屬性，通過描述符的設(shè)置可以進行更精準的控制對象屬性。

3. 屬性的特性以及內(nèi)部屬性

javacript 有三種類型的屬性

1. 命名數(shù)據(jù)屬性：擁有一個確定的值的屬性。這也是最常見的屬性
2. 命名訪問器屬性：通過getter和setter進行讀取和賦值的屬性
3. 內(nèi)部屬性：由JavaScript引擎內(nèi)部使用的屬性，不能通過JavaScript代碼直接訪問到，不過可以通過一些方法間接的讀取和設(shè)置。比如，每個對象都有一個內(nèi)部屬性[[Prototype]]，你不能直接訪問這個屬性，但可以通過Object.getPrototypeOf()方法間接的讀取到它的值。雖然內(nèi)部屬性通常用一個雙呂括號包圍的名稱來表示，但實際上這并不是它們的名字，它們是一種抽象操作，是不可見的，根本沒有上面兩種屬性有的那種字符串類型的屬性

4. 屬性描述符

通過Object.defineProperty()為對象定義屬性，有兩種形式，且不能混合使用，分別為數(shù)據(jù)描述符，存取描述符，下面分別描述下兩者的區(qū)別：

1. 數(shù)據(jù)描述符 --特有的兩個屬性（value,writable）

注意：當使用了writable和value屬性，不允許使用getter或setter這兩個方法

• writable: 描述對象是否可寫(是否只讀)
  • 當我們之間在一個對象上定義某個屬性時, writable默認為true
  • 當我們通過屬性描述符定義一個屬性時, writable默認為false

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'jack',
   writable: true // 是否可以改變
})

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    // writable默認值是false, 不能改變屬性的值
});
Person.name = "rose";
console.log(Person.name); // Jack
-------------------------------------------------------------------------------------------
let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    writable: true, // 可以改變value值
});
Person.name = "rose";
console.log(Person.name); // rose

注意，如果描述符中的某些屬性被省略，會使用以下默認規(guī)則：

2. 存取描述符 --是由一對 getter、setter 函數(shù)功能來描述的屬性

注意：當使用了getter或setter方法，不允許使用writable和value這兩個屬性

get：一個給屬性提供getter的方法，如果沒有getter則為undefined。該方法返回值被用作屬性值。默認為undefined。

set：一個給屬性提供setter的方法，如果沒有setter則為undefined。該方法將接受唯一參數(shù)，并將該參數(shù)的新值分配給該屬性。默認值為undefined。

let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})

let Person = {};
let temp = null;
Object.defineProperty(Person, "name", {
    get: function () {
        return temp;
    },
    set: function (val) {
        temp = val;
    },
});

Person.name = "Jack";
console.log(Person.name, temp); // Jack Jack

temp = "rose";
console.log(Person.name, temp); // rose rose

3. 存取器描述

當使用存取器描述屬性的特性的時候，允許設(shè)置以下特性屬性：

var obj = {};
Object.defineProperty(obj, "newKey", {
    get: function () {} | undefined,
    set: function (value) {} | undefined,
    configurable: true | false,
    enumerable: true | false,
});

getter/setter:

當設(shè)置或獲取對象的某個屬性的值的時候，可以提供getter/setter方法。

• getter 是一種獲得屬性值的方法
• setter是一種設(shè)置屬性值的方法。

在特性中使用get/set屬性來定義對應(yīng)的方法。

var obj = {};
var initValue = "hello";
Object.defineProperty(obj, "key", {
    get: function () {
        //當獲取值的時候觸發(fā)的函數(shù)
        return initValue;
    },
    set: function (value) {
        //當設(shè)置值的時候觸發(fā)的函數(shù),設(shè)置的新值通過參數(shù)value拿到
        initValue = value;
    },
});
//獲取值
console.log(obj.key); //hello

//設(shè)置值
obj.key = "change value";

console.log(obj.key); //change value

注意：get或set不是必須成對出現(xiàn)，任寫其一就可以。如果不設(shè)置方法，則get和set的默認值為undefined

4. 數(shù)據(jù)描述符和存取描述均具有以下描述符

• configrable 描述屬性是否配置，以及可否可以通過delete刪除(是否可配置)
  • 當我們之間在一個對象上定義某個屬性時, configrable默認為true
  • 當我們通過屬性描述符定義一個屬性時, configrable默認為false
• enumerable 描述屬性是否會出現(xiàn)在for in 或者 Object.keys()的遍歷中(是否枚舉)
  • 當我們之間在一個對象上定義某個屬性時, enumerable默認為true
  • 當我們通過屬性描述符定義一個屬性時, enumerable默認為false

1. configrable 代碼片段分析

configurable:false不能刪除屬性:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
});

console.log(delete Person.name); // Cannot delete property 'name' of #<Object>

configurable:false不能重新定義屬性:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
});

Object.defineProperty(Person, "name", {
    value: "rose", // Cannot redefine property: name
});

在configurable:false但writable為true`的情況下可以修改屬性值:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
    writable: true,
});

// 通過屬性定義的形式可以修改name的值
Object.defineProperty(Person, "name", {
    value: "rose",
});

console.log(Person.name); // rose

// 通過賦值的形式可以修改name的值
Person.name = 'zgc'
console.log(Person.name);

在configurable:true但writable為false的情況下可以通過屬性定義的形式可以修改name的值:

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: true,
    writable: false,
});

// 通過屬性定義的形式可以修改name的值
Object.defineProperty(Person, "name", {
    value: "rose",
});

console.log(Person.name); // rose

// 通過賦值的形式不可以修改, 因為writable為flse
Person.name = "zgc";
console.log(Person.name);

2. enumerable 代碼片段分析

let Person = {};
Object.defineProperty(Person, "name", {
    value: "Jack",
    configurable: false,
    writable: false, // 默認值
});

Person.gender = "male";

Object.defineProperty(Person, "age", {
    value: 24,
    enumerable: true,
});

console.log(Object.keys(Person)); // ['gender', 'age']
for (let k in Person) {
    console.log(k); // gender, age
}

注意：以下二種區(qū)別文章來源地址http://www.zghlxwxcb.cn/news/detail-487556.html

let Person = {};
Person.gender = "male";
// 等價于
Object.defineProperty(Person, "gender", {
    value: "male",
    configurable: true,
    enumerable: true,
    writable: true,
});

Object.defineProperty(Person, "age", {
    value: 24,
});
// 等價于
Object.defineProperty(Person, "age", {
    value: 24,
    configurable: false,
    enumerable: false,
    writable: false,
});

到了這里，關(guān)于JavaScript之Object.defineProperty()的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！