javascript - 如何区分 getter 和 setter 以及 JavaScript 中的普通属性？

Question

如何以编程方式识别 ES5 中的 getter 和 setter 属性？

var o, descriptor, descriptorGetter, descriptorSetter;

o = { 
  foo: 'foo',
  get bar() {
    return 'bar';
  },
  set bam(value) {
    this._bam = value;
  },
};

descriptor = Object.getOwnPropertyDescriptor(o, 'foo');
descriptorGetter = Object.getOwnPropertyDescriptor(o, 'bar');
descriptorSetter = Object.getOwnPropertyDescriptor(o, 'bam');

console.log(JSON.stringify(descriptor));
console.log(JSON.stringify(descriptorGetter));
console.log(JSON.stringify(descriptorSetter));

打印:

{"value":"foo","writable":true,"enumerable":true,"configurable":true}
{"enumerable":true,"configurable":true}
{"enumerable":true,"configurable":true}

Answer 1

当您进行stringifying 时，您将丢失所有undefined 和Function 对象。相反，您可以检查返回的属性描述符对象是否具有未定义的 get 或 set 属性，并像这样决定

1. 如果属性描述符有一个value属性，它就是一个普通的数据属性。

2. 如果属性描述符有 get 和 set 属性，并且两者都有函数作为值，那么它是一个访问器属性。

3. 如果属性描述符将get 的值作为一个函数，那么它就是一个getter 属性。

4. 否则，一个 setter 属性。

---

因为 value 在那里，它是一个普通的数据属性:

descriptor.hasOwnProperty('value');
// true

这里，value 不存在，但是 get 属性是一个函数。所以一个 getter 属性:

descriptorGetter.hasOwnProperty('value');
// false
typeof descriptorGetter.get === 'function';
// true
typeof descriptorGetter.set === 'function';
// false

这里同样，value 不存在，但是 set 属性是一个函数。所以一个 setter 属性:

descriptorSetter.hasOwnProperty('value');
// false
typeof descriptorSetter.get === 'function';
// false
typeof descriptorSetter.set === 'function';
// true

---

除此之外，如果你有一个访问器属性，就像这样

var o = {
    get cabbage() {
        return 'cabbage';
    },
    set cabbage(value) {
        this._cabbage = value;
    },
};

descriptorCabbage = Object.getOwnPropertyDescriptor(o, 'cabbage');

console.log(descriptorCabbage.hasOwnProperty('value'));
// false
console.log(typeof descriptorCabbage.get === 'function');
// true
console.log(typeof descriptorCabbage.set === 'function');
// true

---

你可以把它写成一个函数，像这样

function getTypeOfProperty(object, property) {
    var desc = Object.getOwnPropertyDescriptor(object, property);

    if (desc.hasOwnProperty('value')) {
        return 'data';
    }

    if (typeof desc.get === 'function' && typeof desc.set === 'function') {
        return 'accessor';
    }

    return typeof desc.get === 'function' ? 'getter' : 'setter';
}

console.log(getTypeOfProperty(o, 'foo'));
// data
console.log(getTypeOfProperty(o, 'bar'));
// getter
console.log(getTypeOfProperty(o, 'bam'));
// setter
console.log(getTypeOfProperty(o, 'cabbage'));
// accessor