JavaScript：使用Object.defineProperties（）(JavaScript: Using Object.defineProperties())

JavaScript：使用Object.defineProperties（）(JavaScript: Using Object.defineProperties())

我正在尝试学习如何使用Object.defineProperties（）。 我正在使用以下代码：

var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; Object.defineProperties(Person, { sayHi : { get : function() {return "Hello";}, enumerable : true }, sayBye : { get : function() {return "Bye";}, enumerable : true } }); var john = new Person('John', 'Doe'); console.log(john.sayHi());

但我一直在：

TypeError: john.sayHi is not a function console.log(john.sayHi());

有人能告诉我这段代码有什么问题吗？

谢谢

I'm trying to learn how to use Object.defineProperties(). I'm using the following code:

var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; Object.defineProperties(Person, { sayHi : { get : function() {return "Hello";}, enumerable : true }, sayBye : { get : function() {return "Bye";}, enumerable : true } }); var john = new Person('John', 'Doe'); console.log(john.sayHi());

But I keep getting:

TypeError: john.sayHi is not a function console.log(john.sayHi());

Can someone tell me what is wrong with this code?

Thanks

最满意答案

好吧，你没有将sayHi定义为函数。 这是如何将其定义为函数：

var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; // Define the properties on the prototype, not the Person object itself Object.defineProperties(Person.prototype, { sayHi : { get : function() { return function() { return "Hello, I am " + this.firstName + " " + this.lastName; }; }, enumerable : true }, sayBye : { get : function() { return function() { return "Bye"; }; }, enumerable : true } }); var john = new Person('John', 'Doe'); console.log(john.sayHi()); console.log(john.sayBye());

确切地说：在你的代码中，john.sayHi返回“Hello”字符串，这是一个字符串原语，因此绝对不是函数;-)

属性的get函数必须返回一个函数才能实现您想要的效果。

为了给你一个更长的答案，请看下面的其他实现，充分利用两件事：首先是ES5（ Object.create() ）和ES6（ Object.defineProperties() ）的新特性以及JS的原型性质（否）使用new运算符，原型继承）：

var Person = { init: function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } }; Object.defineProperties(Person, { sayHi : { get : function() {return function() {return "Hello, I am " + this.firstName + " " + this.lastName;}}, enumerable : true }, sayBye : { get : function() {return function() {return "Bye";};}, enumerable : true } }); var Employee = Object.create(Person); // Employee inherits from Person Employee.init = function(firstName, lastName, position) { this.firstName = firstName; this.lastName = lastName; this.position = position; }; Object.defineProperties(Employee, { introduce : { get : function() {return function() { return this.sayHi() + ", " + this.position; }}, enumerable : true }, farewell : { get: function() {return function() { return this.sayBye() + ", it was a pleasure to meet you"; }}, enumerable: true } }); var john = Object.create(Employee); // john inherits from Employee john.init('John', 'Doe', 'Manager'); console.log(john.sayHi()); // Inherited from Person console.log(john.introduce()); // Inherited from Employee console.log(john.sayBye()); // Inherited from Person console.log(john.farewell()); // Inherited from Employee

JSFIddle演示

Well, you are not defining sayHi as a function. This is how to define it as a function:

var Person = function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; // Define the properties on the prototype, not the Person object itself Object.defineProperties(Person.prototype, { sayHi : { get : function() { return function() { return "Hello, I am " + this.firstName + " " + this.lastName; }; }, enumerable : true }, sayBye : { get : function() { return function() { return "Bye"; }; }, enumerable : true } }); var john = new Person('John', 'Doe'); console.log(john.sayHi()); console.log(john.sayBye());

To be precise: in your code, john.sayHi returns the "Hello" string, which is a string primitive, and therefore definitely not a function ;-)

The get function for the property must return a function in order to achieve what you want.

To give you a longer answer, see this following other implementation, taking fully advantage of two things: first the new features from ES5 (Object.create()) and ES6 (Object.defineProperties()) and the prototypal nature of JS (no use of new operator, prototypal inheritance):

var Person = { init: function(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } }; Object.defineProperties(Person, { sayHi : { get : function() {return function() {return "Hello, I am " + this.firstName + " " + this.lastName;}}, enumerable : true }, sayBye : { get : function() {return function() {return "Bye";};}, enumerable : true } }); var Employee = Object.create(Person); // Employee inherits from Person Employee.init = function(firstName, lastName, position) { this.firstName = firstName; this.lastName = lastName; this.position = position; }; Object.defineProperties(Employee, { introduce : { get : function() {return function() { return this.sayHi() + ", " + this.position; }}, enumerable : true }, farewell : { get: function() {return function() { return this.sayBye() + ", it was a pleasure to meet you"; }}, enumerable: true } }); var john = Object.create(Employee); // john inherits from Employee john.init('John', 'Doe', 'Manager'); console.log(john.sayHi()); // Inherited from Person console.log(john.introduce()); // Inherited from Employee console.log(john.sayBye()); // Inherited from Person console.log(john.farewell()); // Inherited from Employee

JSFIddle demo