Interviewer asked: Inheritance of JS

Hello everyone , I am a

If Chuan

.

In order to help more interested in the source code 、 Want to learn to read the source code 、 Students who improve their front-end technical ability

. I tried my best to organize recently

Source code co reading activity

, Three months have passed , Let's exchange and study together , Common progress , Many people said they had gained a lot .

This is the fifth in the interviewer's question series , Designed to help readers improve

JS

Basic knowledge of , contain

new、call、apply、this、 Inherit

Related knowledge .<br>

Interviewer asks series

The article is as follows ： Interested readers can click to read .<br>1.

Interviewer asked ： Can we simulate it JS Of new The operator

<br>2.

Interviewer asked ： Can we simulate it JS Of bind Method

<br>3.

Interviewer asked ： Can we simulate it JS Of call and apply Method

<br>4.

Interviewer asked ：JS Of this Point to

<br>5.

Interviewer asked ：JS Inheritance

<br>

Used to

React

Our readers know , Frequently used

extends

Inherit

React.Component

.

//  Part of the source code
function Component(props, context, updater) {
 // ...
}
Component.prototype.setState = function(partialState, callback){
 // ...
}
const React = {
 Component,
 // ...
}
//  Use
class index extends React.Component{
 // ...
}


Click here  React github Source code

The interviewer can follow this question

JS

Issues related to inheritance , such as ：

ES6

Of

class

For inheritance ES5 How to achieve

. It is said that many people don't answer well .<br/>

Constructors 、 The relationship between prototype objects and instances

To understand extends Before inheritance , Let's review the constructor first 、 The relationship between prototype objects and instances . Code representation ：

function F(){}
var f = new F();
//  Constructors
F.prototype.constructor === F; // true
F.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

//  example
f.__proto__ === F.prototype; // true
F.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true


The author drew a picture to show ：

ES6 extends

  What does inheritance do

Let's take a look at this paragraph containing static methods

ES6

Inherit code ：

// ES6
class Parent{
 constructor(name){
 this.name = name;
 }
 static sayHello(){
 console.log('hello');
 }
 sayName(){
 console.log('my name is ' + this.name);
 return this.name;
 }
}
class Child extends Parent{
 constructor(name, age){
 super(name);
 this.age = age;
 }
 sayAge(){
 console.log('my age is ' + this.age);
 return this.age;
 }
}
let parent = new Parent('Parent');
let child = new Child('Child', 18);
console.log('parent: ', parent); // parent: Parent {name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child: Child {name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18


There are two prototype chains in this code , If you don't believe it, look at the specific code .

// 1、 Constructor prototype chain
Child.__proto__ === Parent; // true
Parent.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true
// 2、 Instance prototype chain
child.__proto__ === Child.prototype; // true
Child.prototype.__proto__ === Parent.prototype; // true
Parent.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true


A picture is worth a thousand words , The author also drew a picture to show , As shown in the figure ：

Combined with code and diagram, you can know .

ES6 extends

  Inherit , Mainly ：

• Subclass constructor (
  Child
  ) The prototype of the (
  __proto__
  ) Points to the parent constructor (
  Parent
  ),

• Subclass instances
  child
  Prototype object (
  Child.prototype
  )  The prototype of the (
  __proto__
  ) Points to the parent class
  parent
  Prototype object (
  Parent.prototype
  ).

These two points are the two lines marked with different colors in the figure .

• Subclass constructor
  Child
  Inherits the parent constructor
  Parent
  Properties in . Use
  super
  Called (
  ES5
  Then use
  call
  perhaps
  apply
  Call parameters ). That is, the two lines marked with different colors in the figure .

seen 《JavaScript Advanced programming - The first 3 edition 》  chapter

6.3 Inherit

Our readers should know , this

2 and 3 Smaller

, It is

Parasitic combinatorial inheritance

, There are no examples in the book

The first 1 Smaller

.

1 and 2 Smaller

It's all relative to the setting

__proto__

link . That's the question , What can be set

__proto__

What about links .

new

、

Object.create

and

Object.setPrototypeOf

You can set

__proto__

Explain ,

__proto__

This writing method is the browser manufacturer's own implementation . Combine the following figure with the code to see

new

,

new

Out of the examples __proto__ To the constructor

prototype

, This is it.

new

Do the things . Extract a paragraph from a previous article .

Interviewer asked ： Can we simulate it JS Of new The operator

, Interested readers can click to view .

new

What did you do ：

• A new object is created .

• This object will be executed
  [[Prototype]]
  （ That is to say
  __proto__
  ） link .

• The generated new object is bound to the function call
  this
  .

• adopt
  new
  Each object created will eventually be
  [[Prototype]]
  Linked to this function
  prototype
  On the object .

• If the function does not return an object type
  Object
  ( contain
  Functoin
  , 
  Array
  , 
  Date
  , 
  RegExg
  , 
  Error
  ), that
  new
  The function call in the expression automatically returns the new object .

Object.create

 

ES5 Provided

Object.create(proto, [propertiesObject])

Method creates a new object , Using an existing object to provide a newly created object __proto__. It takes two parameters , But the second optional parameter is the property descriptor （ Not commonly used , The default is

