不会JS中的OOP,你也太菜了吧!(第一篇)
一、你必须知道的
1) 字面量
2) 原型
3) 原型链
4) 构造函数
5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象。稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候)
二、开始创建对象吧
<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; } }
但是这两个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。
<2> 接下来看看几种创建对象的模式吧
1>工厂模式
function create(name){ var o = new Object(); o.name = name; o.sayName = function(){ return this.name; }; return o; } var p1 = create('JChen___');
工厂模式也有一个缺点:就是没有解决对象识别的问题(即怎样知道一个对象的类型)。
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');
构造函数模式也有一个缺点:就是每个方法都要在每个实例上创建一遍。
当然我们可以用上面的两行注释掉了代码来屏蔽上面那个缺点。
但是……,我们又产生了一个新问题——全局变量。如果有很多方法,我们岂不是要定义很多个全局变量函数。这是个可怕的问题。
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');
三、总结
对象(类)的创建方法大概就这9种了吧。
创建是没问题了,但是这是第一步,如何实现继承呢?且看下回分解。