鍍金池/ 問(wèn)答/HTML/ js中對(duì)象的屬性特性(property attribute)和存取器特性(acc

js中對(duì)象的屬性特性(property attribute)和存取器特性(accessor attribute)的思考

最近在狂補(bǔ)js的底層知識(shí),在對(duì)象這一塊,基本所有書(shū)都用了一定的篇幅去介紹屬性特性和存取器特性

4種屬性特性

value, writable,enumerable, configurable

4種存取器特性

get set enumerable, configurable

那問(wèn)題來(lái)了,這些東西在實(shí)際開(kāi)發(fā)中有什么用呢

感覺(jué)如果涉及到自己編寫(xiě)框架,可能會(huì)用這寫(xiě)功能去做一些限制,但如果是其他用途,很難想到什么需要去diy這些屬性的地方,所以還想請(qǐng)大佬們指教

另,ES6里已經(jīng)有了proxy,那getter和setter還有什么用武之地嗎

回答
編輯回答
莓森
  1. 有什么用。
    我實(shí)際開(kāi)發(fā)中很少用這幾個(gè)屬性,但是并不意外著沒(méi)用。es 提供屬性特性,可以使對(duì)象操作的時(shí)候有更多的配置性。比如設(shè)置不可枚舉,不可改變,不可刪除的屬性。當(dāng)你遇到真實(shí)的場(chǎng)景,自然會(huì)派上用場(chǎng)。大可不必太糾結(jié)它在工作中的用場(chǎng)。
  2. get,set 跟 proxy 的理念是不同的。get, set 在面向?qū)ο缶幊讨惺潜容^重要的,算是提供了屬 性的接口,而上述的屬性則提供了屬性訪問(wèn)的安全性。這個(gè)在其他,比如 c 語(yǔ)言中都是有的,算是 js 豐富自己的語(yǔ)言的嚴(yán)謹(jǐn)性。get,set 的用處很多,比如 vue,mobx 就用它處理了依賴(lài)收集,這個(gè)我就不必多說(shuō)了,都是源碼解析。

    proxy 則是類(lèi)似于元編程的思想,什么是元編程?知乎看一下怎么理解元編程?。也就是說(shuō) proxy 可以做很多 get,set 做不了的事情,初衷以及維度、高度是不同的。比如 get 只能知道對(duì)象屬性被訪問(wèn)了,卻不能收到任何的參數(shù)。

2018年9月17日 15:42
編輯回答
朽鹿

可實(shí)現(xiàn)這樣的效果,傳送門(mén)
IFE傳送門(mén)

2017年11月19日 21:12
編輯回答
痞性

我是來(lái)圍觀的,因?yàn)槲乙膊欢@幾個(gè)東西,我只知道有些時(shí)候不希望循環(huán)遍歷到某個(gè)屬性(不屬于這個(gè)對(duì)象或不應(yīng)該被遍歷到)的時(shí)候,就會(huì)用到enumerable;

var arr = {}
Object.defineProperty(arr, "length", {
    get: function () {
        let n = 0;
        for (i in this) {
            n++;
        }
        return n;
    },
    enumerable: false, // 設(shè)置為不可枚舉
    configurable: false // 設(shè)置為不可配置
})

console.log(arr.length); // 0,length不可枚舉,getter里的for循環(huán)會(huì)跳過(guò)length這個(gè)屬性

arr.length = 1;
console.log(arr.length); // 0,length不可寫(xiě)

arr[0] = 1;
console.log(arr.length); // 1

Object.defineProperty(arr, "length", { enumerable: true })
// 報(bào)錯(cuò),length不可配置
2018年6月4日 03:30