undefined

）. For not supporting

ES5

Browser ,

MDN

I have provided

ployfill

programme .

MDN Object.create()

//  A short edition ： It is also the application of new Will be set __proto__ The principle of linking .
if(typeof Object.create !== 'function'){
 Object.create = function(proto){
 function F() {}
 F.prototype = proto;
 return new F();
 }
}


Object.setPrototypeOf

 

ES6 Provided

Object.setPrototypeOf

 

MDN

Object.setPrototypeOf()

  Method to set the prototype of a specified object  (  namely ,  Inside

[[Prototype]]

attribute ） To another object or  

null

.

Object.setPrototypeOf(obj, prototype)

`ployfill`
//  Only applicable to Chrome and FireFox, stay IE Not working in ：
Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
 obj.__proto__ = proto;
 return obj;
}


nodejs

The source code is to use this tool function to realize inheritance .

nodejs utils inherits

function inherits(ctor, superCtor) {
 if (ctor === undefined || ctor === null)
 throw new ERR_INVALID_ARG_TYPE('ctor', 'Function', ctor);

 if (superCtor === undefined || superCtor === null)
 throw new ERR_INVALID_ARG_TYPE('superCtor', 'Function', superCtor);

 if (superCtor.prototype === undefined) {
 throw new ERR_INVALID_ARG_TYPE('superCtor.prototype',
 'Object', superCtor.prototype);
 }
 Object.defineProperty(ctor, 'super_', {
 value: superCtor,
 writable: true,
 configurable: true
 });
 Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
}


ES6

Of

extends

Of

ES5

Version implementation

got it

ES6 extends

What operations and settings are done by inheritance

__proto__

After the knowledge point of , Top up

ES6

Examples are used

ES5

It's easier to achieve , in other words

Implement parasitic combinatorial inheritance

, The simple code is ：

// ES5  Realization ES6 extends Example
function Parent(name){
 this.name = name;
}
Parent.sayHello = function(){
 console.log('hello');
}
Parent.prototype.sayName = function(){
 console.log('my name is ' + this.name);
 return this.name;
}

function Child(name, age){
 //  amount to super
 Parent.call(this, name);
 this.age = age;
}
// new
function object(){
 function F() {}
 F.prototype = proto;
 return new F();
}
function _inherits(Child, Parent){
 // Object.create
 Child.prototype = Object.create(Parent.prototype);
 // __proto__
 // Child.prototype.__proto__ = Parent.prototype;
 Child.prototype.constructor = Child;
 // ES6
 // Object.setPrototypeOf(Child, Parent);
 // __proto__
 Child.__proto__ = Parent;
}
_inherits(Child, Parent);
Child.prototype.sayAge = function(){
 console.log('my age is ' + this.age);
 return this.age;
}
var parent = new Parent('Parent');
var child = new Child('Child', 18);
console.log('parent: ', parent); // parent: Parent {name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child: Child {name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18


We can put the above

ES6 Example

adopt

babeljs

Transcoding into

ES5

Check it out. , More rigorous implementation .

//  The converted code is briefly commented
"use strict";
//  It mainly supports the current environment Symbol And don't support Symbol Of typeof Handle
function _typeof(obj) {
 if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
 _typeof = function _typeof(obj) {
 return typeof obj;
 };
 } else {
 _typeof = function _typeof(obj) {
 return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
 };
 }
 return _typeof(obj);
}
// _possibleConstructorReturn  Judge Parent.call(this, name) Function return value   Is it null Or functions or objects .
function _possibleConstructorReturn(self, call) {
 if (call && (_typeof(call) === "object" || typeof call === "function")) {
 return call;
 }
 return _assertThisInitialized(self);
}
//  how  self  yes void 0 （undefined）  False report
function _assertThisInitialized(self) {
 if (self === void 0) {
 throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
 }
 return self;
}
//  obtain __proto__
function _getPrototypeOf(o) {
 _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
 return o.__proto__ || Object.getPrototypeOf(o);
 };
 return _getPrototypeOf(o);
}
//  The core of parasitic combinatorial inheritance
function _inherits(subClass, superClass) {
 if (typeof superClass !== "function" && superClass !== null) {
 throw new TypeError("Super expression must either be null or a function");
 }
 // Object.create() Method creates a new object , Using an existing object to provide a newly created object __proto__.
 //  That is to say, after implementation  subClass.prototype.__proto__ === superClass.prototype;  This sentence is true
 subClass.prototype = Object.create(superClass && superClass.prototype, {
 constructor: {
 value: subClass,
 writable: true,
 configurable: true
 }
 });
 if (superClass) _setPrototypeOf(subClass, superClass);
}
//  Set up __proto__
function _setPrototypeOf(o, p) {
 _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
 o.__proto__ = p;
 return o;
 };
 return _setPrototypeOf(o, p);
}
// instanceof The operator contains a pair of Symbol To deal with
function _instanceof(left, right) {
 if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
 return right[Symbol.hasInstance](left);
 } else {
 return left instanceof right;
 }
}

