"JavaScript Advanced Programming" object creation of reading notes

"JavaScript advanced Programming" has been read two times, some important content will always forget, write a book note memo

Creating Objects Factory mode

Factory mode Advantages: With the concept of encapsulation, solve the problem of creating multiple similar objects

Cons: No problem solving object recognition, all objects are only instances of object

functionCreateperson (name,age,job) {varo=NewObject (); O.name=name; O.age=Age ; O.job=job; O.sayname=function() {alert ( This. Name);    }; returno;}varPerson1=createperson ("Jack", "Engineer");//Detecting Object TypesAlert (Person1instanceofObject)//trueAlert (Person1instanceofperson)//error person was not defined

View Code

Constructor mode

The advantage of a constructor pattern over a factory pattern is that the constructor pattern can mark his instance as a specific type

functionPerson (name,age,job) { This. name=name;  This. age=Age ;  This. job=job;  This. sayname=function() {alert ( This. Name); };}varperson1=NewPerson ("Jack", "Engineer");//Detecting Object TypesAlert (Person1instanceofObject)//trueAlert (Person1instanceofperson)//true

View Code

Constructors are also functions that are not different from other functions if they are not called by the new operator

functionPerson (name,age,job) { This. name=name;  This. age=Age ;  This. job=job;  This. sayname=function() {alert ( This. Name); };}//called in constructor modevarperson1=NewPerson ("Jack", "Engineer");p erson1.sayname ();//Jack//call with normal functionPerson ("Lily", "the Actor");//execution Environment is the global execution, this point to windowWindow.sayname ();//Lily//called in the scope of another objectvaro=NewObject (); Person.apply (o,["Jim", "Teacher"]);//extend the scope of person to instance object oO.sayname ();//Jim

View Code

The disadvantage of the constructor pattern is that the instance method cannot be reused, and the Person1,person2 method of creating two objects is unequal, and the solution can move the function definition outside the constructor, which uses the function pointer as the object property, pointing to the external function definition.

However, this implementation first pollutes the global scope, and secondly destroys the encapsulation

function Person (name,age,job) {    this. name=name;      this. age= age;     this. job=job;     this. sayname=sayname;} function Sayname () {    alert (this. Name);} var person1=New person ("Karl", "Doctor");

View CodePrototype mode

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

 function   person () {} Person.prototype.name  = "Jim" ; Person.prototype.age  =29; Person.prototype.job  = "Teacher" ;    Person.prototype.sayName  =function   () { Alert ( this  . Name);  var  person1=new   person ();p erson1.sayname ();  //  var  person2=new   person (); alert (person1.sayname  ==person2.sayname); // true  
 

View Code

The relationship between this constructor, the prototype object, and the instance object is as follows

Prototype mode simple notation

function Person () {    }person.prototype={    Constructor:person,// object literal creates a new object, if not specified, Constructor points to object    name: "Jim", age    :$,    job:"Teacher",    Sayname:function() {        alert (this. Name);    }};

View Code

Disadvantages of prototype mode: All instances get the same property value by default

Constructor and prototype blending modes

functionPerson (name,age,job) { This. name=name;  This. age=Age ;  This. job=job;  This. friends=["Tom", "Jack"];} Person.prototype={Constructor:person,//object literal creates a new object, if not specified, constructor points to an objectSayname:function() {alert ( This. Name); }};varperson1=NewPerson ("Jim", "Teacher");varPerson2=NewPerson ("Lily", "Actor");p Erson1.friends.push ("Mark"); alert (Person1.friends===person2.friends);//falsealert (person1.sayname===person2.sayname);//true

View Code

Dynamic Prototyping Mode

Personally think this pattern is the most elegant, all code encapsulated in constructors, the first call to add methods to the prototype object

functionPerson (name,age,job) { This. name=name;  This. age=Age ;  This. job=job;  This. friends=["Tom", "Jack"]; //Method    if(typeof  This. sayname! = "function") {Person.prototype.sayName=function() {alert ( This. Name);    }; }}

View Code

"JavaScript Advanced Programming" object creation of reading notes