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

This article mainly explains "what are the ways to create objects in JavaScript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways to create objects in JavaScript".

1. Factory model

Function createPerson (name) {var o = new Object (); o.name = name; o.getName = function () {console.log (this.name);}; return o;} var person1 = createPerson ('kevin')

Cons: objects are not recognized because prototypes point to Object

two。 Constructor model

Function Person (name) {this.name = name; this.getName = function () {console.log (this.name);};} var person1 = new Person ('kevin')

Advantage: the instance can be identified as a specific type

Disadvantages: every time an instance is created, each method is created once.

2.1 Constructor pattern optimization

Function Person (name) {this.name = name; this.getName = getName;} function getName () {console.log (this.name);} var person1 = new Person ('kevin')

Pros: solved the problem that every method has to be recreated

Cons: this is called encapsulation.

3. Prototype model

Function Person (name) {} Person.prototype.name = 'keivn'; Person.prototype.getName = function () {console.log (this.name);}; var person1 = new Person ()

Advantage: the method will not be recreated

Disadvantages: 1. All properties and methods share 2. Unable to initialize parameters

3.1 prototype pattern optimization

Function Person (name) {} Person.prototype = {name: 'kevin', getName: function () {console.log (this.name);}}; var person1 = new Person ()

Pros: encapsulation is a little better

Disadvantages: rewrote the prototype and lost the constructor attribute

3.2 prototype pattern optimization

Function Person (name) {} Person.prototype = {constructor: Person, name: 'kevin', getName: function () {console.log (this.name);}}; var person1 = new Person ()

Advantages: an instance can find its constructor through the constructor property

Disadvantages: there are still some shortcomings in the prototype model.

4. Combination mode

The constructor mode is combined with the prototype mode.

Function Person (name) {this.name = name;} Person.prototype = {constructor: Person, getName: function () {console.log (this.name);}}; var person1 = new Person ()

Advantages: the shared share, the private private, the most widely used way

Disadvantages: some people just want to write it all together, that is, better encapsulation

4.1 dynamic prototype mode

Function Person (name) {this.name = name; if (typeof this.getName! = "function") {Person.prototype.getName = function () {console.log (this.name);} var person1 = new Person ()

Note: when using dynamic prototype pattern, you cannot rewrite the prototype with object literals

Explain why:

Function Person (name) {this.name = name; if (typeof this.getName! = "function") {Person.prototype = {constructor: Person, getName: function () {console.log (this.name);} var person1 = new Person ('kevin'); var person2 = new Person (' daisy') / / error reporting does not have the method person1.getName (); / / comment out the above code, which can be executed. Person2.getName ()

To explain this, suppose you start executing var person1 = new Person ('kevin').

If you are not familiar with the underlying execution of new and apply, you can read the article in the relevant links at the bottom.

Let's review the implementation steps of new:

First create a new object

Then point the prototype of the object to Person.prototype

Then Person.apply (obj)

Return this object

Note that when you review the implementation steps of apply, the obj.Person method will be executed, and the contents of the if statement will be executed. Note that the prototype attribute of the constructor points to the instance prototype. Overriding Person.prototype literally will not change the value of the instance prototype. Person1 still points to the previous prototype, not Person.prototype. The previous prototype did not have a getName method, so it was wrong!

If you just want to write code literally, you can try this:

Function Person (name) {this.name = name; if (typeof this.getName! = "function") {Person.prototype = {constructor: Person, getName: function () {console.log (this.name);}} return new Person (name);}} var person1 = new Person ('kevin') Var person2 = new Person ('daisy'); person1.getName (); / / kevin person2.getName (); / / daisy

5.1 parasitic constructor model

Function Person (name) {var o = new Object (); o.name = name; o.getName = function () {console.log (this.name);}; return o;} var person1 = new Person ('kevin'); console.log (person1 instanceof Person) / / false console.log (person1 instanceof Object) / / true

Parasitic constructor pattern, I personally think it should be read like this: parasitic-constructor-pattern, that is to say, a method of parasitic constructor.

In other words, selling dog meat under the guise of constructor, you can see that the instance created cannot point to the constructor using instanceof!

This method can be used in special cases. For example, if we want to create a special array with extra methods, but do not want to modify the Array constructor directly, we can write:

Function SpecialArray () {var values = new Array (); for (var I = 0, len = arguments.length; I < len; iTunes +) {values.push (arguments [I]);} values.toPipedString = function () {return this.join ("|");}; return values;} var colors = new SpecialArray ('red',' blue', 'green') Var colors2 = SpecialArray ('red2',' blue2', 'green2'); console.log (colors); console.log (colors.toPipedString ()); / / red | blue | green console.log (colors2); console.log (colors2.toPipedString ()); / / red2 | blue2 | green2

You will find that the so-called parasitic constructor pattern uses an extra new than the factory pattern when creating objects, and the results are actually the same.

But the author may want to use SpecialArray like a normal Array, although specialarray can be used as a function, but this is not the author's intention and becomes inelegant.

Do not use this mode when other modes are available.

But it is worth mentioning that the loop in the above example:

For (var I = 0, len = arguments.length; I < len; iTunes +) {values.push (arguments [I]);}

Can be replaced by:

Values.push.apply (values, arguments)

5.2 secure constructor model

Function person (name) {var o = new Object (); o.getName = function () {console.log (name);}; return o;} var person1 = person ('kevin'); person1.sayName (); / / kevin person1.name = "daisy"; person1.sayName (); / / kevin console.log (person1.name); / / daisy

A secure object is an object that has no public properties and whose methods do not reference this.

It is different from the parasitic constructor model in two ways:

The newly created instance method does not reference this

Call the constructor without using the new operator

Safe objects are best suited in some secure environments.

The secure constructor pattern, like the factory pattern, does not recognize the type to which the object belongs.

Thank you for your reading, the above is the content of "what is the way JavaScript creates objects?" after the study of this article, I believe you have a deeper understanding of the way JavaScript creates objects, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.