Shulou(Shulou.com)06/01 Report--

Each function we create has a prototype property, 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. generally speaking, prototype is the prototype object of the instance object created through the constructor. The advantage of using the prototype object is that all instance objects can share its properties and methods.

1 function Person () {2 Person.prototype.name = "Nicholas"; 3 Person.prototype.age = 29; 4 Person.prototype.job = "Software Engineer"; 5 Person.prototype.sayName = function () {6 console.log (this.name); 7}; 8}; 9 10 var person1 = new Person (); 11 person1.sayName (); / / Nicholas12 13 var person2 = new Person () 14 person2.sayName (); / / Nicholas15 16 console.log (person1.sayName = = person2.sayName); / / true

1. Understand the prototype object

Whenever a new function is created, a prototype property is created for the function based on a specific set of rules, which points to the prototype object of the function. By default, the prototype object has a constructor property that points to the function pointer where the prototype property resides

The isPrototypeOf () method can determine whether such a relationship exists between objects

1 console.log (Person.prototype.isPrototypeOf (person1)); / / true

ECMAScript5 adds a new method, Object.getPrototypeOf ()

1 console.log (Object.getPrototypeOf (person1)); / / Object {name: "Nicholas", age: 29, job: "Software Engineer"}

Whenever the code reads a property of an object, a search is performed. The search starts with the object instance itself. If a property with the given name is found in the instance object itself, the value of the property is returned, and if it is not found, continue searching for the prototype object that the pointer points to

Although we can access the values saved in the prototype through the object instance, we cannot overwrite the values in the prototype through the object instance. Using delete, we can completely delete the instance properties, thus allowing us to re-access the properties in the prototype.

1 function Person () {2 Person.prototype.name = "Nicholas"; 3 Person.prototype.age = 29; 4 Person.prototype.job = "Software Engineer"; 5 Person.prototype.sayName = function () {6 console.log (this.name); 7}; 8}; 9 10 var person1 = new Person (); 11 12 var person2 = new Person (); 13 14 person1.name = "Greg" 15 console.log (person1.name); / / Greg16 console.log (person2.name); / / Nicholas17 18 delete person1.name;19 console.log (person1.name); / / Nicholas

The hasOwnProperty () method can detect whether a property is in the instance or in the prototype, and returns true in the instance

1 function Person () {2 Person.prototype.name = "Nicholas"; 3 Person.prototype.age = 29; 4 Person.prototype.job = "Software Engineer"; 5 Person.prototype.sayName = function () {6 console.log (this.name); 7}; 8}; 9 10 var person1 = new Person (); 11 var person2 = new Person () 12 console.log (person1.hasOwnProperty ("name")); / / false13 person2.name = "Greg"; 14 console.log (person2.hasOwnProperty ("name")); / / true

2. Prototype and in operator

There are two ways to use the in operator, either alone or in for-in. When used alone, the in operator returns true when the specified property is accessible through the object, either in the instance or in the prototype

1 function Person () {2 Person.prototype.name = "Nicholas"; 3 Person.prototype.age = 29; 4 Person.prototype.job = "Software Engineer"; 5 Person.prototype.sayName = function () {6 console.log (this.name); 7}; 8}; 9 10 var person1 = new Person (); 11 var person2 = new Person () 12 console.log (person1.hasOwnProperty ("name")); / false13 console.log ("name" in person1); / / true14 person1.name = "Greg"; 15 console.log (person1.hasOwnProperty ("name")); / / true16 console.log ("name" in person1); / / true

Using both the hasOwnProperty () and in operators, you can determine whether the property exists in the instance or in the prototype

