将ES6类getter设置为可枚举

Question

我有一个带有getter属性的ES6类（用babeljs反编译）。我知道默认情况下这些属性不可枚举。但是，我不明白为什么我无法使用Object.defineProperty

使该属性可枚举

// Declare class
class Person {
  constructor(myName) {
    this.name = myName;
  }

  get greeting() {
    return `Hello, I'm ${this.name}`;
  }
}

// Make enumerable (doesn't work)
Object.defineProperty(Person, 'greeting', {enumerable: true});

// Create an instance and get enumerable properties
var person = new Person('Billy');
var enumerableProperties = Object.keys(person);
// => ['name']

Plunker Example

Answer 1

ES6样式的getter是在原型上定义的，而不是在每个person上定义的。要将greeting属性设置为可枚举，您需要更改：

// Make enumerable (doesn't work)
Object.defineProperty(Person, 'greeting', {enumerable: true});

要：

// Make enumerable
Object.defineProperty(Person.prototype, 'greeting', {enumerable: true});

Object.keys仅返回该对象的 拥有 可枚举属性，因此不会返回原型上的属性。您会在greeting或for...in循环中找到Object.keys( Object.getPrototypeOf( person ) )属性。 Updated Plunker

如果相反，您希望Person的每个实例都有自己的greeting，您可以在构造函数中定义它：

class Person {
  constructor(myName) {
    this.name = myName;

    Object.defineProperty( this, 'greeting', {
      enumerable: true,
      get: function ( ) { return `Hello, I'm ${this.name}`; }
    } );
  }
}

Updated Plunker

Answer 2

你可能会这样欺骗：

class Person {
  static createFields({ name }) {
    return {
      name,
      get greeting() {
        return `Hello, I'm ${this.name}`;
      }
    }
  }

  constructor(...args) {
    const inst = this.constructor.createFields(...args)
    const desc = Object.getOwnPropertyDescriptors(inst)
    Object.defineProperties(this, desc)
    return this
  }
}

好处是普通对象上的getter是可枚举的，默认情况下是可配置的，你不必每次都关心这些修饰符。

但是......它看起来有点奇怪）不确定这是否真的应该使用。

Answer 3

什么是课程？

类的非静态方法和访问器位于该类的原型上，因此该类的每​​个实例都将继承。您可以通过实例访问它们，但是它们不是实例本身的属性。静态方法和访问器位于类（它是一个函数）本身上。

class Test {
	#private_field = "A private field.";
	public_field = "A public field.";
	static get static_getter() {
		return "A static getter.";
	}
	static static_method() {
		return "A static method.";
	}
	get getter() {
		return "A non-static getter.";
	}
	method() {
		return "A non-static method.";
	}
}

console.log(`Class ("${typeof Test}" type)`, Object.getOwnPropertyDescriptors(Test));
console.log("Its prototype", Object.getOwnPropertyDescriptors(Test.prototype));
console.log("Its instance", Object.getOwnPropertyDescriptors(new Test));

Class ("function" type) {
    "length": {
        "value": 0,
        "writable": false,
        "enumerable": false,
        "configurable": true
    },
    "prototype": {
        "value": {……},
        "writable": false,
        "enumerable": false,
        "configurable": false
    },
    "static_getter": {
        "get": ƒ static_getter() {……},
        "set": undefined,
        "enumerable": false,
        "configurable": true
    },
    "static_method": {
        "value": ƒ static_method() {……},
        "writable": true,
        "enumerable": false,
        "configurable": true
    },
    "name": {
        "value": "Test",
        "writable": false,
        "enumerable": false,
        "configurable": true
    }
}

Its prototype {
    "constructor": {
        "value": class Test {……},
        "writable": true,
        "enumerable": false,
        "configurable": true
    },
    "getter": {
        "get": ƒ getter() {……},
        "set": undefined,
        "enumerable": false,
        "configurable": true
    },
    "method": {
        "get": ƒ method() {……},
        "writable": true,
        "enumerable": false,
        "configurable": true
    }
}

Its instance {
    "public_field": {
        "value": "A public field",
        "writable": true,
        "enumerable": true,
        "configurable": true
    }
}

---

如何设置可枚举的属性

您可以使用Object.defineProperty枚举非静态访问器（它们是原型的属性）。

class Person {
    constructor(name) {
        this.name = name;
    }
    get greeting() {
        return `Hello from ${this.name}.`;
    }
}
for(const property of ["greeting"]) {
    Object.defineProperty(Person.prototype, property, {enumerable: true});
}

但是这种方式几乎没有用，因为大多数有用的功能，例如Object.keys，Object.values，Object.entries，JSON.stringify等，请仅查找对象的自己属性。

---

将原型的属性归纳为实例

您还可以将原型的属性（复制）带到实例中。这样，它们不再从原型继承属性，而是将它们作为自己的属性。

class Person {
	constructor(name) {
		this.name = name;
		for(const property of ["greeting"]) {
			const descriptor = Object.getOwnPropertyDescriptor(Person.prototype, property);
			const modified_descriptor = Object.assign(descriptor, {enumerable: true});
			Object.defineProperty(this, property, modified_descriptor);
		}
	}
	get greeting() {
		return `Hello from ${this.name}.`;
	}
}

const alice = new Person("Alice");
console.log(alice.greeting);
console.log(JSON.stringify(alice));
console.log(Object.entries(alice));

---

将每个非静态getter引入实例，对其进行枚举。

const prototype = Object.getPrototypeOf(this);
const prototype_property_descriptors = Object.getOwnPropertyDescriptors(prototype);
for(const [property, descriptor] of Object.entries(prototype_property_descriptors)) {
    const is_nonstatic_getter = (typeof descriptor.get === "function");
    if(is_nonstatic_getter) {
        descriptor.enumerable = true;
        Object.defineProperty(this, property, descriptor);
    }
}