No Result
View All Result
CloudReports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner
No Result
View All Result
CloudReports
No Result
View All Result
Home Javascript

Javascript Inheritance – 6 inheritance methods in Javascript

LilyTheValley by LilyTheValley
July 11, 2019
in Javascript
Reading Time: 4 mins read
0
0
SHARES
548
VIEWS
Share on FacebookShare on Twitter

Contents

  • 1 READ ALSO
  • 2 Configuring VS Code for Node/JavaScript Development
  • 3 How does Nodejs solve the problem of high concurrency?
  • 4 1. Prototype chain inheritance
  • 5 2. Borrow constructor
  • 6 3. Combined inheritance
  • 7 4. Prototype inheritance
  • 8 5. Parasitic inheritance
  • 9 6. Parasitic combination inheritance
  • 10 Reference
Rate this post

Javascript Inherited operations need to have a parent class, let’s start with a prototype based constructor

READ ALSO

Configuring VS Code for Node/JavaScript Development

Configuring VS Code for Node/JavaScript Development

August 2, 2021
809
How does Nodejs solve the problem of high concurrency?

How does Nodejs solve the problem of high concurrency?

July 18, 2021
888
function Person(name){
    this.name = name;
}
Person.prototype.job = 'frontend';
Person.prototype.sayHello = function() {
    console.log('Hello '+this.name);
}
var person = new Person('jia ming');
person.sayHello();

1. Prototype chain inheritance

function Child() {
    this.name = 'child';
}
Child.prototype = new Person();
var child = new Child();
console.log(child.job); 


console.log(child instanceof Person); 

Key point: subclass prototype is equal to instance of parent class Child.prototype = new Person()

Features:

  1. The properties that an instance can inherit are the properties of the constructor of the instance, the properties of the constructor of the parent class, and the properties on the prototype of the parent class. (The new instance does not inherit the properties of the parent instance)

Note:

  1. A new instance cannot pass the argument to parent class constructor
  2. Single Inheritance
  3. All new instances share the properties of the parent class instance. (Properties on the prototype are shared, one instance modifies the prototype properties, and the prototype properties of the other instance are also modified)

2. Borrow constructor

function Child() {
    Person.call(this, 'reng');
}
var child = new Child();
console.log(child.name); 
console.log(child instanceof Person); 
child.sayHello(); 

The key point: use call or apply to introduce the parent class constructor into the subclass function (self-execution (copy) of the parent class function in the subclass function) Person.call(this, ‘reng’)

Features:

  1. Only inherits the properties of the parent class constructor, does not inherit the properties of the parent class prototype
  2. Solved Prototype chain inheritance disadvantages: 1, 2, 3
  3. Can inherit the properties of multiple constructors (calls can be multiple)
  4. You can pass arguments to the parent instance in a child instance.

Note:

  1. Can only inherit the properties of the parent class constructor
  2. The multiplexing of constructors cannot be implemented. (recall every time you use it)
  3. Each new instance has a copy of the constructor, bloated

3. Combined inheritance

Combination inheritance is a combination of Prototype chain inheritance and Borrowing constructor inheritance.

function Child(name) {
    Person.call(this, name);
}
Child.prototype = new Person();
var child = new Child('jia');
child.sayHello(); 
console.log(child instanceof Person); 

Key point: Combine the advantages of the two modes – call and reuse to the parent class

Features:

  1. Can inherit the attributes on the parent class prototype, can pass parameters, can be reused
  2. The constructor property introduced by each new instance is private

Note:

  1. Called the parent class’s constructor twice (memory)
  2. The subclass’s constructor replaces the parent class constructor on the prototype (call is equivalent to getting a copy of the parent class constructor)

4. Prototype inheritance

function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}
var super0 = new Person();
var super1 = object(super0);
console.log(super1 instanceof Person); 
console.log(super1.job);

The key point: wrap an object with a function, and then return the call to this function, this function becomes an instance or object that can directly add attributes

Features:

  1. Similar to copying an object, wrapping it with a function

Note:

  1. All instances inherit the properties on the prototype
  2. Unable to implement multiplexing. (new instance properties are added later)

The Object.create() method specifies prototypal inheritance. This method takes two arguments, one as the object for the new object prototype and (optionally) an object that defines additional properties for the new object.

