不会JS中的OOP,你也太菜了吧!(第一篇)

1、你必须知道的

1) 字面量数组

2) 原型安全

3) 原型链app

4) 构造函数函数

5) 稳妥对象(没有公共属性,并且其方法也不引用this的对象。稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候)this

 

2、开始建立对象吧

<1>: 首先来看两种最基本的建立对象的方法

1> 使用Object建立对象

var o = new Object();
o.sname = 'JChen___1';
o.showName = function(){
    return this.sname;
}

2> 使用对象字面量建立对象

var o = {
    name: 'JChen___2',
    getName: function(){
        return this.name;
    }
}

可是这两个方式有个明显的缺点:使用同一个接口建立不少对象,会产生大量的重复代码spa

 

<2> 接下来看看几种建立对象的模式吧

1>工厂模式

function create(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        return this.name;
    };
    return o;
}
var p1 = create('JChen___');

工厂模式也有一个缺点:就是没有解决对象识别的问题(即怎样知道一个对象的类型)。prototype

 

2> 构造函数模式

function create2(name){
    this.name = name;
    this.sayName = function(){
        return this.name;
    };
    //this.sayName = sayName;
}
//function sayName(){ return this.name};
var p1 = new create2('JChen___4');

构造函数模式也有一个缺点:就是每一个方法都要在每一个实例上建立一遍。code

固然咱们能够用上面的两行注释掉了代码来屏蔽上面那个缺点。对象

可是……,咱们又产生了一个新问题——全局变量。若是有不少方法,咱们岂不是要定义不少个全局变量函数。这是个可怕的问题。blog

 

3> 原型模式

1) 普通方法

function create3(){}
create3.prototype.name = 'JChen___5';
create3.prototype.sayName = function(){
    return this.name;
};
var p1 = new create3();

 

2) 原型字面量方法——我姑且这么称吧

function create3(){}
create3.prototype = {
    constructor: create3, //咱们要设置它的constructor,若是它很重要
    name: 'JChen___5',
    sayName: function(){
        return this.name;
    }
};
var p1 = new create3();

原型的缺点:

1): 不能传参

2): 共享了变量

 

4> 构造+原型(模式)

function create4(name){
    this.name = name;
}
create4.prototype.sayName = function(){
    return this.name;
}
var p1 = new create4('JChen___6');

这种模式是目前使用最普遍、认同度最高的一种建立自定义类型的方法。

 

5> 动态原型模式

function create5(name){
    this.name = name;
    if(typeof this.sayName != 'function'){
        create5.prototype.sayName = function(){
            return this.name;
        }
    }
}
var p1 = new create5('JChen___7');

这种方法确实也是十分完美的一种方法。

 

6> 寄生构造函数模式

function create6(name){
    var o = new Object();
    o.name = name;
    o.sayName = function(){
        return this.name;
    }
    return o;
}
var p1 = new create6('JChen___8');

注意那个return o。构造函数在不返回值的状况下,会返回新对象实例。而经过在构造函数的末尾加入return 语句,能够重写调用构造函数时返回的值。

这个种用法能够用在,假设咱们想建立一个具备额外方法的特殊数组。因为不能直接修改Array的构造函数,所以可使用这个模式。

function specialArray(){
    var values = new Array();

    values.push.apply(values, arguments);

    values.join2 = function(){
        return this.join('|');
    };

    return values;
}
var colors = new specialArray('red', 'blue', 'green');
colors.join2();//returned: red|blue|green 

 

7>稳妥构造函数模式

稳妥构造函数遵循与寄生构造函数相似的模式,可是有两点不一样:

一是新建立对象的实现方法不引用this

二是不使用new操做符调用构造函数。

function create7(name){
    var o = new Object();
    var age = 12;                //私有变量
    o.sayName = function(){      //私有方法
        return name + ' ' + age;
    }
    return o;
}
var p1 = create7('JChen___9');

 

3、总结

对象(类)的建立方法大概就这9种了吧。

建立是没问题了,可是这是第一步,如何实现继承呢?且看下回分解。

相关文章
相关标签/搜索