JS创建对象的7中方式

1、  工厂模式

2、  构造函数模式          [解决对象识别问题]

3、  原型模式                   [解决方法和属性共享问题]

4、  组合使用构造函数模式和原型模式

5、  动态原型模式

6、  寄生构造函数模式

7、  稳妥构造函数模式

• 最简单的方式：创建一个Object的实例，然后为它添加属性和方法。

缺点：使用同一个接口创建很多对象，会产生大量的重复代码

var person = new Object();
person.name = 'mackxu';
person.age = 23;
person.job = 'Software Engineer';

person.sayName = function() {
    debug(this.name);
};

• 工厂模式：这种模式抽象了创建具体对象的过程。

具体做法：用函数封装以特定接口创建对象的细节

缺点：对比上一个方法解决了创建多个相似对象的问题，但却没有解决对象识别的问题

    function createPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            debug(this.name);
        };
        return o;
    }

• 构造函数模式：解决了对象识别问题

使用new操作符调用构造函数经历4个步骤：

1、 创建一个新对象

2、 将构造函数的作用域赋给新对象（this指向这个新对象）

3、 执行构造函数中的代码（为这个新对象添加属性）

4、 返回新对象

    function Emp(name, age, job) {
       this.name = name;
       this.age = age;
       this.job = job;
       this.sayName = function() {
           debug(this.name);
       };
    }
var p = new Emp();
模拟过程如下：

var p = {};
Emp.apply(p);
p.__proto__ = Emp.prototype;

将构造函数当作函数

var person = new Person('mackxu', 23, 'Software Engineer');
    person.sayName();
    debug(person.constructor == Person);
    debug(person instanceof Person);    
    //var person2 = Person('mack', 22, 'Doctor');
    //作为普通的函数
    Person('mack', 22, 'Doctor');
    sayName();        // == window.sagName();
    //在另外一个对象的作用域中调用
    var o = new Object();
    //this 指向o对象
    Person.call(o, 'zhangsan', 23, 'Nurse');
    o.sayName();    //zhangsan    
    debug(o instanceof Person);        //false

问题：方法不能被实例共享

    解决方法有二：1、把方法定义到构造函数外面，但破坏了封装性

                2、用原型模式共享方法

• 原型模式(解决属性方法共享问题)

每一个函数都有一个prototype属性，这个属性是一个对象，它的用途是保存可以由特定类型的所有实例共享的属性和方法。

function Person() {
        //...
    }
    Person.prototype.name = 'mackxu';
    Person.prototype.age = 22;
    Person.prototype.job = 'Software Engineer';
    Person.prototype.sayName = function() {
        debug(this.name);
    };
debug(person.sayName == person2.sayName)    //true

理解原型：

debug(Person.prototype.isPrototypeOf(person));    //true
使用delete操作符删除实例的属性
使用hasOwnProperty()方法可以检测一个属性在实例中，还是在于原型中。
(准确的说：只能确定在实例中的属性，返回true)
    debug(person2.hasOwnProperty('name'));    //false
    debug('name' in person2);                //true
    //自定义函数判断属性在原型中定义
    function hasPrototypeProperty(object, name) {
        return !object.hasOwnProperty(name) && (name in object);
    }
    debug(hasPrototypeProperty(person2, 'name'));    //true
    //会屏蔽原型中与实例中相同的属性
    for (var property in person) {
        debug(property);
    }

更简单的原型语法[字面量对象]

function Person() {
        //...
    }
    Person.prototype = {
        constructor: Person,
        name : 'mackxu',
        age  : 22,
        job  : 'Software Engineer',
        sayName: function() {
            debug(this.name);    
        }
    };
    var person2 = new Person();
    debug(person2.name);
    debug(person2 instanceof Person);        //true
    debug(person2.constructor);            //Person{}
    debug(Person.prototype.constructor);    //Person{}    

原型的动态性

由于在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能够立即从实例上反映出来

——即使是先创建了实例后修改原型也照样如此。

function Person() {
        //.....
    }
    var person = new Person();
    Person.prototype.sayHi = function() {
         debug('Hi');
};
 person.sayHi();        //Hi

    Person.prototype = {
        name: 'mackxu',
        sayHi: function() {
            debug('Hi');
        }
    };
    person.sayHi();        //error

原理：

 

原生对象的原型

通过原生对象的原型，不仅可以取得所有默认方法的引用，而且可以定义新方法

    //为基本包装类型String添加自定义方法

String.prototype.startWith = function(text) {
        return this.indexOf(text) == 0;
    };
    var msg = 'Hello World';
    debug(msg.startWith('Hello'));    //true

原型对象的问题：

1、 省略了为构造函数传递初始化参数的环节，

2、 其共享本性导致的（对于引用类型属性）

function Person() {
        //...
    }
    Person.prototype = {
        constructor: Person,
        students: ['aaa', 'bbb']
    };
    //students被实例所共享，违背了我们的初衷
    var person2 = new Person();
    debug(person2.students);
    var person3 = new Person();
    person2.students.push('ccc');     
    debug(person3.students);        //"aaa", "bbb", "ccc"

3、 实例：属性是自己的，方法是被共享的

• 组合使用构造函数模式和原型模式

构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性

结果，每个实例都有都会有自己的一份实例属性的副本，同时共享着对方的方法引用

    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ['zhangsan', 'lisi'];
    }
    Person.prototype = {
        constructor: Person;
        sayName: function() {
            debug(this.name);
        };
    };
    var person2 = new Person('mackxu', 22, 'Software Engineer');
    var person3 = new Person('mackxu2', 23, 'Software Engineer');
    person2.sayName();        //mackxu
    person2.friends.push('wangwu');
    debug(person2.friends);        //['zhangsan', 'lisi', 'wangwu']
    debug(person3.friends);        //['zhangsan', 'lisi']

• 动态原型模式

把所有信息都封装在构造函数中，通过在构造函数中初始化原型，保持了同时使用构造函数和原型的有点。可以通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型

    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ['zhangsan', 'lisi'];
        
        if (typeof this.sayName != 'function') {
            Person.prototype.sayName = function() {
                debug(this.name);
            };
            Person.prototype.sayHi = function() {
                debug("Hi");
            };
        }
    }
    var person2 = new Person('mackxu', 22, 'Software Engineer');
    person2.sayName();        //mackxu
    person2.sayHi();

    使用动态原型模式时，不能使用对象字面量重写原型。

• 寄生构造函数模式

构造函数在不返回值的情况下，默认会返回新对象实例。而通过在构造函数的末尾添加return，可以重写调用构造函数时返回的值。

注意：返回的对象与构造函数或者与构造函数的原型属性之间没关系

    function Person(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName = function() {
            debug(this.name);
        };
        return o;
    }
    
    var person2 = new Person('mackxu', 22, 'Software Engineer');
    person2.sayName();        //mackxu
    
    function SpecialArray() {
        //创建数组
        var values = new Array();
        //添加值
        values.push.apply(values, arguments);
        //添加方法
        values.toPipedString = function() {
            return this.join('|');
        };
        return values;
    }    
    //此处new的作用是什么??
    var colors = new SpecialArray('red', 'blue', 'green');
    debug(colors.toPipedString());

• 稳妥构造函数模式

禁止使用this和new，所谓稳妥对象，指的是没有公共属性，而且其方法也不引用this的对象