Thừa kế đối tượng Javascript

Question

Vui lòng giúp tôi hiểu rõ đoạn mã này.

var person = { 
    'first-name': 'FirstName', 
    'last-name': 'LastName', 
    'gender': 'Male' 
}; 

var anotherPerson = new Object(person); 
anotherPerson.desig = 'Designation'; 

console.log('Another person designation: ' + anotherPerson['desig'] + ', person designation: ' + person['desig']); 

Tôi mong đợi đầu ra là Another person designation: Designation, person designation: undefined nhưng với sự ngạc nhiên của tôi, tôi thấy nó là `Another person designation: Designation, person designation: Designation.

Theo tôi anotherPerson được mở rộng person đối tượng và thuộc tính được đặt thành anotherPerson không được hiển thị cho đối tượng person. Tôi có sai ở đây không? Hoặc là cả hai đối tượng đang trỏ đến cùng một vị trí?

[EDIT]

Bây giờ thậm chí có những điều ngạc nhiên hơn.

Tôi đã thêm mã sau vào phần trên.

person.place = 'XYZ'; 
console.log(person['place'] + ', ' + anotherPerson['place']); // Expected: XYZ, undefined. Result: XYZ, XYZ. 

Dựa trên kết quả và câu trả lời ở trên Tôi nghĩ cả hai đối tượng đều đang đề cập đến cùng một vị trí. Bây giờ tôi đã thêm vài dòng hơn

person = undefined; 
console.log(anotherPerson['place']) //Expected: error, Result: XYZ. ??!?!? 
console.log(person['place']) // Expected: error, Result: error. 

Ai đó có thể ném một số ánh sáng trên tôi để hiểu được điều này? Nhờ sự giúp đỡ của bạn trước

Answer 1

Bạn không làm việc mở rộng hoặc bất kỳ loại thừa kế nào.

này đi kèm chặt chẽ hơn:

var Person = function() { 
    this["first-name"] = 'FirstName', 
    this["last-name"] = 'LastName', 
    this["gender"] = 'Male' 
}; 

var person = new Person(); 
var anotherPerson = new Person(); 

Bây giờ bạn có hai riêng biệt trường hợp của Person. Nếu bạn cũng muốn anotherPerson là một lớp con ..

var Person = function() { 
    this["first-name"] = 'FirstName', 
    this["last-name"] = 'LastName', 
    this["gender"] = 'Male' 
}; 

var AnotherPerson = function() { 
    this.desig = "Designation"; 
} 
AnotherPerson.prototype = new Person(); // inherit from Person 
AnotherPerson.prototype.constructor = AnotherPerson; // reset constructor 

var person = new Person(); 
var anotherPerson = new AnotherPerson(); 

console.log(person.desig); // undefined 
console.log(anotherPerson.desig); // Designation 

Answer 2

Không thực sự là một giải pháp, nhưng đối với tôi, đây là cách tôi sao chép một đối tượng trong một cách mà tôi có thể mở rộng nó:

var anotherPerson = new Object(); 
for(i in person) anotherPerson[i]=person[i]; 

Thay vì

var anotherPerson = new Object(person); 

Sau đó, nó hoạt động như mong đợi.

Answer 3

Các Object chức năng (lưu ý: tương tự, thậm chí nhiều startlingly nếu bạn không quen thuộc với những gì đang xảy ra, áp dụng cho gọi new Object(...)) không tạo ra một đối tượng mới nếu nó truyền một cái gì đó không phải là kiểu boolean, số hoặc chuỗi; nó chỉ trả về đối tượng đã tồn tại. (Lý do:. Vì nó đã là một đối tượng Hầu như tất cả mọi thứ là một đối tượng trong Javascript.)

Do đó, anotherPerson là đối tượng chính xác giống như person, vì vậy khi bạn sửa đổi nó, bạn sửa đổi person quá.

Tôi không cho rằng đây là hành vi hợp lý; nhưng đó là những gì các đặc tả ngôn ngữ xác định.

Answer 4

Nếu bạn muốn mở rộng/kế thừa một đối tượng sau đó bạn có thể làm

var person = { 
    'first-name': 'FirstName', 
    'last-name': 'LastName', 
    'gender': 'Male' 
}; 
if (typeof Object.create !== 'function') 
{ 
    Object.create=function(o) 
    { 
     function F(){} 
     F.prototype=o; 
     return new F(); 
    } 
} 
var newPerson=Object.create(person); 
newPerson.age=25; 
newPerson.gender="Female"; 

console.log(person.gender); // Male 
console.log(newPerson.gender); // Female 

console.log(person.age); // undefined 
console.log(newPerson.age); // 25 

Fiddle

tham khảo:Prototypal Inheritance in JavaScript

Answer 5

một giải pháp chung cho việc thực hiện kế thừa trong JavaScript

function inherits(base, extension) 
{ 
    for (var property in base) 
    { 
     try 
     { 
     extension[property] = base[property]; 
     } 
     catch(warning){} 
    } 
}