我目前正在从Java转向Javascript，但我很难弄清楚如何按照我所希望的方式扩展对象。
我在互联网上看到过几个人使用一种叫做extend的方法来扩展对象。代码看起来像这样：
var Person = {
name : 'Blank',
age : 22
}
var Robot = Person.extend({
name : 'Robo',
age : 4
)}
var robot = new Robot();
alert(robot.name); //Should return 'Robo'
有人知道如何让这个工作吗？我听说需要编写
Object.prototype.extend = function(...);
但我不知道如何让这个系统工作。如果不可能，请告诉我另一个扩展对象的替代方案。
你想要从Person的原型对象中继承：
var Person = function (name) {
this.name = name;
this.type = 'human';
};
Person.prototype.info = function () {
console.log("Name:", this.name, "Type:", this.type);
};
var Robot = function (name) {
Person.apply(this, arguments);
this.type = 'robot';
};
Robot.prototype = Person.prototype; // Set prototype to Person's
Robot.prototype.constructor = Robot; // Set constructor back to Robot
person = new Person("Bob");
robot = new Robot("Boutros");
person.info();
// Name: Bob Type: human
robot.info();
// Name: Boutros Type: robot
new Robot()时，Person()构造函数是如何被调用的？在我的看法中，你应该调用基类构造函数而不是在Robot()构造函数中执行this.name = name;... - Alexis WilkePerson.apply(this, arguments);。同时最好使用 Robot.prototype = Object.create(Person.prototype); 而不是 new Person();。 - Felix Kling*此示例已更新为ES6类和TypeScript。
首先，JavaScript是一种原型语言，而不是基于类的。它的真正本质在下面的原型形式中得以表达，你可能会发现它非常简单、类似散文，但却非常强大。
const Person = {
name: 'Anonymous', // person has a name
greet() { console.log(`Hi, I am ${this.name}.`) }
}
const jack = Object.create(Person) // jack is a person
jack.name = 'Jack' // and has a name 'Jack'
jack.greet() // outputs "Hi, I am Jack."
Person原型的子类时进行扩展。一个名为politeGreet的变异显示了在子类jack上附加新方法的示例。interface IPerson extends Object {
name: string
greet(): void
}
const Person: IPerson = {
name: 'Anonymous',
greet() {
console.log(`Hi, I am ${this.name}.`)
}
}
interface IPolitePerson extends IPerson {
politeGreet: (title: 'Sir' | 'Mdm') => void
}
const PolitePerson: IPolitePerson = Object.create(Person)
PolitePerson.politeGreet = function(title: string) {
console.log(`Dear ${title}! I am ${this.name}.`)
}
const jack: IPolitePerson = Object.create(Person)
jack.name = 'Jack'
jack.politeGreet = function(title): void {
console.log(`Dear ${title}! I am ${this.name}.`)
}
jack.greet() // "Hi, I am Jack."
jack.politeGreet('Sir') // "Dear Sir, I am Jack."
const Skywalker = Object.create(Person)
Skywalker.lastName = 'Skywalker'
Skywalker.firstName = ''
Skywalker.type = 'human'
Skywalker.greet = function() { console.log(`Hi, my name is ${this.firstName} ${this.lastName} and I am a ${this.type}.`
const anakin = Object.create(Skywalker)
anakin.firstName = 'Anakin'
anakin.birthYear = '442 BBY'
anakin.gender = 'male' // you can attach new properties.
anakin.greet() // 'Hi, my name is Anakin Skywalker and I am a human.'
Person.isPrototypeOf(Skywalker) // outputs true
Person.isPrototypeOf(anakin) // outputs true
Skywalker.isPrototypeOf(anakin) // outputs true
#create方法：Skywalker.create = function(firstName, gender, birthYear) {
let skywalker = Object.create(Skywalker)
Object.assign(skywalker, {
firstName,
birthYear,
gender,
lastName: 'Skywalker',
type: 'human'
})
return skywalker
}
const anakin = Skywalker.create('Anakin', 'male', '442 BBY')
Person原型分支到Robot当你将Robot派生自Person原型时，不会影响Skywalker和anakin：
// create a `Robot` prototype by extending the `Person` prototype:
const Robot = Object.create(Person)
Robot.type = 'robot'
Robot独有的附加方法。Robot.machineGreet = function() {
/*some function to convert strings to binary */
}
// Mutating the `Robot` object doesn't affect `Person` prototype and its descendants
anakin.machineGreet() // error
Person.isPrototypeOf(Robot) // outputs true
Robot.isPrototypeOf(Skywalker) // outputs false
Person接口：interface Robot extends Person {
machineGreet(): void
}
const Robot: Robot = Object.create(Person)
Robot.machineGreet = function() { console.log(101010) }
const darthVader = Object.create(anakin)
// for brevity, property assignments are skipped because you get the point by now.
Object.assign(darthVader, Robot)
darthVader.greet() // inherited from `Person`, outputs "Hi, my name is Darth Vader..."
darthVader.machineGreet() // inherited from `Robot`, outputs 001010011010...
console.log(darthVader.type) // outputs robot.
Robot.isPrototypeOf(darthVader) // returns false.
Person.isPrototypeOf(darthVader) // returns true.
这个优雅地反映了“现实生活”主观性：
“他现在更像机器而不是人，扭曲而邪恶。” - 奥比-旺·克诺比
“我知道你内心有善良。” - 卢克·天行者
function Person (firstName, lastName, birthYear, type) {
this.firstName = firstName
this.lastName = lastName
this.birthYear = birthYear
this.type = type
}
// attaching methods
Person.prototype.name = function() { return firstName + ' ' + lastName }
Person.prototype.greet = function() { ... }
Person.prototype.age = function() { ... }
function Skywalker(firstName, birthYear) {
Person.apply(this, [firstName, 'Skywalker', birthYear, 'human'])
}
// confusing re-pointing...
Skywalker.prototype = Person.prototype
Skywalker.prototype.constructor = Skywalker
const anakin = new Skywalker('Anakin', '442 BBY')
// #isPrototypeOf won't work
Person.isPrototypeOf(anakin) // returns false
Skywalker.isPrototypeOf(anakin) // returns false
与使用对象相比稍显笨重，但代码可读性还可以：
class Person {
constructor(firstName, lastName, birthYear, type) {
this.firstName = firstName
this.lastName = lastName
this.birthYear = birthYear
this.type = type
}
name() { return this.firstName + ' ' + this.lastName }
greet() { console.log('Hi, my name is ' + this.name() + ' and I am a ' + this.type + '.' ) }
}
class Skywalker extends Person {
constructor(firstName, birthYear) {
super(firstName, 'Skywalker', birthYear, 'human')
}
}
const anakin = new Skywalker('Anakin', '442 BBY')
// prototype chain inheritance checking is partially fixed.
Person.isPrototypeOf(anakin) // returns false!
Skywalker.isPrototypeOf(anakin) // returns true
可写性、可配置性和自由的获取器和设置器！
对于自由的获取器和设置器，或者额外的配置，您可以使用Object.create()的第二个参数，也称为propertiesObject。它也可以在#Object.defineProperty和#Object.defineProperties中使用。
为了说明它的有用性，假设我们希望所有的机器人都严格由金属制成（通过writable: false），并标准化powerConsumption的值（通过获取器和设置器）。
// Add interface for Typescript, omit for Javascript
interface Robot extends Person {
madeOf: 'metal'
powerConsumption: string
}
// add `: Robot` for TypeScript, omit for Javascript.
const Robot: Robot = Object.create(Person, {
// define your property attributes
madeOf: {
value: "metal",
writable: false, // defaults to false. this assignment is redundant, and for verbosity only.
configurable: false, // defaults to false. this assignment is redundant, and for verbosity only.
enumerable: true // defaults to false
},
// getters and setters
powerConsumption: {
get() { return this._powerConsumption },
set(value) {
if (value.indexOf('MWh')) return this._powerConsumption = value.replace('M', ',000k')
this._powerConsumption = value
throw new Error('Power consumption format not recognised.')
}
}
})
// add `: Robot` for TypeScript, omit for Javascript.
const newRobot: Robot = Object.create(Robot)
newRobot.powerConsumption = '5MWh'
console.log(newRobot.powerConsumption) // outputs 5,000kWh
Robot的原型都不能由其他材料制成：
const polymerRobot = Object.create(Robot)
polymerRobot.madeOf = 'polymer'
console.log(polymerRobot.madeOf) // outputs 'metal'
Object.assign(Robot, {a:1} 是否是你的extend()方法的好替代品？
2）如何重写greet()方法，使其返回相同的文本，但附加了“ a greet override”？ - Barry Staes#Object.assign 看起来是一个不错的替代方案。但目前浏览器支持较低。__proto__ 属性来访问其原型的 greet 函数。然后你调用原型 greet 函数并传入调用者的作用域。在这种情况下，函数是一个控制台日志，所以无法“附加”。但通过这个例子，我想你可以理解。skywalker.greet = function() { this.__proto__.greet.call(this); console.log('a greet override'); }Object.prototype中。Object.prototype.extend = function(obj) {
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
this[i] = obj[i];
}
}
};
你可以像下面展示的那样使用此函数。
var o = { member: "some member" };
var x = { extension: "some extension" };
o.extend(x);
在ES6中，您可以使用展开运算符，例如：
var mergedObj = { ...Obj1, ...Obj2 };
旧答案：
在ES6中，有Object.assign用于复制属性值。如果您不想修改目标对象（传递的第一个参数），请使用{}作为第一个参数。
var mergedObj = Object.assign({}, Obj1, Obj2);
了解更多详情请查看链接，MDN - Object.assign()
如果你需要的是 ES5 的 Polyfill ，该链接也提供了相应内容。 :)
根据 @osahyoun 的回答，我发现以下是从 Person 的原型对象“继承”的更好和更有效的方式:
function Person(name){
this.name = name;
this.type = 'human';
}
Person.prototype.info = function(){
console.log("Name:", this.name, "Type:", this.type);
}
function Robot(name){
Person.call(this, name)
this.type = 'robot';
}
// Set Robot's prototype to Person's prototype by
// creating a new object that inherits from Person.prototype,
// and assigning it to Robot.prototype
Robot.prototype = Object.create(Person.prototype);
// Set constructor back to Robot
Robot.prototype.constructor = Robot;
创建新实例：
var person = new Person("Bob");
var robot = new Robot("Boutros");
person.info(); // Name: Bob Type: human
robot.info(); // Name: Boutros Type: robot
Person.prototype.constructor !== Robot
请查看MDN的文档。
再过一年，我可以告诉你还有另一个好的答案。
如果您不喜欢通过原型扩展对象/类的方式进行原型设计，请看看这个：https://github.com/haroldiedema/joii
以下是可能性的快速示例代码（以及更多）：
var Person = Class({
username: 'John',
role: 'Employee',
__construct: function(name, role) {
this.username = name;
this.role = role;
},
getNameAndRole: function() {
return this.username + ' - ' + this.role;
}
});
var Manager = Class({ extends: Person }, {
__construct: function(name)
{
this.super('__construct', name, 'Manager');
}
});
var m = new Manager('John');
console.log(m.getNameAndRole()); // Prints: "John - Manager"
对于那些仍在寻找简单且最佳方法的人，您可以使用Spread Syntax扩展对象。
var person1 = {
name: "Blank",
age: 22
};
var person2 = {
name: "Robo",
age: 4,
height: '6 feet'
};
// spread syntax
let newObj = { ...person1, ...person2 };
console.log(newObj.height);注意: 请记住，最右边的属性具有优先级。在此示例中，person2 在右侧，因此 newObj 中将有名称为 Robo 的属性。
_.extend()的工作原理示例说明得非常清楚: http://lostechies.com/chrismissal/2012/10/05/extending-objects-in-underscore/ - Lemmings19Mozilla宣布从ECMAScript 6.0中扩展对象：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends
注意：这是实验性技术，属于ECMAScript 6（Harmony）提案的一部分。
class Square extends Polygon {
constructor(length) {
// Here, it calls the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// Note: In derived classes, super() must be called before you
// can use 'this'. Leaving this out will cause a reference error.
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.area = value; }
}
extend函数感到好奇，我在这里设置了一个示例：http://jsfiddle.net/k9LRd/ - Codrin Eugeniu