Several ways to inherit JS prototype

Source: Internet
Author: User

1. Prototype chain inheritance

2, constructor Inheritance (object impersonation Inheritance)

3, combination inheritance (prototype chain inheritance + constructor inheritance)

4, prototype-type inheritance

5. Parasitic combined inheritance

One. Prototype chain inheritance

function Show () {
This.name= "Run";
}

function Run () {
This.age= "20"; Run inherits show, forms a chain through prototypes.
}
Run.prototype=new Show ();
var show=new Run ();
Alert (show.name)//Result: Run

Two. Constructor inheritance (object impersonation Inheritance)

To solve the problem of reference sharing and super type not being able to pass parameters, we use a technique called borrowing constructors, or
to address both of these issues by becoming an object masquerading (forgery, classic inheritance)

function Box (age) {
this.name=[' Lee ', ' Jack ', ' Hello '
This.age=age;
}
function Desk (age) {
Box.call (This,age); Object impersonating, giving the super type a parameter
}
var desk = new Desk (200);
alert (desk.age);//200
alert (desk.name);//[' Lee ', ' Jack ', ' Hello ']
Desk.name.push (' AAA '); New data added, only for desk
Alert (desk.name)//[' Lee ', ' Jack ', ' Hello ', ' AAA ']

Three. Combinatorial inheritance (prototype chain inheritance + constructor inheritance)

Although the borrowing of constructors solves just two kinds of problems, there is no prototype, and reuse is impossible to talk about. Therefore, we need to
To prototype chains + borrow a constructor's schema, this pattern becomes a composite inheritance.

function Box (age) {
THIS.name = [' Lee ', ' Jack ', ' Hello ']
This.age = age;
}
Box.prototype.run = function () {
return this.name + this.age;
};
function Desk (age) {
Box.call (this, age); Object Impersonation
}
Desk.prototype = new Box (); Prototype chain inheritance
var desk = new Desk (100);
Alert (Desk.run ());

Four. Prototype inheritance

This inheritance uses prototypes and creates new objects based on existing objects.
You do not have to create a custom type

function obj (o) {//pass a literal function
function F () {}//Create a constructor
F.prototype = O; Assigning a literal function to a prototype of a constructor
return new F (); Finally returns the instantiated constructor
}
var box = {//literal object
Name: ' Lee ',
Arr: [' elder brother ', ' sister ', ' sister ']
};
var box1 = obj (box); Passed
alert (box1.name);
Box1.name = ' Jack ';
alert (box1.name);
alert (Box1.arr);
Box1.arr.push (' parents ');
alert (Box1.arr);
var box2 = obj (box); Passed
alert (box2.name);
alert (Box2.arr); The reference type shares the

Five. Parasitic combined inheritance

Parasitic combined inheritance solves the problem of two calls, and the combined inheritance will have two calls.

The basic model is as follows:

function Object (o) {function F () {} f.prototype = O; return new F ();  function Inheritprototype (subtype, supertype) {var prototype = object (Supertype.prototype);              Create Object prototype.constructor = subtype;                Enhanced object subtype.prototype = prototype; Specify Object}

Behind the parasitic inheritance and parasitic combination model inheritance still do not understand, hahaha, good embarrassed

Parasitic combination inheritance, resolves the two-time call problem


Several ways to inherit JS prototype

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.