将ES6类getter设置为可枚举

问题描述 投票:22回答:2

我有一个带有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

javascript ecmascript-6 babeljs es2015
2个回答
35
投票

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只返回该对象自己的可枚举属性,因此不返回原型上的属性。您将在greetingObject.keys( Object.getPrototypeOf( person ) )循环中找到for...in属性。 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


0
投票

你可能会这样欺骗:

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是可枚举的并且默认情况下是可配置的,您不必每次都关心这些修饰符。

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


0
投票

什么是课程?

类的非静态方法和访问器位于类的原型上,以便它的每个实例都继承它们。您可以通过实例访问它们,但它们不是实例的属性。静态方法和访问器位于类(这是一个函数)本身。

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.keysObject.valuesObject.entriesJSON.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);
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.