var anotherPerson = Object.create(new Person());
console.log(anotherPerson.job); 
console.log(anotherPerson instanceof Person); 
var anotherPerson = Object.create(new Person(), {
    name: {
        value: 'come on'
    }
});
anotherPerson.sayHello(); 

5. Parasitic inheritance

function object(obj) {
    function F(){}
    F.prototype = obj;
    return new F();
}
var sup = new Person();

function subobject(obj) {
    var sub = object(obj);
    sub.name = 'ming';
    return sub;
}
var sup2 = subobject(sup);

console.log(sup2.name); 
console.log(sup2 instanceof Person); 

The key point is to put a shell on the prototype inheritance.

ADVERTISEMENT

Features:

  1. I didn’t create a custom type, because I just put a shell and returned the object. This function is a newly created object.

Note:

  1. No prototypes, no reuse

6. Parasitic combination inheritance

It is the same as Combined Inheritance.

Parasitic: return the object within the function and then call

Combination:

  1. The prototype of the function is equal to another instance
  2. Introduce another constructor with apply or call in the function
function object(obj) {
    function F(){}
    F.prototype = obj;
    return new F();
}

var obj = object(Person.prototype);




function Sub() {
    this.age = 100;
    Person.call(this); 
} 


Sub.prototype = obj;
console.log(Sub.prototype.constructor); 
obj.constructor = Sub; 
console.log(Sub.prototype.constructor); 
var sub1 = new Sub();

console.log(sub1.job); 
console.log(sub1 instanceof Person); 

Focus: Fixed a problem with combinatorial inheritance

In the above question, you may have found such a comment obj.constructor = Sub; Why correct the pointer to the constructor of the subclass?

Because when you do not correct this pointer, when you get the constructor return, it may cause confusion when calling the same name property or method value. For example below:

function Car() { }
Car.prototype.orderOneLikeThis = function() {  
    return new this.constructor();
}
Car.prototype.advertise = function () {
    console.log("I am a generic car.");
}

function BMW() { }
BMW.prototype = Object.create(Car.prototype);
BMW.prototype.constructor = BMW;              
BMW.prototype.advertise = function () {
    console.log("I am BMW with lots of uber features.");
}

var x5 = new BMW();

var myNewToy = x5.orderOneLikeThis();

myNewToy.advertise();

Reference

JavaScript Advanced Programming

Reng 99 Blog

Tags: Borrow constructorCombined inheritanceJavascript InheritanceParasitic combination inheritanceParasitic inheritancePrototype chain inheritancePrototype inheritance
ShareTweetShare
Previous Post

Will CSS loading blocked the rendering?

Next Post

ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]

LilyTheValley

LilyTheValley

Related Posts

Configuring VS Code for Node/JavaScript Development
Javascript

Configuring VS Code for Node/JavaScript Development

August 2, 2021
809
How does Nodejs solve the problem of high concurrency?
Javascript

How does Nodejs solve the problem of high concurrency?

July 18, 2021
888
Npm module: a backdoor and ambush questions
Javascript

Npm module: a backdoor and ambush questions

December 16, 2020
191
NPM: three packets contained malicious code
Javascript

NPM: three packets contained malicious code

December 16, 2020
73
25 years of JavaScript: the programming language that makes the world go round
Javascript

25 years of JavaScript: the programming language that makes the world go round

December 16, 2020
226
The story of migrating 70,000 lines of JavaScript code to TypeScript
Javascript

The story of migrating 70,000 lines of JavaScript code to TypeScript

December 15, 2020
280
Next Post
ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]

ReactJs Setup tutorial for Beginner – ReactJs tutorial [P1]

Discussion about this post

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • App/Game (2)
  • Javascript (16)
  • Layout and Routing (2)
  • Linux (9)
  • PC & LAPTOP (6)
  • PERSONAL FINANCES (1)
  • React (13)
  • SQL (2)
  • TECHNOLOGY & DIGITAL (7)
  • The Basics (5)
  • Web development (37)

Search

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • App/Game (2)
  • Javascript (16)
  • Layout and Routing (2)
  • Linux (9)
  • PC & LAPTOP (6)
  • PERSONAL FINANCES (1)
  • React (13)
  • SQL (2)
  • TECHNOLOGY & DIGITAL (7)
  • The Basics (5)
  • Web development (37)
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • QR Code Scanner