Saat ini saya mengubah dari Jawa ke Javascript, dan agak sulit bagi saya untuk mengetahui cara memperluas objek dengan cara yang saya inginkan.

Saya telah melihat beberapa orang di internet menggunakan metode yang disebut extended on object. Kode akan terlihat seperti ini:

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

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

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

Adakah yang tahu cara membuat ini bekerja? Saya pernah mendengar bahwa Anda perlu menulis

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

Tetapi saya tidak tahu bagaimana cara membuat sistem ini bekerja. Jika tidak memungkinkan, tolong tunjukkan saya alternatif lain yang memperluas objek.

Anda ingin 'mewarisi' dari objek prototipe Orang:

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

Dunia tanpa kata kunci "baru".

Dan sintaksis "prosa-seperti" yang lebih sederhana dengan Object.create ().

* Contoh ini diperbarui untuk kelas ES6.

Pertama, ingatlah bahwa Javascript adalah bahasa prototipe . Ini bukan berbasis kelas. Oleh karena itu, menulis dalam bentuk prototipe memperlihatkan sifat aslinya, dan bisa sangat sederhana, seperti prosa, dan kuat.

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'

Tidak, Anda tidak perlu konstruktor, tidak ada newInstansiasi ( baca mengapa Anda tidak boleh menggunakannew ), tidak super, tidak lucu lucu __construct. Anda cukup membuat Objek dan kemudian memperluas atau mengubah mereka.

( Jika Anda tahu tentang getter dan setter, lihat bagian "Bacaan lebih lanjut" untuk melihat bagaimana pola ini memberi Anda getter dan setter gratis dengan cara yang awalnya dimaksudkan untuk Javascript , dan seberapa kuat mereka .)

Sintaks yang mirip prosa: Protoype dasar

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!

Sekilas, terlihat sangat enak dibaca.

Extension, menciptakan keturunan Person

* Istilah yang benar adalah prototypes, dan mereka descendants. Tidak ada classes, dan tidak perlu 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

Salah satu cara untuk menyediakan cara "default" untuk menciptakan descendant, adalah dengan melampirkan #createmetode:

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

Cara di bawah ini memiliki keterbacaan yang lebih rendah:

Bandingkan dengan padanan "klasik":

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!

Keterbacaan kode menggunakan gaya "klasik" tidak begitu bagus.

Kelas ES6

Memang, beberapa masalah ini diberantas oleh kelas ES6, tetapi masih:

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

Percabangan prototipe dasar

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

Lampirkan metode yang unik untuk 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

Memeriksa warisan

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

Anda sudah mendapatkan semua yang Anda butuhkan! Tidak ada konstruktor, tidak ada Instansiasi. Prosa bersih, jelas.

Bacaan lebih lanjut

Ketelitian, Dapat Dikonfigurasi, dan Gratis Setter dan Setter!

Untuk getter dan setter gratis, atau konfigurasi tambahan, Anda dapat menggunakan argumen kedua Object.create () alias propertiesObject. Ini juga tersedia di # Object.defineProperty , dan # Object.defineProperties .

Untuk mengilustrasikan betapa kuatnya ini, misalkan kita ingin semua Robotterbuat dari logam (via writable: false), dan menstandarkan powerConsumptionnilai-nilai (via getter dan 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

Dan semua prototipe Robottidak bisa menjadi madeOfsesuatu yang lain karena writable: false.

const polymerRobot = Object.create(Robot)

polymerRobot.madeOf = 'polymer'

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

Mixins (menggunakan # Object.assign) - Anakin Skywalker

Bisakah Anda merasakan ke mana arahnya ...?

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

Object.assign(darthVader, Robot)

Darth Vader mendapatkan metode Robot:

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

Bersama dengan hal-hal aneh lainnya:

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

Ya, apakah Darth Vader adalah manusia atau mesin memang subjektif:

"Dia lebih mesin sekarang daripada manusia, bengkok dan jahat." - Obi-Wan Kenobi

"Aku tahu ada kebaikan di dalam dirimu." - Luke Skywalker

Extra - Sintaks sedikit lebih pendek dengan # Object.assign

Kemungkinan besar, pola ini mempersingkat sintaksis Anda. Tetapi ES6 # Object.assign dapat mempersingkat lebih banyak (Untuk polyfill untuk digunakan pada browser lama, lihat MDN pada 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.
})

Jika Anda belum menemukan cara, gunakan properti asosiatif objek JavaScript untuk menambahkan fungsi perluasan ke Object.prototypeseperti yang ditunjukkan di bawah ini.

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

Anda kemudian dapat menggunakan fungsi ini seperti yang ditunjukkan di bawah ini.

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

o.extend(x);

Pendekatan berbeda: Object.create

Per @osahyoun menjawab, saya menemukan yang berikut ini sebagai cara yang lebih baik dan efisien untuk 'mewarisi' dari objek prototipe 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;

Buat instance baru:

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

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

Sekarang, dengan menggunakan Object.create :

Person.prototype.constructor !== Robot

Periksa juga dokumentasi MDN .

Di ES6 , Anda dapat menggunakan spread operator like

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

Perhatikan bahwa Object.assign () memicu setter sedangkan sintaks penyebaran tidak.

Untuk info lebih lanjut, lihat tautan, Sintaksis Menyebar MDN

Jawaban lama:

Di ES6 , ada Object.assignuntuk menyalin nilai properti. Gunakan {}sebagai param pertama jika Anda tidak ingin memodifikasi objek target (param pertama berlalu).

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

