JavaScript prototype chain, inheritance

Object Creation

javascript prototype we should be most familiar with, remember js new to say is the longest time, all things are subject, the amount of time I do not know, ah. . . Now I feel in talking about js say does have some truth, the importance of visible objects in js. There are several ways so good right ways to create objects:

Create a manner that the above objects: literal, constructors, Object.create ();

Prototype chain

Remember that project development in a colleague asked me a question, you tell me the prototype chain chant, Internet search Zhang graph, which I feel can interpret a link between a list of all relations, as well as a few who basically very clear:

// constructor === >> instance using the new operator generated 
// constructor generation prototype === >> point to the prototype object 
// prototype object how to know who directed himself === >> constructor through this thing point to build your own constructor. 
// instance === >> __proto__ points to the prototype object 
// so the prototype chain: is this a final prototype object layers found Object.prototype is a chain line structure. 
// For chestnut: 
const Fn = function () { 
    this.name = "My name GongXiaoZhu IS"; 
} 
fn.prototype.say = function () { 
    the console.log (this.name); 
} 
var new_fn new new Fn = (); 
new_fn .__ proto__ === fn.prototype // to true 
fn.prototype.constructor the Fn // to true ===

Chestnut sufficient to illustrate the relationship between the above-described prototype, constructor, an instance, the prototype chain. So for several methods commonly used to process, we can define the prototype object to the heap memory, each instance of the function we can get the process. Volume, written by the most complete map of inheritance: the following, this plan should understand the whole prototype chain on wood so what stuff.

inherit

1, with constructor inheritance

function Parent1() {
    this.name = "zhangsan"
}
function Child1() {
    Parent1.call(this);// apply
    this.age = 'Child1'
}
var children1 = new Child1();
console.log(children1)

此种继承方式呐，由于改变的 Parent1 指向，不能继承 Parent1 原型对象上的方法。只能实现部分继承。

2、组合继承方式

function Parent1() {
    this.name = "zhangsan"
    this.arr = [1,2,3]
}
Parent1.prototype = function getName() {
    console.log(this.name);
}
function Child1() {
    Parent1.call(this);
    this.age = 'Child1'
}
Child1.prototype = new Parent1();

var a1 = new Child1();
var a2 = new Child1();
a1.arr.push('4')
console.log(a1,a2)

从这里我们可以实现继承，但是还是有个弊端，Child1.prototype 对象指向的是Parent1.prototype,但是new Parent1() 的 constructor 指向的是 Parent1,所以我们可以直接Object.create(Parent1)这样既可。

function Parent1() {
    this.name = "zhangsan"
    this.arr = [1,2,3]
}
Parent1.prototype = function getName() {
    console.log(this.name);
}

function Child1() {
    Parent1.call(this);
    this.age = 'Child1'
}
Child1.prototype = Object.create(Parent1.prototype);
Child1.prototype.constructor = Child1;

var a1 = new Child1();
var a2 = new Child1();
a1.arr.push('4')
console.log(a1,a2)

这样就可以实现简单的继承，也希望能对您有所帮助，欢迎评论，关注，讨论技术可以关注掘金 https://juejin.im/user/5cd2a2356fb9a0320c5ac8ad。