Ich wandle mich gerade von Java zu Javascript um, und es fällt mir ein bisschen schwer, herauszufinden, wie ich Objekte so erweitern kann, wie ich es möchte.

Ich habe mehrere Leute im Internet gesehen, die eine Methode namens "Erweitern auf Objekt" verwenden. Der Code sieht folgendermaßen aus:

var Person = {
   name : 'Blank',
   age  : 22
}

var Robot = Person.extend({
   name : 'Robo',
   age  : 4
)}

var robot = new Robot();
alert(robot.name); //Should return 'Robo'

Weiß jemand, wie man diese Arbeit macht? Ich habe gehört, dass Sie schreiben müssen

Object.prototype.extend = function(...);

Aber ich weiß nicht, wie ich dieses System zum Laufen bringen soll. Wenn dies nicht möglich ist, zeigen Sie mir bitte eine andere Alternative, die ein Objekt erweitert.

Sie möchten vom Prototypobjekt der Person "erben":

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

Welt ohne das "neue" Schlüsselwort.

Und einfachere "prosaähnliche" Syntax mit Object.create ().

* Dieses Beispiel wurde für ES6-Klassen aktualisiert.

Denken Sie zunächst daran, dass Javascript eine prototypische Sprache ist . Es ist nicht klassenbasiert. Daher enthüllt das Schreiben in prototypischer Form seine wahre Natur und kann sehr einfach, prosaartig und kraftvoll sein.

TLDR;

const Person = { name: 'Anonymous' } // person has a name

const jack = Object.create(Person)   // jack is a person
jack.name = 'Jack'                   // and has a name 'Jack'

Nein, Sie brauchen keine Konstruktoren, keine newInstanziierung ( lesen Sie, warum Sie sie nicht verwenden solltennew ), nein super, kein lustiger Witz __construct. Sie erstellen einfach Objekte und erweitern oder verwandeln sie dann.

( Wenn Sie sich mit Gettern und Setzern auskennen, lesen Sie den Abschnitt "Weiterführende Literatur", um zu erfahren, wie Sie mit diesem Muster kostenlose Getter und Setter erhalten, wie Javascript es ursprünglich beabsichtigt hatte, und wie leistungsfähig sie sind .)

Prosaähnliche Syntax: Basisprototyp

const Person = {

   //attributes
   firstName : 'Anonymous', 
   lastName: 'Anonymous',
   birthYear  : 0,
   type : 'human',

   //methods
   name() { return this.firstName + ' ' + this.lastName },
   greet() {
       console.log('Hi, my name is ' + this.name() + ' and I am a ' + this.type + '.' )
   },
   age() {
      // age is a function of birth time.
   }
}

const person = Object.create(Person). // that's it!

Sieht auf einen Blick gut lesbar aus.

Erweiterung, die einen Nachkommen von erstellt Person

* Die richtigen Begriffe sind prototypesund ihre descendants. Es gibt keine classesund keine Notwendigkeit für instances.

const Skywalker = Object.create(Person)
Skywalker.lastName = 'Skywalker'

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

Eine Möglichkeit, eine "Standard" -Methode zum Erstellen eines zu erstellen descendant, besteht darin, eine #createMethode anzuhängen :

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')

Die folgenden Möglichkeiten haben eine geringere Lesbarkeit:

Vergleichen Sie mit dem "klassischen" Äquivalent:

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')

Person.isPrototypeOf(anakin) // returns false!
Skywalker.isPrototypeOf(anakin) // returns false!

Die Lesbarkeit des Codes im "klassischen" Stil ist nicht so gut.

ES6-Klassen

Zugegeben, einige dieser Probleme werden von den ES6-Klassen beseitigt, aber dennoch:

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

Verzweigung des Basisprototyps

// create a `Robot` prototype by extending the `Person` prototype:
const Robot = Object.create(Person)
Robot.type = 'robot'
Robot.variant = '' // add properties for Robot prototype

Fügen Sie Methoden hinzu, die für Robot

// Robots speak in binaries, so we need a different greet function:
Robot.machineGreet = function() { /*some function to convert strings to binary */ }

// morphing the `Robot` object doesn't affect `Person` prototypes
anakin.greet() // 'Hi, my name is Anakin Skywalker and I am a human.'
anakin.machineGreet() // error

Vererbung überprüfen

Person.isPrototypeOf(Robot) // outputs true
Robot.isPrototypeOf(Skywalker) // outputs false

Sie haben schon alles, was Sie brauchen! Keine Konstruktoren, keine Instanziierung. Saubere, klare Prosa.

Weiterführende Literatur

Beschreibbarkeit, Konfigurierbarkeit und kostenlose Getter und Setter!

