Js create object-oriented learning (a) objects

A, new operator + Object Create Object

1 var person = new Object();
2     person.name = "lisi";
3     person.age = 21;
4     person.family = ["lida","lier","wangwu"];
5     person.say = function(){
6         alert(this.name);
7     }

Second, create an object literal style

1 var person ={
2         name: "lisi",
3         age: 21,
4         family: ["lida","lier","wangwu"],
5         say: function(){
6             alert(this.name);
7         }
8     };

These two methods when using the same interface to create multiple objects, it will generate a lot of duplicate code, in order to solve this problem, the factory model was developed.

Third, the factory pattern

createPerson function (name, Age, Family) { 
    var = O new new Object (); 
    o.name = name; 
    o.age = Age; 
    o.family = Family; 
    o.say = function () { 
        Alert (this.name) ; 
    } 
    return O; 
} 

var = PERSON1 createPerson ( "Lisi", 21 is, [ "Lida", "Lier", "wangwu"]); // can not determine the instanceof whose example, he is only an object is determined, constructors can be judged 
var = PERSON2 createPerson ( "wangwu", 18 is, [ "Lida", "Lier", "Lisi"]); 
the console.log (PERSON1 the instanceof Object); // to true

Factory mode solves the problem of repeated instances of a plurality of objects, but does not solve the problem of object recognition (factory mode, but have no way to identify the type of the object, as are all Object, unlike Date, Array, etc., in the present embodiment, obtained o is an object, type of object is object, so there constructor mode).

Fourth, the model constructor

function Person(name,age,family) {
    this.name = name;
    this.age = age;
    this.family = family;
    this.say = function(){
        alert(this.name);
    }
}
var person1 = new Person("lisi",21,["lida","lier","wangwu"]);
var person2 = new Person("lisi",21,["lida","lier","lisi"]);
console.log(person1 instanceof Object); //true
console.log(person1 instanceof Person); //true
console.log(person2 instanceof Object); //true
console.log(person2 instanceof Person); //true
console.log(person1.constructor);      //constructor 属性返回对创建此对象的数组、函数的引用

The constructor is an ordinary function, and the way to create a normal function is no different, except that the constructor's first letter capitalized habit.

The other is a different way of calling ordinary functions are called directly, while the constructor need to use the new keyword to call. In this way, call the constructor will actually go through the following four steps:

(1) create a new object;

(2) The scope of the constructor assigns a new object (so this points to the new object);

(3) perform the constructor code (added to the new object attribute);

(4) returns a new object. 

 

Comparative factory model has the following differences:

1, does not explicitly create objects

2, directly assigned to the attributes and methods of this object

3, there is no return statement

 

Although this method is easy to use, but not without problems. For example, when you need to create 100 Person, the 100 objects are separate individuals, private property between them are not equal, when creating 100 such objects, add an object has a method that created 100 objects will create 100 method, but these methods are the same function, there is no need to waste the memory space, so our custom reference types would in no encapsulation at all, thus creating the prototype model.

Fifth, the prototype model

 1 function Person() {
 2 }
 3 
 4 Person.prototype.name = "lisi";
 5 Person.prototype.age = 21;
 6 Person.prototype.family = ["lida","lier","wangwu"];
 7 Person.prototype.say = function(){
 8     alert(this.name);
 9 };
10 console.log(Person.prototype);   //Object{name: 'lisi', age: 21, family: Array[3]}
11 
12 var person1 = new Person();        //创建一个实例person1
13 console.log(person1.name);        //lisi
14 
15 var person2 = new Person();        //创建实例person2
16 person2.name = "wangwu";
17 person2.family = ["lida","lier","lisi"];
18 console.log(person2);            //Person {name: "wangwu", family: Array[3]}
19 // console.log(person2.prototype.name); // error
20 console.log(person2.age);              //21

Benefits prototype model is that all object instances share its properties and methods (the so-called common attributes), you can also set the example of their attributes (methods) (the so-called private property) such as 16, 17 lines of code, you can covering the same name attribute (method) on a prototype object.

 

Six, mixed mode (Mode constructor + prototype pattern)

Constructors pattern for defining instance property, and a method for defining the prototype model attributes shared

The Person function. 1 (name, Age, Family) { 
 2 this.name = name; 
 . 3 this.age = Age; 
 . 4 this.family = Family; 
 . 5} 
 . 6 
 . 7 = {Person.prototype 
 . 8 constructor: the Person, each // function has prototype property, the prototype of the object point, the prototype object has attribute constructor, which is a pointer to where the function prototype property 
 . 9 say: function () { 
10 Alert (this.name); 
. 11} 
12 is} 
13 is 
14 new new PERSON1 the Person = var ( "Lisi", 21 is, [ "Lida", "Lier", "wangwu"]); 
15 the console.log (PERSON1); 
16 var = new new PERSON2 the Person ( "wangwu", 21 is, [ " Lida "," Lier "," Lisi "]); 
. 17 the console.log (PERSON2);

As can be seen, with reference to the mixed-mode share the same method, but also to ensure that each instance has its own private property. Maximize the saving memory