Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Javascript创建对象的几种模式 #37

Open
fredshare opened this issue Jun 23, 2017 · 0 comments
Open

Javascript创建对象的几种模式 #37

fredshare opened this issue Jun 23, 2017 · 0 comments
Labels

Comments

@fredshare
Copy link
Owner

fredshare commented Jun 23, 2017

一、原始模式

原始模式主要是两种,对象字面量和Object构造。如下

var a = {
    name : 'share',
    age : 19,
    method : function(){console.log(this.name)}
}
var a = new Object();
a.name = 'share';
a.age = 19;
a.method = function(){console.log(this.name)}

原始模式有一个问题,如果要批量生成多个a1、a2,就得不断重复copy代码了,所以有了下面的方法,工厂模式、构造器模式、圣杯模式等。

二、工厂模式

function parent(name){
    var child = {};
    child.name = name;
    child.method = function(){
        console.log(this.name);
    };   
    return child;
}
var childA = parent('lily');
var childB = parent('lucy');
childA.method(); //lily
childB.method(); //lucy
console.log(childA.method === childB.method) //false

工厂模式就是批量化生产,简单调用就可以进入造人模式。
由于是工厂暗箱操作的,所以你不能识别这个对象到底是什么类型。
经典工厂模式是直接执行parent()方法,而不是通过new的方式。混合工厂模式尽量不用。
工厂模式中每生成一个子类,就会重复生成相应的方法,代码臃肿。

三、构造函数模式

function Parent(name){
    this.name = name;
    this.method = function(){
        console.log(this.name);
    }
}
var childA = new Parent('lily');
var childB = new Parent('lucy');
childA.method(); //lily
childB.method(); //lucy
console.log(childA.method === childB.method) //false

构造器模式,用new的方式构造子类。同时构造器函数首字母大写。
如果直接执行Parent(),那么属性方法都赋值给window对象了。

四、原型模式

function Parent(){}
Parent.prototype.name = 'share';
Parent.prototype.method = function(){console.log(this.name)};
var childA = new Parent();
var childB = new Parent();
console.log(childA.name === childB.name); //true
console.log(childA.method === childB.method); //true

或者

function Parent(){}
Parent.prototype = {
    name : 'share',
    method : function(){console.log(this.name)}
};
var childA = new Parent();
var childB = new Parent();
console.log(childA.name === childB.name); //true
console.log(childA.method === childB.method); //true

原型属性和方法的共享,即所有实例中都只是引用原型中的属性方法,任何一个地方产生的改动会引起其他实例的变化。

五、构造器和原型的混合模式

function Parent(name){
    this.name = name;
}
Parent.prototype = {
    method : function(){
        console.log(this.name);
    }
}
var childA = new Parent('lily');
var childB = new Parent('lucy');
console.log(childA.name === childB.name); //false
console.log(childA.method === childB.method); //true

将构造器和原型模式的优点结合起来了。
需要独立的属性方法放入构造函数中,而可以共享的部分则放入原型中,这样做可以最大限度节省内存而又保留对象实例的独立性。

六、Object.create()方法

Object.create()可以接收两个参数:提供原型的对象,可选属性对象(这个对象包含对新创建对象的配置)。

var Car = {
    drive: function (miles) {
        return this.odometer += miles;
    }
};
var tesla = Object.create(Car, {
    'odometer': {
        value: 0,
        enumerable: true
     }     
));
console.log(tesla.drive(10));//10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant