On the JavaScript prototype and object of series

Source: Internet
Author: User

In my three months of learning and using JavaScript, I've been confused about the inheritance and prototype of JavaScript, which has led to a lot of times why it's so hard to say why. By the end of this week, through previous studies and their own re-learning, the sense of self is a clearer understanding of this piece, this article will talk about my understanding of JavaScript prototype and inheritance, before we first need to know some basic knowledge.

Knowledge Cushion

1. Data type

The data types in JavaScript have been mentioned in the past, including undefined values (undefined), null (NULL), Boolean (Boolean), numeric (number), strings (string), and objects (object). The object also contains an array of special objects, and the function is also an object. where strings (string), objects (object), and so on are all implemented by constructors. In this case, we have to talk about the functions in JavaScript.

2. Functions

There is a concept of function in the language I know, so I will not dwell on it. In JavaScript, the function is also an object, so what is the object created by? object is created as a copy of an existing sample (that is, a prototype) object, and the name comes from the concept that any properties and methods of this prototype object will be displayed as properties and methods of the object created from the prototype's constructor. It can be said that these objects inherit properties and methods from their prototypes. Normal functions and constructors are created in JavaScript by function, but the constructors need to be marked by uppercase. For example:

1 functionPerson (name, age, sex) {2      This. Name =name;3      This. Age =Age ;4      This. Sex =sex;5      This. Say =function () {6Console.log (' My name is ' + This. Name + ", I ' m" + This. Age)7     }8 }9 TenPerson.say_hello =function () { OneConsole.log ("Hello,i ' m" + This. Sex) A }; -  -Person.prototype.is_live =function () { the     return true - }; -  - varWfsovereign =NewPerson (' wfsovereign ', +, "boy"); +  -Wfsovereign.say ();//outputMy name is Wfsovereign,i ' m +Console.log (Wfsovereign.is_live ());//Output True AConsole.log (Wfsovereign.say_hello (), "----");//output undefined

In this example, the constructor person is created, the Accept parameter is Name,age, the static method Say_hello () is used, the instance method is say () and is_live (), the instance object Wfsovereign is created using the constructor, and the instance-putting method is called, The prompt is undefined when calling a static method. after the constructor passes the "." To add a method or property, called a static method or a static property, which is inaccessible to an object after the instance. through the console, we output

1 Console.log (wfsovereign.prototype); 2 Console.log (wfsovereign.__proto__); 3 Console.log (wfsovereign.constructor);

Can see

1Undefined//Wfsovereign.prototype2 3person {is_live:function}//wfsovereign.__proto__)4ConstructorfunctionPerson (name, age, sex) {5Is_live:function () {6 __proto__: Object7 8 functionPerson (name, age, Sex) {//Wfsovereign.constructor9      This. Name =name;Ten      This. Age =Age ; One      This. Sex =sex; A      This. Say =function () { -Console.log (' My name is ' + This. Name + ", I ' m" + This. Age) -     } the}

As you can see, the instance object Wfsovereign has no prototype property, but with the __proto__ property pointing to the constructor Person.prototype and the constructor attribute to the constructor, The person constructor also has a __proto__ property that points to object, which indicates that person is also an instance created by object.

Thus, we conclude that each function created has a prototype attribute, which is a pointer to an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. prototype is the prototype object of the object instance that was created by invoking the constructor. Only the function can access the prototype property, the object of the instance does not have the attribute, that is, the instance created here with person Wfsovereign is not prototype. When a constructor (person) is used to create an instance (Wfsovereign), the inside of the instance contains an internal pointer (__proto__) to the prototype of the constructor, which exists between the prototype of the instance and the constructor, Instead of between the instance and the constructor, the instance is connected to the constructor by constructor. knowing what prototype is and how it came, it's much easier for us to look at the prototype chain of JavaScript.

Inheritance and prototype chain

1, the understanding of the prototype chain

JavaScript does not contain the traditional class inheritance model, but rather uses the prototype prototype model. In JavaScript, there are two types of values, original values, and object values. Each object has an intrinsic property of prototype, which we often call prototypes. The value of the prototype can be an object, or it can be null. If its value is an object, then this object must also have its own prototype. When a property or method is transferred from an object, if the object itself does not exist such a property or method, it will go to the associated prototype object to find, if prototype not, will go to the associated creator to find, Until prototype is undefined, the prototype of Object is undefined that all prototypes end in Object.prototype, thus forming a linear chain, which we call the prototype chain. JavaScript uses the prototype chain to invoke the properties and methods of the associated creator.

2. Benefits of using prototypes

You can have an object instance share the properties and methods it contains. That is, instead of adding the definition object information to the constructor, you can simply add the information to the prototype and invoke it in the same way as a pointer reference. The main problem with constructors is that each method is created once in each instance.

  

PS: If the contents of this article is wrong or confused, please correct or point out.

On the JavaScript prototype and object of series

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.