JavaScript之Object.defineProperty()

1. 物件的定義與賦值

經常使用的定義與賦值方法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()的作用就是直接在一個物件上定義一個新屬性，或者修改一個已經存在的屬性

Object.defineProperty(obj, prop, desc)

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

一般通過為物件的屬性賦值的情況下，物件的屬性可以修改也可以洗掉，但是通過Object.defineProperty()定義屬性，通過描述符的設定可以進行更精準的控制物件屬性，

3. 屬性的特性以及內部屬性

javacript 有三種型別的屬性

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

4. 屬性描述符

通過Object.defineProperty()為物件定義屬性，有兩種形式，且不能混合使用，分別為資料描述符，存取描述符，下面分別描述下兩者的區別：

1. 資料描述符 --特有的兩個屬性（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

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

2. 存取描述符 --是由一對 getter、setter 函式功能來描述的屬性

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

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

set：一個給屬性提供setter的方法，如果沒有setter則為undefined，該方法將接受唯一引數，并將該引數的新值分配給該屬性，默認值為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. 存取器描述

當使用存取器描述屬性的特性的時候，允許設定以下特性屬性：

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

getter/setter:

當設定或獲取物件的某個屬性的值的時候，可以提供getter/setter方法，

• getter 是一種獲得屬性值的方法
• setter是一種設定屬性值的方法，

在特性中使用get/set屬性來定義對應的方法，

var obj = {};
var initValue = "https://www.cnblogs.com/pigke/archive/2023/06/17/hello";
Object.defineProperty(obj, "key", {
    get: function () {
        //當獲取值的時候觸發的函式
        return initValue;
    },
    set: function (value) {
        //當設定值的時候觸發的函式,設定的新值通過引數value拿到
        initValue = https://www.cnblogs.com/pigke/archive/2023/06/17/value;
    },
});
//獲取值
console.log(obj.key); //hello

//設定值
obj.key ="change value";

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

注意：get或set不是必須成對出現，任寫其一就可以，如果不設定方法，則get和set的默認值為undefined

4. 資料描述符和存取描述均具有以下描述符

• configrable 描述屬性是否配置，以及可否可以通過delete洗掉(是否可配置)
  • 當我們之間在一個物件上定義某個屬性時, configrable默認為true
  • 當我們通過屬性描述符定義一個屬性時, configrable默認為false
• enumerable 描述屬性是否會出現在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
}

注意：以下二種區別

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,
});

標籤：其他

上一篇：基于uniapp+vite4+vue3搭建跨端專案|uni-app+uview-plus模板

下一篇：返回列表