On the inheritance of JavaScript

Source: Internet
Author: User
Tags shallow copy

I think the basic grammar of my javascript is almost mastered, there is no time, after all, so many exams waiting for me. I'll pass the Rhino book through the winter vacation.

There were so many exams, but I couldn't help writing some JavaScript code. I think my base is almost there, and I'm going to take that JavaScript design pattern out and see what I didn't understand.

Then I think I should be able to read it now. Just look for the inheritance chapter.

—————————————————————— I'm a great dividing line ————————————————————————————————————————

Can only say barely can understand.

Later, the combination of Ruan Yi-Feng's blog about inheritance understand a lot, I found this book is really good things.

Although the predecessor said has been very good, but this book said the predecessor didn't see?, of course, senior also said this book didn't see?, of course, I estimate JS there are other ways to inherit, in this do not list.

—————————————————————— I'm a great dividing line ————————————————————————————————————————

Summarize several ways of inheriting

First, class inheritance (from the book translation)

Use the call or Apply function to inherit the method.

Examples of references to predecessors:

functionAnimal () { This. Species = "animals"; }functionCat (name,color) { This. Name =name;  This. color =color; }functionCat (Name,color) {animal.apply ( This, arguments);  This. Name =name;  This. color =color; }varCAT1 =NewCat ("Da Mao", "Yellow"); alert (cat1.species); AnimalBy: Ruan Yi Feng

Then inherit the properties of the prototype

New= Cat;  varnew Cat ("Da Mao", "Yellow"//  Animal by   : Nanyi

Why not assign a value directly, because it is a reference, changing the prototype of the subclass will change the prototype of the parent class.

However, this example Anima object, there is no problem here, but if the object of the instance is large, it is a bit more than worth the candle.

New approaches have been introduced.

To transition with a new object, the code is as follows:

var function  =new= Cat; // by : Nanyi

Then the seniors turned it into a function that I had seen in the book before. I think it's better written in the book.

function Extend (subclass,superclass) {    var f=function() {};    F.prototype=superclass.prototype;    Subclass.prototype=new  F ();    SubClass.prototype.constructor=subclass; // second paragraph    subclass.superclass=Superclass.prototype;  1    if(superclass.prototype.constructor==Object.prototype.constructor) {        SuperClass.prototype.constructor=superclass;    }}

Then I did not understand the second paragraph is what the meaning of the book is too abstract, and then I read the blog of the predecessors and read the book again, read understand.

is to weaken the sub-class and the parent class coupling, while ensuring that the constructor corresponds to the correct position, in the book's P43, I looked forward to see each inheritance as long as prototype change, constructor will set up.

I looked up the relevant information. What is the use of this property? See the bottom of the article. We continue to say inheritance.

This kind of inheritance is finished, we say prototype inheritance.

// prototype inheritance Test var person={  name:' Test ',  getName:function() {    return  This . Name;}  } var a1=Clone (person), alert (A1.getname ()), a1.name= ' love~ '; alert (A1.getname ());

What's this clone function?

  function Clone (object) {  function  F () {};  F.prototype=object;   return New F ();}  

is to create an empty object that directs the prototype of the empty object to the parent class.

Returns an object of an instance, and then tests the A1 object to the returned object F.

Read really good to admire the wisdom of predecessors.

Senior Blog There are several other ways, shallow copy, deep copy, previously seen similar here is not more said, can go to the blog of the predecessors to see themselves.

—————————————————————— I'm a great dividing line ————————————————————————————————————————

Finally, talk about the role of constructor.

It helped me a great favor. This is Yu Xiao's answer.

varb; (function(){  functionA (arg1,arg2) { This. A = 1;  This. b=2; } A.prototype.log=function() {Console.log ( This. a); } A=NewA (); b=NewA ();}) () A.log ();//1B.log ();//1

With the above code we can get two objects, a, B, they are the same instance of Class A. Because A is in a closed packet, so now we can't access a directly, then what if I want to add a new method to Class A?
function () {  Console.log(this. B)}a.log2 (); // 2 b.log2 (); // 2

And then it comes to the regular, I'm going to take time to read it and write a blog.

—————————————————————— I'm a great dividing line ————————————————————————————————————————

Finally, the JavaScript design pattern is a really good book. The blog of the predecessor is good thing, know is good thing, Google is good thing ...

On the inheritance of JavaScript

Related Article

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.