Für kostenlose Getter und Setter oder zusätzliche Konfigurationen können Sie das zweite Argument von Object.create () verwenden, auch bekannt als propertiesObject. Es ist auch in # Object.defineProperty und # Object.defineProperties verfügbar .

Um zu veranschaulichen, wie mächtig dies ist, möchten wir, dass alle Robotstreng aus Metall (via writable: false) bestehen und powerConsumptionWerte standardisieren (via Getter und Setter).

const Robot = Object.create(Person, {
    // define your property attributes
    madeOf: { 
        value: "metal",
        writable: false,
        configurable: false,
        enumerable: true
    },
    // getters and setters, how javascript had (naturally) intended.
    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.')
        }  
    }
})

const newRobot = Object.create(Robot)
newRobot.powerConsumption = '5MWh'
console.log(newRobot.powerConsumption) // outputs 5,000kWh

Und alle Prototypen von Robotkönnen nicht madeOfetwas anderes sein, weil writable: false.

const polymerRobot = Object.create(Robot)

polymerRobot.madeOf = 'polymer'

console.log(polymerRobot.madeOf) // outputs 'metal'

Mixins (mit # Object.assign) - Anakin Skywalker

Kannst du spüren, wohin das führt ...?

const darthVader = Object.create(anakin)
// for brevity, property assignments are skipped because you get the point by now.

Object.assign(darthVader, Robot)

Darth Vader erhält die Methoden von Robot:

darthVader.greet() // inherited from `Person`, outputs "Hi, my name is Darth Vader..."
darthVader.machineGreet() // inherited from `Robot`, outputs 001010011010...

Zusammen mit anderen seltsamen Dingen:

console.log(darthVader.type) // outputs robot.
Robot.isPrototypeOf(darthVader) // returns false.
Person.isPrototypeOf(darthVader) // returns true.

Nun, ob Darth Vader Mensch oder Maschine ist, ist in der Tat subjektiv:

"Er ist jetzt mehr Maschine als Mensch, verdreht und böse." - Obi Wan Kenobi

"Ich weiß, dass es gut in dir ist." - Luke Skywalker

Extra - Etwas kürzere Syntax mit # Object.assign

Höchstwahrscheinlich verkürzt dieses Muster Ihre Syntax. ES6 # Object.assign kann sich jedoch noch etwas verkürzen (Informationen zur Verwendung von Polyfill in älteren Browsern finden Sie unter MDN in ES6 ).

//instead of this
const Robot = Object.create(Person)
Robot.name = "Robot"
Robot.madeOf = "metal"

//you can do this
const Robot = Object.create(Person)
Object.assign(Robot, {
    name: "Robot",
    madeOf: "metal"
    // for brevity, you can imagine a long list will save more code.
})

Wenn Sie noch keinen Weg gefunden haben, verwenden Sie die assoziative Eigenschaft von JavaScript-Objekten, um der Object.prototypeunten gezeigten Funktion eine Erweiterungsfunktion hinzuzufügen .

Object.prototype.extend = function(obj) {
   for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
         this[i] = obj[i];
      }
   }
};

Sie können diese Funktion dann wie unten gezeigt verwenden.

var o = { member: "some member" };
var x = { extension: "some extension" };

o.extend(x);

Anderer Ansatz: Object.create

Per @ osahyoun-Antwort finde ich Folgendes als eine bessere und effizientere Möglichkeit, vom Prototypobjekt einer Person zu "erben":

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;

Neue Instanzen erstellen:

var person = new Person("Bob");
var robot = new Robot("Boutros");

person.info(); // Name: Bob Type: human
robot.info();  // Name: Boutros Type: robot

Verwenden Sie jetzt Object.create :

Person.prototype.constructor !== Robot

Überprüfen Sie auch die MDN- Dokumentation.

In ES6 können Sie Spread-Operatoren wie verwenden

var mergedObj = { ...Obj1, ...Obj2 };

Beachten Sie, dass Object.assign () Setter auslöst, während die Spread-Syntax dies nicht tut.

Weitere Informationen finden Sie unter dem Link MDN-Spread-Syntax

Alte Antwort:

In ES6 gibt es Object.assignzum Kopieren von Eigenschaftswerten. Verwendung {}als erster param , wenn Sie nicht das Zielobjekt (das erste param bestanden) ändern mögen.

var mergedObj = Object.assign({}, Obj1, Obj2);

Weitere Details finden Sie unter Link, MDN - Object.assign ()

Falls Sie eine Polyfill für ES5 benötigen , bietet der Link diese ebenfalls an. :) :)

Und ein weiteres Jahr später kann ich Ihnen sagen, dass es eine weitere nette Antwort gibt.

