Article From:https://www.cnblogs.com/wzp-monkey/p/9969925.html

1.Factory mode

ECMAScriptClasses cannot be created in the program, so functions are used to encapsulate the details of creating objects with specific interfaces.

For example:

        function createPerson(name,age,job) {
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function() {
                console.log(o.name);
            };
            return o;
        }
        var person1 = createPerson("Nicholas",29,"software Engineer");
        var person2 = createPerson("Greg",27,"Doctor");

  Disadvantage: You can’t know the type of object

2.Constructor Pattern

        function Person(name,age,job) {
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function() {
                console.log(this.name);
            };
        }
        var person1 = new Person("Nicholas",29,"software Engineer");
        var person2 = new Person("Greg",27,"Doctor");

  To create a new instance of Person, you must use the new operator. Calling constructors in this way actually takes four steps:

  (1)Create a new object;

  (2)Assign the scope of the execution environment to a new object (so this points to the new object)

  (3)Execute the code in the constructor (add attributes to this new object)

  (4)Return a new object

Advantages: The constructor can identify its instance as a specific type;

Disadvantage: Because instance methods are not shared, each method must be recreated on each instance.

3.Archetypal model

Each function has a prototype property, which is a pointer to an object that contains properties and methods that can be shared by all instances of a particular type.

For example:

        function Person(){
        }

        Person.prototype.name = "Nicholas";
        Person.prototype.age = "29";
        Person.prototype.job = "Software Engineer";
        Person.prototype.sayName = function() {
            console.log(this.name);
        };
        var person1 = new Person();
        person1.sayName();  //"Nicholas"

        var person2 = new Person();
        person2.sayName();  //"Niholas"

        console.log(person1.sayName == person2.sayName);  //true

  When a constructor is called to create a new instance, the inside of the instance will contain a pointer (internal property) to the prototype function object of the constructor, which ECMA Version 5 calls [[Prototype]. Although there is no standard way to access in scripts [[Prototy]Pe], but Firefox, Safira, and Chrome support a _proto_ on each object.

isPrototypeOf()

Although [[Prototype]] cannot be accessed in all implementations, the relationship between object instances and object prototypes can be determined by isPrototype Of ().

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

console.log(Person.prototype.isPrototypeOf(person2));  //true

  

Object.getPrototypeOf()

ECMAScript 5A new method called Object. getPrototypeOf () was added to return the value of [[Prototype]].

console.log(Object.getPrototypeOf(person1) == Person.prototype));  //true

console.log(Object.getPrototypeOf(person1).name));  //"Nicholas" 

hasOwnProperty()

HasOwnPropertyOf () method can be used to detect whether an attribute exists in an instance or in a prototype. This method (don’t forget that it inherits from Object) returns true only if the given attribute exists in the object instance.

Prototype and in operator

inOperator

inOperators return true when they can access a given property through an object.

So as long as the in operator returns true and hasOwnProperty () returns false, you can determine that the attribute is an attribute in the prototype.

for-inOperator

When using for-in loops, all enumerated attributes that can be accessed by objects are returned, including both attributes that exist in instances and attributes that exist in prototypes. The non-enumerable properties in the prototype are masked (i.e. [[Enumer]The instance attributes marked as false are also returned in the for-in loop. (Because all developer-defined attributes are enumerable by rule)

Object.key()

To obtain all enumerable instance attributes on an object, you can use the Object. key () method of ECMAScript5. This method takes an object as a parameter and returns an array of strings containing all enumerable attributes.

var keys = Object.keys(Person.prototype);
console.log(keys); //"name,age,job,sayName"
var p1 = new Person();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
condole.log(p1keys); //"name,age"

Object.getOwnPropertyNames()

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

var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //"constructor,name,age,job,sayName"

Simpler prototype grammar

Rewrite the entire prototype function using object literals, such as:

function Person(){
}
Person.prototype = {
constructor : Person,
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
}
};

  Note that resetting the constructor attribute in this way causes its [[Enumerable]] feature to be set to true. (By default, native constructor properties are not enumerated) So ECMAScript can be usedObject, defineProperty () method resets the constructor.

For example:

function Person(){
}
Person.prototype = {
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
}
};