function _classCallCheck(instance, Constructor) {
 if (!_instanceof(instance, Constructor)) {
 throw new TypeError("Cannot call a class as a function");
 }
}
//  According to their attribute descriptors   Assign methods and static properties to the constructor prototype And constructor functions
function _defineProperties(target, props) {
 for (var i = 0; i < props.length; i++) {
 var descriptor = props[i];
 descriptor.enumerable = descriptor.enumerable || false;
 descriptor.configurable = true;
 if (&quot;value&quot; in descriptor) descriptor.writable = true;
 Object.defineProperty(target, descriptor.key, descriptor);
 }
}
//  Assign methods and static properties to the constructor prototype And constructor functions
function _createClass(Constructor, protoProps, staticProps) {
 if (protoProps) _defineProperties(Constructor.prototype, protoProps);
 if (staticProps) _defineProperties(Constructor, staticProps);
 return Constructor;
}

// ES6
var Parent = function () {
 function Parent(name) {
 _classCallCheck(this, Parent);
 this.name = name;
 }
 _createClass(Parent, [{
 key: &quot;sayName&quot;,
 value: function sayName() {
 console.log('my name is ' + this.name);
 return this.name;
 }
 }], [{
 key: &quot;sayHello&quot;,
 value: function sayHello() {
 console.log('hello');
 }
 }]);
 return Parent;
}();

var Child = function (_Parent) {
 _inherits(Child, _Parent);
 function Child(name, age) {
 var _this;
 _classCallCheck(this, Child);
 // Child.__proto__ => Parent
 //  So it's equivalent to Parent.call(this, name);  yes super(name) A transformation of
 // _possibleConstructorReturn  Judge Parent.call(this, name) Function return value   Is it null Or functions or objects .
 _this = _possibleConstructorReturn(this, _getPrototypeOf(Child).call(this, name));
 _this.age = age;
 return _this;
 }
 _createClass(Child, [{
 key: &quot;sayAge&quot;,
 value: function sayAge() {
 console.log('my age is ' + this.age);
 return this.age;
 }
 }]);
 return Child;
}(Parent);

var parent = new Parent('Parent');
var child = new Child('Child', 18);
console.log('parent: ', parent); // parent: Parent {name: &quot;Parent&quot;}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child: Child {name: &quot;Child&quot;, age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18


If the JS Readers who still don't understand about inheritance , It is recommended to read the relevant chapters of the following books , You can find the corresponding

pdf

edition .

Recommended reading JS Inherit relevant book chapters

《JavaScript Advanced programming section 3 edition 》- The first 6 Chapter   Object oriented programming ,6 An inheritance scheme , They are prototype chain inheritance 、 Inheritance by borrowing the constructor 、 Combination inheritance 、 Original pattern inheritance 、 Parasitic inheritance 、 Parasitic combinatorial inheritance .

Turing community book address

, Later release

github

link , It contains these inherited codes

demo

.

《JavaScript Object oriented programming 2 edition 》- The first 6 Chapter   Inherit ,12 An inheritance scheme .1. Prototype chain method （ Imitation tradition ）、2. Only inherit from prototype 、3. Temporary constructors 、4. Prototype property copy method 、5. All attribute copy method （ Shallow copy method ）、6. Deep copy method 、7. Archetypal inheritance 、8. Expansion and enhancement mode 、9. Multiple inheritance law 、10. Parasitic inheritance law 、11. Constructors borrow 、12. Constructor borrowing and attribute copying .

ES6 Introduction to the standard - The first 21 Chapter class Inheritance

《 In depth understanding of

ES6

》- The first 9 Chapter

 

JavaScript

Class in

《 You don't know

JavaScript

- Scroll up 》 The first 6 Chapter   Act entrustment and appendix A 

ES6 Medium class

summary

Inheritance for JS In other words, it is the methods and properties owned by the parent class 、 Static method, etc , Subclasses should also have . Subclasses can use the prototype chain to find , You can also call the parent class in a subclass , Or copy a copy from the parent class to the child class . There can be many inheritance methods , The point is that you must understand and be familiar with these objects 、 How prototypes and constructors work , The rest is simple .

Parasitic combinatorial inheritance

Developers use more . Review parasitic combinatorial inheritance . Mainly three points ：

• Of the subclass constructor
  __proto__
  Point to the parent class constructor , Inherit the static methods of the parent class .

• Of the subclass constructor
  prototype
  Of
  __proto__
  Point to the parent class constructor
  prototype
  , Methods that inherit the parent class .

• Call the parent constructor in the subclass constructor , Inherit the properties of the parent class . Here we go , The article is basically finished . Resources such as article code and pictures are put here
  github inhert
  and
  demo

  Exhibition

  es6-extends
  , combination
  console、source
  Panel view is better .

The reader finds something wrong or can be improved , Welcome to comment . In addition, I think it's well written , Like it 、 Comment on 、 forward , It is also a kind of support for the author .

Finally, you can continue to pay attention to me  @ If Chuan . Welcome to communicate with me , Participate in  

Source code read together

  Activities , We study together every week  200  Lines of source code , Common progress .