An analysis of JavaScript prototypes

Prototype

prototypes, literal explanations, primitive types or models, i.e. it is an initial template or framework that we can personalize to modify on its basis. The same applies in JavaScript.

1. Prototype Mode vs Constructors

Each function we create has a prototype (prototype) attribute, which is an object, the prototype object of the object created by invoking the constructor. Similar to the inheritance that we often use, it contains properties and methods that can be shared by all instances of a particular type.

Next, we summarize the method of the comparison of the constructor function.

1.1 Defining object Information

constructor Function

function Box (name,age) {this.name= ' Wang ';//instance property this.age=23;//Instance Properties This.run=function () {//instance method return this.name+ This.age+ ' Fighting ... ';}

prototype Mode

Unlike constructors, you do not have to define object information in a constructor, you can add that information directly to the prototype

1.2 resource Sharing

constructor Function

Different instantiation, the resulting method address is not the same, is unique.

var box1=new box (' Lee ', ' n '), var box2=new box (' Jack ', 200);

Code execution schematic diagram (i)

prototype Mode

You can have all object instances share the properties and methods that it contains, and their addresses are shared, all the same.

var box1=new Box1 () var box2=new Box1 ()

Code execution schematic (ii)

1.3 Execution Process

constructor Function

Only instance objects, so there is no precedence

prototype Mode

The property on the instance object is accessed first, if the object does not have access to the properties on the prototype object. Although we can access the values saved in the prototype through the object instance, we cannot override the values in the prototype through the object instance

var box1=new Box1 ();//alert (Box1.name); Wang, the attribute in the prototype box1.name= ' Zhang '; Alert (Box1.name); Zhang, the nearest principle, first accesses the attribute of the instance object, the value is ' Zhang ' var box2=new Box1 (); Alert (Box2.name); Wang, the properties of an object instance cannot be shared, Box2 can only access properties in the prototype

2. Pros and cons

2.1 Advantages and disadvantages

The sharing of the prototype is its advantage and its disadvantage. Sharing is possible for functions and properties that contain base values, and if the property contains a reference type, there is a problem: each time the instantiated data needs to retain its own attributes, but not the shared, but the modification of the reference type's properties is synchronized to the prototype, which leads many developers to abandon the use of prototypes.

function Box1 () {}box.prototype={name:wang ';//prototype attribute age:23;//prototype Properties family:[' Papa ', ' Mom ', ' brother '];//Add an array property, which is a reference type run: function () {//prototype method return this.name+this.age+this.family;}} ; var box1=new Box1 (); Box1.family.push (' elder sister ');//Add ' sister ' alert (Box1.run ()) to the instance; Wang23 mom and dad brother sister Var box2=new Box1 (); alert (Box2.run ()); Wang23 father and mother brother and sister, also have ' elder sister '.

2.2 Solutions

In order to solve the problem of constructing parameters and sharing, the composite constructor + prototype pattern: The common attribute is defined in the constructor, and the common method is defined in the prototype.

function Box1 (name,age) {//unshared using Constructors this.name=name;this.age=age;this.family=[' Papa ', ' Mom ', ' brother '];}; box.prototype={//Shared use prototype mode Constructor:box, Run:function () {//prototype method return this.name+this.age+this.family;}} ；

Improvement 1

You can encapsulate a prototype into a constructor to improve the readability of your code

function Box1 (name,age) {//unshared using Constructors this.name=name;this.age=age;this.family=[' Papa ', ' Mom ', ' brother ']; Box.prototype. Run=function () {//prototype method return this.name+this.age+this.family;  

Note : The prototype was initialized two times.

Improvement 2

Dynamic prototype mode to ensure the uniqueness of prototype initialization

3. Summary

Starting from the Weaving Knowledge network, the prototype pattern is similar to the inheritance in the design pattern. The prototype object is equivalent to the parent class, the instance object of a particular type is equivalent to a subclass, and the methods and properties inside the prototype can be shared by these specific types of instance objects, which can then be personalized within the private scope to override the methods or properties obtained from the prototype share. However, these modifications do not affect the prototype object (except for the reference type property).

An analysis of JavaScript prototypes