1 function hasPrototypeProperty (object,name) {2 return (! object.hasOwnProperty (name) & & (name in object)); 3} 4 5 / / hasPrototypeProperty () returns true indicates that the attribute is in the prototype 6 7 function Person () {8 Person.prototype.name = "Nicholas"; 9 Person.prototype.age = 29 th 10 Person.prototype.job = "Software Engineer" 11 Person.prototype.sayName = function () {12 console.log (this.name); 13}; 14}; 15 16 var person3 = new Person (); 17 console.log (hasPrototypeProperty (person3, "job")); / / true18 person3.job = "Teacher"; 19 console.log (hasPrototypeProperty (person3, "job")); / / false

When using the for-in loop, all enumerable properties that can be accessed through the object are returned, including properties in the instance, properties in the prototype, and instance properties that mask the non-enumerable properties in the prototype.

To get all the enumerable properties on an object, you can use ECMAScript5's Object.keys () method, which takes an object as a parameter and returns a string array containing all enumerable properties.

1 function Person () {2 Person.prototype.name = "Nicholas"; 3 Person.prototype.age = 29; 4 Person.prototype.job = "Software Engineer"; 5 Person.prototype.sayName = function () {6 console.log (this.name); 7}; 8} 9 10 / / Object.defineProperties (Person.prototype, {11 / / name: {12 / / enumerable: true,13 / /}, 14 / / age: {15 / / enumerable: true,16 / /}, 17 / /}); 18 19 var keys = Object.keys (Person.prototype); 20 console.log (keys); 21 var person1 = new Person () 22 person1.name = "Greg"; 23 person1.age = 22 X 24 var person1Keys = Object.keys (person1); 25 console.log (person1Keys)

If you want to get all the instance properties, whether it is enumerable or not, you can use the Object.getOwnPropertyNames () method

1 var keys = Object.getOwnPropertyNames (Person.prototype); 2 console.log (keys); / / ["constructor", "name", "age", "job", "sayName"]

3. Simpler prototype syntax

Is to rewrite the entire prototype object with an object literal that contains all the properties and methods

1 function Person () {2 3} 4 5 Person.prototype = {6 name: "Nicholas", 7 age: 29, 8 job: "SoftWare Engineer", 9 sayName: function () {10 console.log (this.name); 11}, 12}

The syntax used here essentially completely overrides the default prototype object, so the constructor property becomes the constructor property of the new object (pointing to the Object constructor). At this point, although the instanceof operator can return the correct result, it is impossible to determine the type of the object through constructor.

1 var friend = new Person (); 2 3 console.log (friend instanceof Object); / / true4 console.log (friend instanceof Person); / / true5 console.log (friend.constructor = = Person); / / false6 console.log (friend.constructor = = Object); / / true

It can be seen that the constructor property at this time is equal to Object. If the value of constructor is important, you can set it to the appropriate value.

1 function Person () {2 3} 4 5 Person.prototype = {6 constructor: Person, 7 name: "Nicholas", 8 age: 29, 9 job: "SoftWare Engineer", 10 sayName: function () {11 console.log (this.name); 12}, 13}

Note: resetting the constructor property in this way will cause his `Enumerable` property to be set to true. By default, native

The constructor property is not enumerable

4. the dynamics of the prototype.

1 var friend = new Person (); 2 Person.prototype.sayHi = function () {3 alert ("hi"); 4}; 5 friend.sayHi (); / / hi

Although the friend instance is created before adding a new method, it can access this method because every time the code reads a property of an object, it performs a search. The search starts with the object instance itself. If a property with the given name is found in the instance object itself, the value of the property is returned, and if it is not found, continue searching for the prototype object that the pointer points to

Although you can add properties and methods to the prototype at any time, and the changes can be immediately reflected in all object instances, if you are rewriting the entire prototype object, the situation is different.

1 function Person () {2} 34 var friend = new Person (); 56 Person.prototype = {7 constructor: Person, 8 name: "Nicholas", 9 age: 29 10 job: "SoftWare Engineer", 11 sayName: function () {12 console.log (this.name); 13}, 14}; 15 16 friend.sayName (); / / error

5. Native object model

