原生JS创建对象方式

工厂模式创建对象

考虑到ECAMScript中无法创建类，就发明了用函数封装以特定的接口创建对象

    function creatPerson(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name)
        };
        return o;
    };
    
    var person1 = creatPerson('hefeng6500',25,'Programmer');
    person1.sayName();
    function creatPerson(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function(){
            alert(this.name)
        };
        return o;
    };
    
    var person1 = creatPerson('hefeng6500',25,'Programmer');
    person1.sayName();

虽然解决了对象的创建问题,但是没有解决对象的识别问题（即知道对象的类型）

 

构造函数模式

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            alert(this.name);
        }
    };
    var person1 = new Person('yanglong',25,'Software Engineer')
    var person2 = new Person('bob',25,'Doctor')
    person1.sayName();
    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            alert(this.name);
        }
    };
    var person1 = new Person('yanglong',25,'Software Engineer')
    var person2 = new Person('bob',25,'Doctor')
    person1.sayName();

上述构造函数创建对象的方式虽好,但是当创建多个对象时,每次都要创建一个sayName()方法,每次创建sayName()，但创建出来的都不是同一个Function实例不要忘了ES中函数也是对象,每定义一个函数,也就实例化了一个对象

 

this.sayName = function(){
    alert(this.name);
 }
 相当于
 this.sayName = new Function('alert(this.name)')

    alert(this.name);
 }

所以,对于上述代码,我们可以这么写,把创建方法的代码提出出来放置于全局作用域，就不会再出现：创建上述两个对象的问题了。但是，慢慢的你还是会发现这么写还是有问题

     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('yanglong',25,'Software Engineer')
    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('yanglong',25,'Software Engineer')

 

刚说道上面的方法会有问题，那么问题是什么呢？（1）在全局作用域定义出来的函数只能被某一个对象调用，这让定义在全局作用域有点名不副实啊（2）如果需要定义很多个方法呢？全局作用域岂不是要定义若干的函数，那这样我们自定义的引用类型还有什么封装性可言呢？于是乎，就要用到"原型模式"啦

 

创建的每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,这个对象的用途包含可以由特定类型的实例共享的所有方法和属性那么就是说:prototype就是通过调用构造函数创建的对象实例的原型对象(这句话不好理解呵!就是说,通过构造函数创建了person1,sayName()这个方法在person1的原型对象里面)使用原型对象的好处: 让所有的对象实例共享它所包含的方法和属性这么做构造函数中就可以不必定义对象的属性和方法了,我们直接把它们写到原型对象里面

 

原型模式

function Person (){};
Person.prototype.name = 'hefeng6500';
Person.prototype.age = 25;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function(){
    alert(this.name)
};
var person1 = new Person();
var person2 = new Person();
alert(person1.sayName == person2.sayName)  //true

Person.prototype.name = 'hefeng6500';
Person.prototype.age = 25;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function(){
    alert(this.name)
};
var person1 = new Person();
var person2 = new Person();
alert(person1.sayName == person2.sayName)  //true

只要创建函数,这个函数的prototype属性就会指向这个函数的原型对象，默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,constructor是一个指向prototype属性所在函数的指针也就是说 Person.prototype.constructor 指向 Person

 

prototype强大吧?那是足够强大,可是也有弊端,看看下面的例子,有点"城门失火，殃及池鱼"的感觉

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

    
}
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

看，我本打算修改person1.friends，结果发现person2.friends也被改变了，因为peron2也是引用类型的值,修改原型对象,对它也会产生影响所以，纯粹的使用原型创建对象也不靠谱，那么我们怎么办呢？组合式创建吧，构造函数+原型模式

 

构造函数+原型模式

构造函数+原型模式 创建对象构造函数：用于定义实例属性原型模式：用于定义方法和共享属性优势：每个实例都会有自己的一份实例属性的副本，同时又共享着对方法的引用，最大限度的节省了内存，这种混用模式还支持了向构造函数传递参数的特点，可谓一取两得

 

看这个例子，这么写是不是完美？那是当然的啦，ECMAScript业界使用最广泛的、认同度最高的一种创建自定义类型的方法，堪称完美！

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

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

 

最后,还有什么寄生构造函数、稳妥构造函数,依我看都是浮云!