Let's talk about multiple methods of inheritance in javascript, and multiple methods of javascript.

Source: Internet
Author: User

Let's talk about multiple methods of inheritance in javascript, and multiple methods of javascript.

JS has no inheritance, but it can save the country by curve and implement the inheritance function by using constructor, prototype, and other methods.

 var o=new Object();

In fact, using constructors to instantiate an Object is inheritance. All attributes and methods in the Object can be used here. So why is the method used to access the Object actually accessing the method of its prototype Object? All the methods are placed in the prototype rather than in the class.

Console. log (o. _ proto _ = Object. prototype) // the essence of true 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 objects.

Var myNumber = new Number (10); // instantiate a numeric object

A String object 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 methods.

console.log(s.toUpperCase());console.log(s.toString()); 

2. Custom Object Inheritance

// Parent class var Person = function () {this. name = 'av instructor '; this. test = 'bifujian in test';} Person. prototype = {say: function () {console. log ('buy disks') ;}// constructor var Canglaoshi = function (name, age, cup) {this. name = name; this. age = age; this. cup = cup;} // inherits the person, and the method Canglaoshi in the person prototype is available. prototype = new Person (); Canglaoshi. prototype. ppp = function () {console. log ('pop-up lock');} // The method var xiaocang = new Canglaoshi ('empty ', 18, 'E'); xiaocang in the person class. say (); console. log (xiaocang. name); console. log (xiaocang. age); console. log (xiaocang. cup); console. log (xiaocang. test );

3. Demonstration of the prototype chain inherited by custom objects

(Function () {// parent class function SuperParent () {this. name = 'Mike ';} // subclass inherits from Parent-secondary inheritance: function Parent () {this. age = 12;} Parent. prototype = new SuperParent (); // form the chain var parent = new Parent (); console. log ("test father can access Grandpa attributes:" + parent. name); console. log ("the test father can access his own attributes:" + parent. age); // continue prototype chain inheritance-three inheritance function Child () {// brother to construct this. weight = 60;} Child. prototype = new Parent (); // continue prototype chain inheritance // prototype chain Test Try 2 // son integration Grandpa var child = new Child (); console. log ("test the attributes that my son can access GRANDPA:" + child. name); // inherits Parent and Child. the pop-up mike console is displayed. log ("test the attributes that the son can access his father:" + child. age); // 12 console is displayed. log ("test son can access his own unique attributes:" + child. weight); // pop up 12 // prototype chain test // grandpa can access the method var test = new SuperParent () in the Object; console. log (test. name); console. log (test. toString (); // access chain: SuperParent constructor -- SuperParent prototype Object -- Obect prototype Object (locate toString method )- -"Null console. log (child. name); // prototype chain: first, access the Child constructor and find that there is no name attribute -- "to find _ proto __, and determine whether the pointer is null --" points to the Child prototype function, find whether the name attribute -- "// --- is not found. Then, judge whether the _ proto _ attribute is null. If not null, continue searching. --" find the parent object, check whether the name attribute exists. No .... })()

4. constructor inheritance

(Function () {function People () {this. race = 'human';} People. prototype = {eat: function () {alert ('eat eat ') ;}/ * demon object */function Shemale (name, skin) {People. apply (this, arguments); // call is the same. Pay attention to the second parameter this. name = name; this. skin = skin;} // instantiate var zhangsan = new Shemale ('zhang san', 'Yellow skin ') console. log (zhangsan. name); // Zhang San 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 call the Person method, and pass the name age to the past */Person. call (this, name, age); // your own property this. no = no;} Man. prototype = new Person (); var man = new Man ("James", 11, "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: 'Doc '}; // how can I enable "doctor" to inherit "Chinese"? That is to say, how can I generate a "Chinese doctor" object? // Note that both objects are common objects. They are not constructor and cannot be used to implement "inheritance ". 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 = 'Doc'; 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 ('zhang', 20); console. log (xiaozhang. name)}) () </script>

8. Use a third-party framework to implement inheritance

<Script src = 'simple. js'> </script> <! -- The third-party framework used is simple. js --> <script> + (function () {<script> var Person = Class. extend ({init: function (age, name) {this. age = age; this. name = name ;}, ppp: function () {alert ("you know") ;}}); var Man = Person. extend ({init: function (age, name, height) {this. _ super (age, name); this. height = height;}, ppp: function () {/* call the method of the same name as the parent class */this. _ super ();/* at the same time, you can call your own Method */alert ("Shy-,-") ;}}); var xiaozhang = new Man (21, 'zhang ', '123'); xiaozhang. ppp ();})()

I hope it will be helpful for you to learn about javascript programming.

Articles you may be interested in:
  • Closure and simulation class in JavaScript advanced, inheritance (5)
  • JavaScript object-oriented Prototypes and inheritance
  • JS inheritance-prototype chain inheritance and class inheritance
  • A deep understanding of prototype and inheritance in javascript
  • Multi-inheritance example using mixins in ExtJS4
  • A deep understanding of how JavaScript implements inheritance
  • Summary of several inherited usage methods in js (apply, call, prototype)
  • Two inheritance methods of js
  • Basic explanation of JavaScript inheritance (prototype chain, borrow constructor, hybrid mode, original type inheritance, parasitic inheritance, and parasitic combined inheritance)
  • Let's talk about javascript prototype inheritance.

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.