By prototyping native objects, you can not only obtain references to all default methods, but also define new methods

1 String.prototype.ll = function (text) {2 return text.length;3}; 4 var msg = "Hello"; 5 console.log (msg.ll ("SoftWare")); / / 8

6. The problem of prototype object

First, it omits the step of passing parameters to the constructor, and as a result, all instances get the same property value by default. The biggest problem with the prototype pattern is caused by the nature of sharing. For properties containing basic values, an attribute with the same name can be added to the instance, while for attributes containing reference types, the problem is more prominent.

1 function Person () {2} 34 Person.prototype = {5 constructor: Person, 6 name: "Nicholas", 7 age: 29, 8 job: "SoftWare Engineer", 9 friend: ["Shelby", "Court"], 10 sayName: function () {11 console.log (this.name); 12}, 13} 14 15 var person1 = new Person (); 16 var person2 = new Person (); 17 18 person1.friend.push ("Van"); 19 console.log (person1.friend); / / ["Shelby", "Court", "Van"] 20 console.log (person2.friend); / / ["Shelby", "Court", "Van"] 21 console.log (person1.friend = = person2.friend); / / true

And that's why we see so few people using prototype patterns alone.

Combine constructor patterns with prototype patterns

1 function Person (name,age,job) {2 this.name = name; 3 this.age = age; 4 this.job = job; 5 this.friend = ["Shelby", "Court"]; 6} 7 8 Person.prototype = {9 constructor: Person,10 sayName: function () {11 console.log (this.name); 12}, 13} 14 15 var person1 = new Person (); 16 var person2 = new Person (); 17 18 person1.friend.push ("Van"); 19 console.log (person1.friend); / / ["Shelby", "Court", "Van"] 20 console.log (person2.friend); / / ["Shelby", "Court"] 21 console.log (person1.sayName = = person2.sayName); / / true

This is by far the most widely used method of creating custom types in ECMAScript, and it can be said that this is a default schema for defining reference types

Dynamic prototype model

All the information is encapsulated in the constructor, and by initializing the prototype in the constructor, the advantage of using both the constructor and the prototype is maintained

1 function Person (name,age,job) {2 this.name = name; 3 this.age = age; 4 this.job = job; 5 if (typeof this.sayName! = "function") {/ / 6 Person.prototype.sayName = function () {7 console.log (this.name) is executed only when the constructor is called for the first time; 8} 9}; 10}; 11 12 var friend = new Person ("Nicholas", 29, "Software Engineer"); 13 friend.sayName (); / / Nicholas

Parasitic constructor model

1 function Person (name,age,job) {2 var o = new Object (); 3 o.name = name; 4 o.age = age; 5 o.job = job; 6 o.sayName = function () {7 console.log (this.name); 8}; 9 return obot 10} 11 12 var friend = new Person ("Nicholas", 29, "Software Engineer") 13 friend.sayName (); / / Nicholas

This pattern creates constructors for objects in special cases, assuming that we want to create a special array with extra methods.

1 function SpecialArray () {2 var values = new Array (); 3 values.push.apply (values,arguments); 4 values.toPipedString = function () {5 return this.join ("|"); 6}; 7 return values; 8}; 9 10 var colors = new SpecialArray ("red", "blue", "green"); 11 console.log (colors.toPipedString ()); / / red | blue | green

Safe constructor model

The so-called secure object is worth it because there are no public properties, and its methods do not reference this objects.

1 function Person (name,age,job) {2 3 / / create the object to be returned 4 var o = new Object (); 5 6 / you can define private variables and functions 7 8 / / add method 9 o.sayName = function () {10 console.log (name); 11}; 12 13 / / return object 14 return obot 15 16} 17 18 var friend = Person ("Nicholas", 29, "Software Engineer"); 19 friend.sayName (); / / Nicholas

In this way, a secure object is held in the variable friend, and there is no other way to access its data members except to call the sayName () method.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.