JS 2 ways to inherit the detailed _javascript skills

Source: Internet
Author: User

JS can be divided into two types of inheritance: Object impersonation and prototype chain mode

One, the object impersonate includes three kinds : temporary attribute way, call () and apply () way
1. Temporary Property mode

Copy Code code as follows:

function person (name) {
THIS.name = name;
This.say = function () {
Alert (' My name is ' +this.name);
}
}
function f2e (name,id) {
This.temp = person;
This.temp (name);
Delete this.temp;
This.id = ID;
This.showid = function () {
Alert (' Good morning,sir,my work number is ' +this.id);
}
}
var simon = new f2e (' Simon ', 9527);
Simon.say ();
Simon.showid ();

2.call ()/apply () method
Essentially, it changes the point of the this pointer
Copy Code code as follows:

function person (name) {
THIS.name = name;
This.say = function () {
Alert (' My name is ' +this.name);
}
}
function f2e (name,id) {
Person.call (This,name); The Apply () method is changed to Person.apply (This,new Array (name));
This.id = ID;
This.showid = function () {
Alert (' Good morning,sir,my work number is ' +this.id);
}
}
var simon = new f2e (' Simon ', 9527);
Simon.say ();
Simon.showid ();

Disadvantage: First look at this memory allocation diagram:

In the OO concept, when new is instantiated, the object forms its own space in the heap memory, notably the code snippet. The member method is the code snippet, and the method is shared. The problem is here, when inheriting by object impersonation, all member methods point to this, that is, after new, each instance will have this member method, not shared, causing a lot of memory waste. And by the way the object is impersonating, the variables and methods defined by the prototype method cannot be inherited, as the following code will error:

Copy Code code as follows:

function person (name) {
THIS.name = name;
This.say = function () {
Alert (' My name is ' +this.name);
}
}
Person.prototype.age = 20;
Person.prototype.sayAge = function () {alert (' My age is ' +this.age)};

function f2e (name,id) {
Person.apply (this,new Array (name));
This.id = ID;
This.showid = function () {
Alert (' Good morning,sir,my work number is ' +this.id);
}
}

var simon = new f2e (' Simon ', 9527);
Simon.sayage (); Tip TypeError:simon.sayAge is not a function

second, the prototype chain mode
Copy Code code as follows:

function person () {
this.name = ' Simon ';
}
Person.prototype.say = function () {
Alert (' My name is ' +this.name);
}

function f2e (ID) {
This.id = ID;
This.showid = function () {
Alert (' Good morning,sir,my work number is ' +this.id);
}
}
F2e.prototype = new Person ();

var simon = new f2e (9527);
Simon.say ();
Simon.showid ();
Alert (simon.hasownproperty (' id ')); Check whether it is a property of its own

Next, follow the example above to understand the following JS prototype chain concept:

Prototype chain can be understood as: JS each object has a hidden __proto__ attribute, an instantiated object's __proto__ attribute points to its class prototype method, and this prototype method can be assigned to another instantiated object, the object of __ Proto__ also needs to point to its class, thus forming a chain, which is in the preceding code

Copy Code code as follows:

F2e.prototype = new Person ()

This sentence is the key. When a JS object reads a property, it finds its own properties first, and then goes on to find the properties of the objects on the prototype chain in turn. This means that the method of the prototype chain can be shared, thus solving the shortcoming of the object posing as a waste of memory.

Below again the disadvantage:
The disadvantage is obvious, the prototype chain is inherited, that is, the instantiation of subclasses can not pass parameters to the parent class, which is why the function person () in this example has no parameters, but directly written this.name= "Simon" reason. The following code will not achieve the desired effect:

Copy Code code as follows:

function person (name) {
THIS.name = name;
}
Person.prototype.say = function () {
Alert (' My name is ' +this.name);
}

function f2e (name,id) {
This.id = ID;
This.showid = function () {
Alert (' Good morning,sir,my work number is ' +this.id);
}
}
F2e.prototype = new Person ();

var simon = new f2e ("Simon", 9527);
Simon.say ();
Simon.showid ();


function person (name) {
THIS.name = name;
}

Person.prototype.say = function () {
Alert (' My name is ' +this.name);
}

function f2e (name,id) {
This.id = ID;
This.showid = function () {
Alert (' Good morning,sir,my work number is ' +this.id);
}
}

F2e.prototype = new Person (); It is not possible to pass a value here, either THIS.name or name, and it is ok to write F2e.prototype = new person (' wood '), but then Simon.say () becomes my name is Wood

var simon = new f2e ("Simon", 9527);
Simon.say (); Eject my name is undefined
Simon.showid ();


Finally, the author summarizes the way of inheriting, the member variable adopts the object posing method, the member method adopts the prototype chain, and the code is as follows:

Copy Code code as follows:

function person (name) {
THIS.name = name;
}

Person.prototype.say = function () {
Alert (' My name is ' +this.name);
}

function f2e (name,id) {
Person.call (This,name);
This.id = ID;
}

F2e.prototype = new Person ();
Notice a detail here, Showid cannot be written in f2e.prototype = new Person ();
F2E.prototype.showId = function () {
Alert (' Good morning,sir,my work number is ' +this.id);
}

var simon = new f2e ("Simon", 9527);
Simon.say ();
Simon.showid ();

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.