Vernacular to explain the inheritance of the core JS

[Introduction]

Recently, because of the need lectures, it involves the use of JavaScript in succession, but found that the students do not understand the encounter, not passing sentence, because more knowledge surrounding involved, it was decided to talk about the system, I briefly with a little diagrams to describe what is inherited. (Ignore students can not understand English)

Please ignore not read the word prototype, etc., you can see the change can affect future generations of ancestors, so it allows us to change one, the extra change, reduce workload and improve efficiency.

[Thinking] inheritance

Inheritance can be understood as generally set properties or a multi-function multiplex, then there are basically two sub way to achieve this function. 1: Prototype ancestors constructor, which is a reference to the template to create objects, all instances of the shared object is a property of the prototype and functions. 2: fathers constructor itself multiplexing, call the constructor ancestors descendants within the constructor, and therefore the implementation of the construction method fathers, so that children and grandchildren enjoy the ancestral construction process.

[Inheritance] Constructors

Focus is subclass call the parent class constructor to create objects

// 人类
function People () {
  this.description = '人类';
}
// 学生
function Student () {
// 调用People函数，改变this指向
  People.call(this);
}
var s = new Student();
s.description; // 人类

[Prototypal inheritance]

Key is a subclass uses the parent class prototype to share

// 人类
function People () {}
People.prototype.description = '人类';
var p = new People();
// 学生
function Student () {
}
// 原型继承
Student.prototype = People.prototype;
var s = new Student();
s.description; // 人类
p.description; // 人类

【problem appear】

We see the above example will bring a very simple question, and that is Student.prototype and People.prototype prototype is the same when we go to change any time a prototype, will affect instances of Student and People. Imagine People change affect Student Perhaps we also feel ok, but on the contrary, it does not feel right.

[Prototype: father inherited class instance]

We know that new parent () The result is a prototype and is closely related to the parent class, so in order to avoid Student.prototype and People.prototype is the same object, and the object new People () is created based on People.prototype come, so we use an instance of the parent class prototype instead, thereby avoiding the aforementioned problems

// 人类
function People () {
}
People.prototype.description = '人类';
// 学生
function Student () {
}
// 原型继承
Student.prototype = new People();
var s = new Student();
s.description; // 人类

[Portfolio] inheritance

But at the same time, we need to run a parent constructor to obtain additional properties, you need to use a combination of inherited way, that is the prototype inheritance [] + [] constructor inheritance

// 人类
function People (newProps) {
  this.newProps = newProps;
}
People.prototype.description = '人类';
// 学生
function Student () {
  // 调用父类构造函数
  People.call(this);
}
// 原型继承
Student.prototype = new People();
var s = new Student();
s.description; // 人类
s.newProps; // xxx

Here you might see a slight mistake

Because the parameters of the problem are not passed, this undefine a prototype that appears to look good, and we pass that value and it looks does not make sense, from a memory standpoint, we just need to prototype and not need to go constructor Yeah.

[New] object inheritance

// 人类
function People (newProps) {
  this.newProps = newProps;
}
People.prototype.description = '人类';
// 学生
function Student () {
  // 调用父类构造函数
  People.call(this);
}
// 原型继承
Student.prototype = Object.create(People.Prototype);
var s = new Student();
s.description; // 人类
s.newProps; // xxx

【to sum up】

JS Inheritance is divided into two lines that is two ideas:

1. The parent class constructor
2. The prototype example because a constructor that alone, we would not use the method for this.fn = function () {} to waste memory, which makes use of the prototype, the prototype has a problem of the same object points, thus creating a new object, then the object may need new parameters will result in a subclass prototype looks ugly, so we use Object.create (parent class prototype), at the same time, if the property in the parent class constructor we need, you also need combined call.