Wenn Ihnen die Funktionsweise des Prototyping zur Erweiterung von Objekten / Klassen nicht gefällt, lesen Sie Folgendes: https://github.com/haroldiedema/joii

Schneller Beispielcode für Möglichkeiten (und viele mehr):

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"

Menschen, die immer noch um den einfachen und besten Ansatz kämpfen, können Sie Spread Syntaxzum Erweitern von Objekten verwenden.

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);

Hinweis: Denken Sie daran, dass die am weitesten rechts liegende Eigenschaft Vorrang hat. In diesem Beispiel person2befindet sich auf der rechten Seite der newObjName Robo .

Möglicherweise möchten Sie eine Hilfsbibliothek wie underscore.js verwenden , deren eigene Implementierung vonextend() .

Und es ist auch eine gute Möglichkeit, anhand des Quellcodes zu lernen. Die kommentierte Quellcodepage ist sehr nützlich.

Mozilla "kündigt" Objekt an, das sich von ECMAScript 6.0 erstreckt:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends

HINWEIS: Dies ist eine experimentelle Technologie, die Teil des ECMAScript 6 (Harmony) -Vorschlags ist.

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;     } 
}

Diese Technologie ist in Gecko (Google Chrome / Firefox) verfügbar - 03/2015 Nightly Builds.

In den meisten Projekten gibt es eine Implementierung der Objekterweiterung: Unterstrich, Abfrage, Lodash: Erweitern .

Es gibt auch eine reine Javascript-Implementierung, die Teil von ECMAscript 6 ist: Object.assign : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Function.prototype.extends=function(ParentClass) {
    this.prototype = new ParentClass();
    this.prototype.constructor = this;
}

Dann:

function Person() {
    this.name = "anonym"
    this.skills = ["abc"];
}
Person.prototype.profile = function() {
    return this.skills.length // 1
};

function Student() {} //well extends fom Person Class
Student.extends(Person)

var s1 = new Student();
s1.skills.push("")
s1.profile() // 2

Update 01/2017:

Bitte ignorieren Sie meine Antwort von 2015, da Javascript jetzt das extendsSchlüsselwort seit ES6 unterstützt (Ecmasctipt6).

- ES6:

class Person {
   constructor() {
     this.name = "anonym"
     this.skills = ["abc"];
   }

   profile() {
    return this.skills.length // 1
   }

}

Person.MAX_SKILLS = 10;
class Student extends Person {


} //well extends from Person Class

//-----------------
var s1 = new Student();
s1.skills.push("")
s1.profile() // 2

- ES7:

class Person {
    static MAX_SKILLS = 10;
    name = "anonym"
    skills = ["abc"];

    profile() {
      return this.skills.length // 1
    }

}
class Student extends Person {


} //well extends from Person Class

//-----------------
var s1 = new Student();
s1.skills.push("")
s1.profile() // 2

Zusammenfassung:

Javascript verwendet einen Mechanismus, der als prototypische Vererbung bezeichnet wird . Die prototypische Vererbung wird verwendet, wenn eine Eigenschaft für ein Objekt gesucht wird. Wenn wir Eigenschaften in Javascript erweitern, erben wir diese Eigenschaften von einem tatsächlichen Objekt. Es funktioniert folgendermaßen:

1. Wenn eine Objekteigenschaft angefordert wird (z myObj.foo oder myObj['foo']), sucht die JS-Engine zuerst nach dieser Eigenschaft im Objekt selbst
2. Wenn diese Eigenschaft nicht für das Objekt selbst gefunden wird, wird die Prototypenkette auf das Prototypobjekt angehoben. Wenn diese Eigenschaft auch hier nicht gefunden wird, klettert sie die Prototypenkette weiter, bis die Eigenschaft gefunden wird. Wenn die Eigenschaft nicht gefunden wird, wird ein Referenzfehler ausgegeben.

Wenn wir von einem Objekt in Javascript aus erweitern möchten, können wir dieses Objekt einfach in der Prototypenkette verknüpfen. Es gibt zahlreiche Möglichkeiten, dies zu erreichen. Ich werde zwei häufig verwendete Methoden beschreiben.

Beispiele:

1. Object.create()

Object.create()ist eine Funktion, die ein Objekt als Argument verwendet und ein neues Objekt erstellt. Das Objekt, das als Argument übergeben wurde, ist der Prototyp des neu erstellten Objekts. Beispielsweise:

// prototype of the dog
const dogPrototype = {
  woof: function () { console.log('woof'); }
}

// create 2 dog objects, pass prototype as an argument
const fluffy = Object.create(dogPrototype);
const notFluffy = Object.create(dogPrototype);

