Javascript prototype chain and inheritance-javascript tips-js tutorial

Source: Internet
Author: User
Tags hasownproperty
This article mainly introduces the javascript prototype chain and inheritance related information. If you need it, you can refer to the js prototype chain and inheritance, which is the focus of js, therefore, we will give a detailed explanation through the following three examples.

First, define an object obj. The prototype of this object is obj. _ proto _, we can use the getPrototypeOf method in ES5 to query the obj prototype. We can determine whether the obj prototype matches the Object. prototype is equal to the prototype used to verify whether the prototype of obj exists. The return value is true, so it exists. Then we define a function foo (). Any function has its prototype object, that is, the prototype of the function. We can add any attribute on the prototype of the function, then, an instantiated object can share its attributes (the two examples below will be detailed ).

function foo(){}foo.prototype.z = 3;var obj = new foo();obj.x=1;obj.y=2;obj.x //1obj.y //2obj.z //3typeof obj.toString; //functionobj.valueOf(); // foo {x: 1, y: 2, z: 3}obj.hasOwnProperty('z'); //false

Here, the object prototype (_ proto _) points to the prototype attribute of the foo function, foo. prototype refers to the Object. prototype: The end of the prototype chain is null. The hasOwnProperty is used to check whether the z attribute is on obj. If false is displayed, no z attribute exists on obj, but the prototype chain is searched, found in foo. prototype, so obj. z = 3, and for the first case on obj. valueOf () and toString are both objects. prototype, so any Object has these two attributes, because the prototype of any Object is Object. prototype. except for the next special case,

var obj2 = Object.create(null);obj2.valueOf(); //undefined

Object. create () is to create an empty Object, and the prototype of this Object points to the parameter. The following comprehensive example shows how to implement a class to inherit another class.

// Declare a constructor Personfunction Person (name, age) {this. name = name; this. age = age;} Person. prototype. hi = function () {console. log ('Hi, my name is '+ this. name + ', my age is' + this. age) ;}; Person. prototype. LEGS_NUM = 2; Person. prototype. ARMS_NUM = 2; Person. prototype. walk = function () {console. log (this. name + 'is walking! ') ;}; Function Student (name, age, classNum) {Person. call (this, name, age); this. classNum = classNum;} // create an empty object Student. prototype = Object. create (Person. prototype); // constructor specifies the function for creating an object. Student. prototype. constructor = Student; Student. prototype. hi = function () {console. log ('Hi, my name is '+ this. name + ', my age is' + this. age + 'and my class is' + this. classNum) ;}; Student. prototype. learns = function (sub) {console. log (this. name + 'is learn' + sub) ;}; // instantiate an object Bosnvar Bosn = new Student ('bosn ', 27, 'class 3'); bosn. hi (); // Hi, my name is bosn, my age is 27 and my class is Class 3Bosn. LEGS _ NUM; // 2Bosn. walk (); // bosn is walking! Bosn. learns ('Math'); // bosn is learning Math

The constructor Person and Student's this point to the instantiated object (Bosn), and the prototype of this object points to the prototype of the constructor.

We use Object. create () method to create an empty object. The prototype of this object is Person. prototype, the advantage of writing this is that we can not affect the Person. you can create Studnet yourself on the premise of the prototype attribute. any prototype attribute and can inherit Person. the original attribute of prototype, because the subclass Student inherits the base class Person. If you directly write Person. prototype = Student. prototype, it points to an object at the same time. When adding attributes to Student. prototype, the same attributes will be added to the prototype chain of Person.

For the call method in the constructor Student, this points to the instantiated object of the newly created Student and inherits it through call.

Student. prototype. constructor = Student. The meaning of this sentence is to specify Student as the function for creating the Student. prototype object. If this sentence is not written, the function of this object is still Person.

There are three methods to implement inheritance,

function Person(name,age){  this.name = name;  this.age = age;}function Student(){}Student.prototype = Person.prototype; //1Student.prototype = Object.create(Person.prototype); //2Student.prototype = new Person(); //3

First, as we have already said above, writing this directly will direct the subclass and the base class to the bosn instance at the same time;

Second, just right away from this point, and implement inheritance well. Let the instance first query the subclass. If there is no corresponding attribute, then query the base class;

In the third case, although inheritance is also implemented, the Person constructor is called. In this example, the constructor has two parameters: name and age, but the third one has not passed anything, it is not instantiated.

The above is all the content of this article. I hope you will like it.

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.