DOM note (12): Prototype object and dom prototype

DOM note (12): Prototype object and dom prototype

Because I have previously paid a note on the prototype object: Let's talk about the prototype mode in JavaScript. Now I can see this topic again and have a better understanding of the prototype. So I have to talk about the prototype object again.

1. Understanding prototype objects

Each created function has a prototype attribute pointing to the prototype object of the function. The methods and attributes created using the prototype mode are shared by all instances.

function Person(){}Person.prototype.name="dwqs";Person.prototype.age=20;Person.prototype.sayName=function(){    alert(this.name);};var per1 = new Person();per1.sayName();  //dwqsvar per2 = new Person();per2.sayName();  //dwqsalert(per1.sayName == per2.sayName);  //true

 

By default, prototype automatically retrieves a constructor attribute from the prototype Object and points to the function where the prototype attribute is located. Other methods and attributes of the prototype Object are inherited from the Object.

When the constructor of Person is called to create objects per1 and per2, each instance of Person (per1 and per2) contains a pointer to the prototype object of the constructor (Person. The ECMA-262 version 5th named the pointer [[Prototype].

Therefore, the pointer in the instance only points to the prototype, not the constructor. Although there is no standard method to directly access the [Prototype] feature, hasOwnProperty () and isPropertyOf () are provided in DOM note (11 () method to reflect the relationship between the prototype object and the instance.

// IsPrototypeOf (obj) checks whether [[prototype] of obj points to the object that calls this method alert (Person. prototype. isPrototypeOf (per1); // truealert (Person. prototype. isPrototypeOf (per2); // true

 

HasOwnProperty () is used to determine whether the property exists in the prototype or instance. true is returned only when the property exists in the instance.

per1.blog = "www.ido321.com";alert(per1.hasOwnProperty("blog"));  //truealert(Person.prototype.hasOwnProperty("blog"));  //falsealert(per1.hasOwnProperty("name"));  //falsealert(Person.prototype.hasOwnProperty("name"));  //true

 

If the instance and prototype attributes have the same name, the prototype attributes with the same name will be blocked, but the attributes with the same name in the prototype will not be modified. After the instance attributes with the same name are deleted, and re-access the blocked prototype attributes.

Per1.name = "i94web"; alert (per1.name); // i94web, from instance alert (per2.name); // dwqs from prototype delete per1.name; alert (per1.name); // dwqs

 

ECMAScript 5 provides Object. getPrototypeOf (obj) to access the [[Prototype] of obj. That is, it returns the Prototype Object of obj.

alert(Object.getPrototypeOf(per1) == Person.prototype);   //truealert(Object.getPrototypeOf(per1).name);                 //dwqs

 

Ii. _ proto _ attributes

In modern browsers such as IE11, FireFox, and Google, each object supports the _ proto _ (both front and back are underlined) attribute to access the prototype object of the parent class. Note that:

1. When the _ proto _ attribute of the prototype object is applied, a reference to the prototype object of the parent class of the current class is returned. When the _ proto _ attribute of the Instance Object is applied, returns the reference of the prototype object of the current instance class.

2. Object. prototype. _ proto _ return null. The Object does not have a parent class.

3. prototype is a static attribute, __proto _ is an instance attribute.

// All are truealert (Array. prototype. _ proto _ = Object. prototype); alert (new Array ()). _ proto _ = Array. prototype); alert (Person. prototype. _ proto _ = Object. prototype); alert (per1. _ proto _ = Person. prototype); alert (Object. prototype. _ proto _ = null );

 

3. Rewrite the prototype

If you define attributes or methods on the prototype, You need to repeat Person. prototype every time, which is very troublesome. A simple method is to rewrite the prototype.

function Person(){}Person.prototype={    name:"dwqs",    age:20,    sayName:function()    {        alert(this.name);    }};    var per1 = new Person();alert(per1 instanceof Object);  //truealert(per1 instanceof Person);  //truealert(per1.constructor == Object);  //truealert(per1.constructor == Person);  //false

 

Because the default prototype Object is overwritten, the constructor attribute points to the constructor attribute of the new Object (Object constructor) instead of to the Person. If the constructor points to an important point, you can redefine it:

Function Person () {} Person. prototype = {constructor: Person, // redefine constructor name: "dwqs", age: 20, sayName: function () {alert (this. name) ;}}; var per1 = new Person (); alert (per1.constructor = Person); // true

 

After this setting, the [[Enumerable] feature of constructor is true (refer to DOM note (11), which can be enumerated. By default, this attribute cannot be enumerated.

As mentioned above, the pointer in the instance only points to the prototype, not the constructor. Therefore, after the prototype object is rewritten, the connection between the existing prototype and any existing object instance is cut off.

<Span style = "font-size: 14px;"> function Person () {}// first create an instance var per1 = new Person (); // rewrite the prototype Person. prototype = {constructor: Person, name: "dwqs", age: 20, sayName: function () {alert (this. name) ;}}; per1.sayName (); // error: Uncaught TypeError: undefined is not a function </span>

Before rewriting the prototype object, it is like this:

The prototype object is rewritten as follows:

4. Native object prototype

All native reference types, such as Object, Array, and String, define methods on the prototype of their constructor. You can find sort () on Array. prototype And substring on String. prototype.

alert(typeof Array.prototype.sort);              //functionalert(typeof String.prototype.substring);   //function

 

Therefore, you can also define a new method for the reference type on the prototype object.

String.prototype.startWith=function(str){    return this.indexOf(str) == 0;}var msg = "Hello world";alert(msg.startWith("Hello"));  //true

 

First: http://www.ido321.com/1372.html