// both newly created object inherit the woof 
// function from the dogPrototype
fluffy.woof();
notFluffy.woof();

2. Explizites Festlegen der Prototyp-Eigenschaft

Beim Erstellen von Objekten mit Konstruktorfunktionen können wir festlegen, dass der Prototyp-Objekteigenschaft Eigenschaften hinzugefügt werden. Bei Objekten, die bei Verwendung des newSchlüsselworts eine Konstruktorfunktion bilden , wird der Prototyp auf den Prototyp der Konstruktorfunktion gesetzt. Beispielsweise:

// Constructor function object
function Dog (name) {
   name = this.name;
}

// Functions are just objects
// All functions have a prototype property
// When a function is used as a constructor (with the new keyword)
// The newly created object will have the consturctor function's
// prototype as its prototype property
Dog.prototype.woof = function () {
  console.log('woof');
}

// create a new dog instance
const fluffy = new Dog('fluffyGoodBoyyyyy');
// fluffy inherits the woof method
fluffy.woof();

// can check the prototype in the following manner
console.log(Object.getPrototypeOf(fluffy));

Sie können es einfach tun, indem Sie:

Object.prototype.extend = function(object) {
  // loop through object 
  for (var i in object) {
    // check if the extended object has that property
    if (object.hasOwnProperty(i)) {
      // mow check if the child is also and object so we go through it recursively
      if (typeof this[i] == "object" && this.hasOwnProperty(i) && this[i] != null) {
        this[i].extend(object[i]);
      } else {
        this[i] = object[i];
      }
    }
  }
  return this;
};

Update: Ich habe für this[i] != nullda nullist ein Objekt

Dann benutze es wie folgt:

var options = {
      foo: 'bar',
      baz: 'dar'
    }

    var defaults = {
      foo: false,
      baz: 'car',
      nat: 0
    }

defaults.extend(options);

Dies führt zu:

// defaults will now be
{
  foo: 'bar',
  baz: 'dar',
  nat: 0
}

BITTE GRUND FÜR DOWNVOTE HINZUFÜGEN

• Zum Erweitern muss keine externe Bibliothek verwendet werden

• In JavaScript ist alles ein Objekt (mit Ausnahme der drei primitiven Datentypen, und selbst sie werden bei Bedarf automatisch mit Objekten umbrochen). Darüber hinaus sind alle Objekte veränderlich.

Klassenperson in JavaScript

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype = {
    getName: function() {
        return this.name;
    },
    getAge: function() {
        return this.age;
    }
}

/* Instantiate the class. */
var alice = new Person('Alice', 93);
var bill = new Person('Bill', 30);

Ändern Sie eine bestimmte Instanz / ein bestimmtes Objekt .

alice.displayGreeting = function() 
{
    alert(this.getGreeting());
}

Ändern Sie die Klasse

Person.prototype.getGreeting = function() 
{
    return 'Hi ' + this.getName() + '!';
};

Oder sagen Sie einfach: Erweitern Sie JSON und OBJECT. Beide sind gleich

var k = {
    name : 'jack',
    age : 30
}

k.gender = 'male'; /*object or json k got extended with new property gender*/

Dank Ross Schaden, Dustin Diaz

Dadurch können Sie Ihre Eigenschaften erweitern und ein neues Objekt mit den Objektparameter-Prototypen erstellen, ohne das übergebene Objekt zu ändern.

function extend(object) {
    if (object === null)
        throw TypeError;
    if (typeof object !== "object" && typeof object !== "function")
        throw TypeError;
    if (Object.create)
        return Object.create(object);
    function f() {}
    ;
    f.prototype = p;
    return new f();
}

Wenn Sie Ihr Objekt jedoch erweitern möchten, ohne die Parameter zu ändern, können Sie Ihrem Objekt expandProperty hinzufügen.

var Person{
//some code
extend: extendProperty
}

//Enforce type checking an Error report as you wish
    function extendProperty(object) {
        if ((object !== null && (typeof object === "object" || typeof object === "function"))){
            for (var prop in object) {
                if (object.hasOwnProperty(prop))
                    this[prop] = object[prop];
            }
        }else{
            throw TypeError; //Not an object
        }
    }

Prototyping ist ein guter Weg, aber Prototypen sind manchmal ziemlich gefährlich und können zu Fehlern führen. Ich ziehe es vor, dies in ein Basisobjekt zu kapseln, wie es Ember.js mit Ember.Object.extend und Ember.Object.reopen tut. Das ist viel sicherer zu bedienen.

Ich habe eine Übersicht darüber erstellt, wie Sie etwas Ähnliches wie Ember.Object einrichten würden.

Hier ist der Link: https://gist.github.com/WebCloud/cbfe2d848c80d4b9e9bd