Untuk detail lebih lanjut lihat tautan, MDN - Object.assign ()

Jika Anda membutuhkan Polyfill untuk ES5 , tautannya juga menawarkannya. :)

Dan setahun kemudian, saya bisa memberi tahu Anda ada jawaban yang bagus.

Jika Anda tidak menyukai cara kerja prototipe untuk memperluas objek / kelas, perhatikan hal ini: https://github.com/haroldiedema/joii

Contoh kode kemungkinan cepat (dan banyak lagi):

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"

Orang-orang yang masih berjuang untuk pendekatan sederhana dan terbaik, dapat Anda gunakan Spread Syntaxuntuk memperluas objek.

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

Catatan: Ingatlah bahwa, properti yang paling jauh ke kanan akan mendapat prioritas. Dalam contoh ini, person2ada di sisi kanan, jadi newObjakan ada nama Robo di dalamnya.

Anda mungkin ingin mempertimbangkan untuk menggunakan perpustakaan pembantu seperti underscore.js , yang memiliki implementasi sendiriextend() .

Dan ini juga cara yang bagus untuk belajar dengan melihat kode sumbernya. The kode sumber halaman dijelaskan cukup berguna.

Objek 'mengumumkan' Mozilla membentang dari ECMAScript 6.0:

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

CATATAN: Ini adalah teknologi eksperimental, bagian dari proposal 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;     } 
}

Teknologi ini tersedia di Gecko (Google Chrome / Firefox) - 03/2015 malam membangun.

Di sebagian besar proyek ada beberapa implementasi dari objek extending: garis bawah, jquery, lodash: memperpanjang .

Ada juga implementasi javascript murni, yang merupakan bagian dari ECMAscript 6: 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;
}

Kemudian:

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

Pembaruan 01/2017:

Tolong, Abaikan jawaban saya tahun 2015 karena Javascript sekarang mendukung extendskata kunci sejak ES6 (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

Ringkasan:

Javascript menggunakan mekanisme yang disebut pewarisan prototypal . Warisan prototipe digunakan ketika mencari properti pada objek. Saat kami memperluas properti dalam javascript, kami mewarisi properti ini dari objek yang sebenarnya. Ini bekerja dengan cara berikut:

1. Ketika properti objek diminta, (misalnya myObj.fooatau myObj['foo']) mesin JS pertama-tama akan mencari properti itu pada objek itu sendiri
2. Ketika properti ini tidak ditemukan pada objek itu sendiri, ia akan memanjat rantai melihat prototipe objek prototipe. Jika properti ini juga tidak ditemukan di sini, ia akan terus memanjat rantai prototipe sampai properti ditemukan. Jika properti tidak ditemukan maka akan menimbulkan kesalahan referensi.

Ketika kita ingin memperluas dari suatu objek dalam javascript kita cukup menautkan objek ini dalam rantai prototipe. Ada banyak cara untuk mencapai ini, saya akan menjelaskan 2 metode yang umum digunakan.

Contoh:

1. Object.create()

Object.create()adalah fungsi yang mengambil objek sebagai argumen dan membuat objek baru. Objek yang dilewatkan sebagai argumen akan menjadi prototipe objek yang baru dibuat. Sebagai contoh:

// 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. Secara eksplisit mengatur properti prototipe

Saat membuat objek menggunakan fungsi konstruktor, kita dapat mengatur properti tambah ke properti objek prototipe. Objek yang dibuat membentuk fungsi konstruktor saat menggunakan newkata kunci, mengatur prototipe ke prototipe fungsi konstruktor. Sebagai contoh:

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

Anda cukup melakukannya dengan menggunakan:

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

pembaruan: Saya memeriksa this[i] != nullkarena nullmerupakan objek

Kemudian gunakan seperti:

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

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

defaults.extend(options);

Ini juga menghasilkan:

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

TOLONG TAMBAH ALASAN UNTUK DOWNVOTE

• Tidak perlu menggunakan perpustakaan eksternal untuk memperluas

• Dalam JavaScript, semuanya adalah objek (kecuali untuk tiga tipe data primitif, dan bahkan mereka secara otomatis dibungkus dengan objek saat diperlukan). Selanjutnya, semua objek bisa berubah.

Orang Kelas dalam 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);

Ubah instance / objek tertentu .

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

Ubah kelas

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

Atau cukup katakan: memperpanjang JSON dan OBJECT keduanya sama

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

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

terima kasih untuk kerusakan ross, dustin diaz

Ini akan membuat memperluas properti Anda membuat Objek baru dengan prototipe parameter objek tanpa mengubah objek yang dikirimkan.

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

Tetapi jika Anda ingin memperluas Objek Anda tanpa memodifikasi parameternya, Anda dapat menambahkan extendedProperty ke objek Anda.

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 adalah cara yang baik, tetapi prototipe kadang-kadang cukup berbahaya dan dapat menyebabkan bug. Saya lebih suka merangkum ini menjadi objek dasar, seperti yang dilakukan Ember.js untuk itu Ember.Object.extend dan Ember.Object.reopen. Itu jauh lebih aman untuk digunakan.

Saya membuat inti dengan bagaimana Anda akan mengatur sesuatu yang mirip dengan apa yang digunakan Ember.Object.

Inilah tautannya: https://gist.github.com/WebCloud/cbfe2d848c80d4b9e9bd