A talk on the various ways of inheriting in JavaScript _javascript skills

Source: Internet
Author: User

JS is not inherited, but can curve the nation, the use of constructors, prototypes and other methods to achieve the function of inheritance.

 var o=new Object ();

In fact, instantiating an object with a constructor is an inheritance, where you can use all the properties and methods in object. So why can access to object objects actually access the methods of their prototype objects, all of which are placed in the prototype rather than in the class.

Console.log (o.__proto__ = = = Object.prototype)/True The nature of the inheritance
console.log (o.__proto__ = = Object);
Console.log (object.__proto__ = = = Function.prototype);
Console.log (function.prototype.__proto__ = = = Object.prototype);
Console.log (number.__proto__ = = = Function.prototype);

object is the ancestor of all things, Everything is object.

1, built-in objects are inherited from the object

var mynumber = new number (10); Instantiate a numeric object

String object, which is actually an instantiation of a string object

var s = ' str ';

In addition to accessing its own property methods, you can also access the parent class Property method

Console.log (S.touppercase ());
Console.log (S.tostring ());
 

2, custom object inheritance

The parent class
  var person = function () {
   this.name= ' av teacher ';
   this.test= ' CCTV man ' in the test ';
  } 
  person.prototype={
   say:function () {
    console.log (' buy disk ');
   }
  Constructor
  var Canglaoshi = function (Name,age,cup) {
   this.name=name;
   This.age=age;
   This.cup=cup;
  }
  Inherits person, then owns the method canglaoshi.prototype=new person () in the person prototype
  ;
  Canglaoshi.prototype.ppp=function () {
   console.log (' snap ');
  }
  Cang Teacher has the method of person in person
  var xiaocang=new canglaoshi (' Empty ', ', ' E ');
  Xiaocang.say ();
  Console.log (xiaocang.name);
  Console.log (xiaocang.age);
  Console.log (Xiaocang.cup);
  Console.log (xiaocang.test);

3, custom object inheritance prototype chain demo

(function () {//Parent class function Superparent () {this.name = ' Mike ';
   }//Subclass inherits father-Two inheritance: function Parent () {this.age = 12; } Parent.prototype = new Superparent ();
   Through the prototype, form the chain of var parent = new parent ();
   Console.log ("Test father can visit Grandpa attributes:" + parent.name);

   Console.log ("Test father can access his own properties:" + parent.age);
   Continue prototype chain inheritance-three times inheritance function child () {//brother constructs this.weight = 60; } Child.prototype = new Parent ();
   Continue prototype chain inheritance//prototype chain Test 2//son integrated grandpa var child = new Children (); Console.log ("Test the son can visit Grandpa's attributes:" + child.name); Inherits parent and Child, pops up Mike Console.log ("Test son can access father's attributes:" + child.age); Pop-up Console.log ("Test son can access his own unique attributes:" + child.weight);
   Pop-up 12//prototype chain test//Grandpa can access the method in object var test = new Superparent ();
   Console.log (Test.name);
   Console.log (Test.tostring ());
   Access chain: Superparent constructed Object--superparent prototype Object--object--Obect prototype object (Find ToString method)--null console.log (Child.name); Prototype chain: First access to the child constructor, found that there is no Name property-"Look for __proto__, judge whether the pointer is empty-" point to ChilD prototype function, looking for No Name attribute--"//---" is not found, then determine whether its __proto__ property is null, if not NULL, continue searching--"Find the parent object, check for the Name property, no ....

 })()

4. Constructor inheritance

(function () {
   function people () {
    this.race = ' human ';
   }
   People.prototype = {
    eat:function () {
     alert (' ate ');
    }

   /* Simon Object/
   function Shemale (name, skin) {
    people.apply (this, arguments); the same as call, note the second parameter
    this.name = name;
    This.skin = skin;
   }
   Instantiate 
   var Zhangsan = new Shemale (' John ', ' yellow skin ')
   console.log (zhangsan.name);//John
   Console.log ( Zhangsan.skin); Yellow skin
   Console.log (zhangsan.race);//Human
  }) ()

5. Combination Inheritance

(function () {
   function person (name, age) {
    this.name = name;
    This.age = age;
   }
   Person.prototype.say = function () {}

   function man (name, age, no) {/
    * will automatically invoke the method of person and pass the name age to the past * *
    Person.call (this, name, age);
    own attribute
    this.no = no;
   }
   Man.prototype = new Person ();

   var mans = new Man ("John", One, "0001");
   Console.log (man.name);
   Console.log (man.age);
   Console.log (man.no);
  }) ()

6. Copy Inheritance

<script>
  + (function () {
   var Chinese = {
    Nation: ' China '
   };
   var doctor = {
    career: ' Doctor '
   };  How can I let "Doctor" to Inherit "Chinese", that is to say, how can I produce a "Chinese Doctor" object?
   //  notice here that both objects are normal objects, not constructors, and cannot be implemented using constructor methods.
   function Extend (p) {
    var c = {};
    for (var i in P) {
     c[i] = p[i];
    }
    C.uber = p;
    return c;
   }
   var doctor = Extend (Chinese);
   Doctor.career = ' Doctor ';
   alert (doctor.nation); China
  }) ()
 </script>

7, parasitic combination inheritance

<script>
  + (function () {/
   * inherited fixed function *
   /function Inheritprototype (subtype, supertype) {
    var Prototype = Object (Supertype.prototype);
    Prototype.constructor = subtype;
    Subtype.prototype = prototype;
   }

   function person (name) {
    this.name = name;
   }
   Person.prototype.say = function () {}

   function Student (name, age) {
    Person.call (this, name);
    This.age = age;
   }

   Inheritprototype (Student, person);
   var Xiaozhang = new Student (' Xiao Zhang ',);
   Console.log (Xiaozhang.name)
  }) ()
 </script>

8, using the third party framework to achieve inheritance

<script src= ' simple.js ' ></script> 
 <!--use of Third-party frameworks simple.js-->
 <script>
  + ( function () {< script >
    var person = class.extend ({
     init:function (age, name) {
      this.age = age;
      this.name = name;
     ,
     ppp:function () {
      alert ("You understand");
     }
    );
   var mans = person.extend ({
    init:function (age, name, height) {
     this._super (age, name);
     this.height = height;
    },
    ppp:function () {/
     * calls the same method of the parent class/
     this._super ();
     /* At the same time can call their own method * *
     alert ("Good Shy-,-");
    }
   );


   var Xiaozhang = new man (21, ' Little Zhang ', ' 121 ');
   XIAOZHANG.PPP ();
  }) ()

I hope it helps to learn JavaScript programming.

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.