在各种浏览器中得到广泛支持的最安全的创建原型链的方法是什么？

Question

So I'm still learning JavaScript, and I'm working with prototypes right now. The lesson I just completed showed me how to use __proto__ to create prototype inheritance chains. Here's an example of what I mean:

function Person(firstName,lastName,dob){
  this.firstName = firstName;
  this.lastName = lastName;
  this.dob = new Date(dob);
}
Person.prototype = {
  constructor: Person,
  getFullName: function(){
    return this.firstName + " " + this.lastName;
  },
  getAge: function(){
    var ageDiff = Date.now() - this.dob;
    var ageDiffDate = new Date(ageDiff);
    return Math.abs(ageDiffDate.getUTCFullYear() - 1970);
  }
}

function Employee(firstName,lastName,dob,position,dept){
  this.firstName = firstName;
  this.lastName = lastName;
  this.dob = new Date(dob);
  this.position = position;
  this.dept = dept;
  this.isFired = false;
}
Employee.prototype = {
  constructor: Employee,
  __proto__: Person.prototype,
  doWork: function(){
    console.log(this.getFullName() + " is doing work");
  }
}

function Manager(firstName,lastName,dob,dept){
  this.firstName = firstName;
  this.lastName = lastName;
  this.dob = new Date(dob);
  this.position = "Manager";
  this.dept = dept;
}
Manager.prototype = {
  constructor: Manager,
  __proto__: Employee.prototype,
  fireEmployee: function(emp){
    emp.isFired = true;
    console.log(this.getFullName() + " has fired " + emp.getFullName());
  }
}

var per = new Person("Bob","Saget","1990-02-05");
var emp = new Employee("Jane","Doe","1980-05-02","Clerk","Sales");
var mgr = new Manager("Jim","Smith","1970-09-10","Sales");

Employee inherits from Person.prototype , and Manager inherits from Employee.prototype . Nice and simple.

However, I've read that the __proto__ property isn't guaranteed across all web browsers, since ES6 hasn't been widely adopted yet. I've been scanning the internet, trying to find a clear explanation of what to do instead, and I'm getting a little bit lost.

What is the safe, broadly supported way of setting prototype inheritance chains in ES5, other than using __proto__ ?

Answer 1

The safest way is using standard ES5 and above approaches.

function A() {}

function B() {}
B.prototype = Object.create(A.prototype);

Answer 2

Quoting from MDN :

The use of __proto__ is controversial, and has been discouraged. It was never originally included in the EcmaScript language spec, but modern browsers decided to implement it anyway. Only recently, the __proto__ property has been standardized in the ECMAScript 6 language specification for web browsers to ensure compatibility, so will be supported into the future. It is deprecated in favor of Object.getPrototypeOf / Reflect.getPrototypeOf and Object.setPrototypeOf / Reflect.setPrototypeOf (though still, setting the [[Prototype]] of an object is a slow operation that should be avoided if performance is a concern).

Please also consider the warning concerning performance

Warning : Changing the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, a very slow operation, in every browser and JavaScript engine. (...)

If you don't mind the performance implications or just want to experiment with prototypes, the article Inheritance and the prototype chain gives an excellent introduction on how the prototype chain in JS works. I'll quote the part that mentions the three different ways to create custom prototype chains here:

With a constructor

A "constructor" in JavaScript is "just" a function that happens to be called with the new operator .

 function Graph() { this.vertices = []; this.edges = []; } Graph.prototype = { addVertex: function(v){ this.vertices.push(v); } }; var g = new Graph(); console.log("g:", Object.keys(g)) console.log("g.prototype:", Object.keys(Object.getPrototypeOf(g))) 

With Object.create

ECMAScript 5 introduced a new method: Object.create(). Calling this method creates a new object. The prototype of this object is the first argument of the function:

 var a = {a: 1}; // a ---> Object.prototype ---> null var b = Object.create(a); // b ---> a ---> Object.prototype ---> null console.log(ba); // 1 (inherited) var c = Object.create(b); // c ---> b ---> a ---> Object.prototype ---> null var d = Object.create(null); // d ---> null console.log(d.hasOwnProperty); // undefined, because d doesn't inherit from Object.prototype 

With the class keyword

ECMAScript 6 introduced a new set of keywords implementing classes. Although these constructs look like those familiar to developers of class-based languages, they are not the same. JavaScript remains prototype-based. The new keywords include class, constructor, static, extends, and super.

 "use strict"; class Polygon { constructor(height, width) { this.height = height; this.width = width; } } class Square extends Polygon { constructor(sideLength) { super(sideLength, sideLength); } get area() { return this.height * this.width; } set sideLength(newLength) { this.height = newLength; this.width = newLength; } } var square = new Square(2); 

Conclusion

I'd agree with Matias' answer and recommend using Object.create , because it does not hide the prototypal nature of JavaScript - in contrast to constructors or ES6 classes.