//Reset the constructor for ECMAScript 5 compatible browsers onlyObject. defineProperty (Person. prototype, "constructor", {Enumerable:False,Value: Person};

Dynamics of Prototypes

Attributes and methods can be added to the prototype at any time, and modifications can be immediately reflected in object instances.

var friend = new Person();
Person.prototype.sayHi = function(){
alert("hi");
};
friend.sayHi(); //"hi"(No problem!

But if you rewrite the entire prototype object, the situation is different. Rewriting prototype objects severs the connection between existing prototypes and any object instances that previously existed.

function Person(){
}
var friend = new Person();
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
}
};
friend.sayName(); //error

Prototype of native object

All native reference types (Object, Array, String, etc.) define methods on the prototype of their constructors.

console.log(typeof Array.prototype.sort); //"function"
console.log(typeof String.prototype.substring); //"function"

By the type of native object, not only can we get more references to default methods, but also we can define new methods. The following code adds a method called startWith () to the basic wrapper type String:

String.prototype.dtartWith = function (text) {
return this.indexOf(text) == 0;
};

var msg = "Hello World!";
console.log(msg.startWith("Hello"));  //true  

The Problem of Prototype Objects

The biggest problem with prototype patterns is due to their shared nature.

function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

Combining constructor pattern with prototype pattern

The most common way to create custom types is to combine the constructor pattern with the prototype pattern. The constructor pattern is used to define instance attributes, while the prototype pattern is used to define methods and shared attributes.

        function Person() {
            this.name = name;
            this.age = age;
            this.job = job;
            this.friends = ["asahrlby", "Count"];
        }

        Person.prototype = {
            constructor: Person,
            sayName: function () {
                console.log(this.name);
            }
        }

        var person1 = new Person("Nicholas", 29, "Software Engineer");
        var person2 = new Person("Gery", 27, "Doctor");

        person1.friends.push("Van");
        console.log(person1.friends); //"Shelby,Count,Van"
        console.log(person2.friends); //"Shelby,Count"
        console.log(person1.friends === person2.friends); //false
        console.log(person1.sayName === person2.sayName); //true

Dynamic prototype model

Determine whether the prototype needs to be initialized by checking whether a method that should exist is valid.

function Person(name, age, job){
//attributeThis. name = name;This. age = age;This. job = job;/ / methodIf (typeof this. sayName!= "function") {PeRson. prototype. sayName = function (){Alert (this. name);}; // This code will only be executed when the constructor is first called}}Var friend = nEW Person ("Nicholas", 29, "Software Engineer");Friend. sayName ();

Parasitic constructor pattern

function Person(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};  //Create an additional methodReturn o;}Var friend = new Person ("Nicholas", 29, "Software Engineer");Friend. sayName//"Nicholas"

Steady constructor model

The so-called prudent object refers to an object without public attributes and whose method does not refer to this. Secure objects are best suited to secure environments where this and new are prohibited, or to prevent data from being altered by other applications, such as Mashup programs.When used. A robust constructor follows a pattern similar to that of a parasitic constructor, but differs in two ways: one is that the instance method of the newly created object does not reference this; the other is that the constructor is invoked without using the new operator.

function Person(name, age, job){
//Create the object to returnVar o = new Object ();// Private variables and functions can be defined here// Addition MethodO. sayName = function (){Alert (name);}/ / return toasReturn o;}Var friend = Person ("Nicholas", 29, "Software Engineer");Friend. sayName (); //"Nichol"As "

Objects created using parasitic and safe constructor patterns are not related to constructors or to the prototype properties of constructors; that is, the objects returned by constructors are no different from those created outside constructors.

 

Link of this Article: Creating Objects in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *