JavaScript的写类方式（1）

http://www.cnblogs.com/snandy/archive/2011/03/06/1971764.html

从这篇起，会由浅到深的分析JS OO之写类方式，大概会有5-8篇。后面陆续会分析流行库（框架）的写类方式。一些写类工具函数或框架的写类方式本质上都是构造函数+原型。只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码。或者说组织代码的方式使用面向对象方式。当然用JS也可写出函数式的代码，它是多泛型的。

为了讨论的单一性，暂不考虑类的继承，(私有,受保护)属性或方法。EMCAScript中实际没有类(class)的概念，但可以把它理解为更广义的概念。

1、构造函数方式

01
/**

02
 * Person类：定义一个人，有个属性name，和一个getName方法

03
 * @param {String} name

04
 */

05
function Person(name) {

06
    this.name = name;

07
    this.getName = function() {

08
        return this.name;

09
    }

10
}

这种风格让写过Java的有点亲切在于构造一个对象需要配置一些参数，参数要赋值给类里面this。但与Java的区别是JS用function来代替class，参数也无需定义类型。

类写好了，我们造几个对象：

1
var p1 = new Person("Jack");

2
var p2 = new Person("Tom");

3
console.log(p1 instanceof Person);//true

4
console.log(p2 instanceof Person);//true

控制台输出也证明了p1，p2的确是类Person的对象实例。

这种方式的优点是：可以根据参数来构造不同的对象实例，缺点是构造时每个实例对象都会生成getName方法版本，造成了内存的浪费。

经验丰富的程序员用一个外部函数来代替类方法，达到了每个对象共享同一个方法。改写后的类如下：

1
//外部函数

2
function getName() {

3
    return this.name;

4
}

5
function Person(name) {

6
    this.name = name;

7
    this.getName = getName;//注意这里

8
}

有人可能觉得代码风格有点差强人意，怎么看也没有Java那么紧凑。但的确可以减少内存的消耗。

2、原型方式

1
/**

2
 * Person类：定义一个人，有个属性name，和一个getName方法

3
 */

4
function Person(){}

5
Person.prototype.name = "jack";

6
Person.prototype.getName = function() { return this.name;}

把类的属性（字段），方法都挂在prototype上。
造几个对象测试下

1
var p1 = new Person();

2
var p2 = new Person();

3
console.log(p1.getName());//jack

4
console.log(p2.getName());//jack

可以看出输出的都是jack，原型方式的缺点就是不能通过参数来构造对象实例 (一般每个对象的属性是不相同的) ，优点是所有对象实例都共享getName方法（相对于构造函数方式），没有造成内存浪费。

3、构造函数+原型

取前面两种的优点：
a、用构造函数来定义类属性（字段）。
b、用原型方式来定义类的方法。

01
/**

02
 * Person类：定义一个人，有个属性name，和一个getName方法

03
 * @param {String} name

04
 */

05
function Person(name) {

06
    this.name = name;

07
}

08
Person.prototype.getName = function() {

09
    return this.name;

10
}

这样，即可通过构造函数构造不同name的人，对象实例也都共享getName方法，不会造成内存浪费。
但似乎这样的代码风格似乎仍然没有Java的类那么紧凑，把属性，构造方法（函数），方法都包在大括号内。

public class Person {

    //属性（字段）

    String name;    

    //构造方法（函数）

    Person(String name) {

        this.name = name;

    }   

    //方法

    String getName() {

        return this.name;

    }

}

为了让JS代码风格更紧凑，把挂在prototype的方法代码移到function Person的大括号内。

1
function Person(name) {

2
    this.name = name;

3
    Person.prototype.getName = function() {

4
        return this.name;

5
    }

6
}

似乎很神奇，还能这么写啊！验证一下

1
var p1 = new Person("Jack");

2
var p2 = new Person("Tom");

3
console.log(p1.getName());//Jack

4
console.log(p2.getName());//Tom

没有报错，控制台也正确输出了。说明可以这么写，似乎很完美。
a 、可以通过传参构造对象实例
b 、对象实例都共享同一份方法不造成内存浪费
c 、代码风格也比较紧凑

但每次new一个对象的时候都会执行

1
Person.prototype.getName = function() {

2
        return this.name;

3
}

造成了不必要的重复的运算。因为getName方法挂在prototype上只需执行一次即可。只需稍微改造下

01
function Person(name) {

02
    this.name = name;

03
    if(Person._init==undefined) {

04
        alert("我只执行一次！");

05
        Person.prototype.getName = function() {

06
            return this.name;

07
        }

08
        Person._init = 1;   

09
    }   

10
}

new两个对象，

`1`	`var` `p1 =` `new` `Person("Andy");` `//第一次new会弹出'我只执行一次！'`

`2`	`var` `p2 =` `new` `Person("Lily");` `//以后new的对象不会再执行了`

这篇开始会记录一些写类的工具函数，通过上篇我们知道本质上都是构造函数+原型。理解了它碰到各式各样的写类方式就不惧怕了。以下列举的有的是工作中碰到的，有的是从书籍或网上收集的。见过的朋友就忽视它吧。

构造函数 + 原型直接组装一个类；同一构造函数将组装出同一类型

01
/**

02
 * $class 写类工具函数之一

03
 * @param {Function} constructor

04
 * @param {Object} prototype

05
 */

06
function $class(constructor,prototype) {

07
    var c = constructor || function(){};

08
    var p = prototype || {};

09
    c.prototype = p;

10
    return c;

11
}

用构造函数来生成类实例的属性（字段），原型对象用来生成类实例的方法。

01
//构造函数

02
function Person(name) {

03
    this.name = name;

04
}

05
//原型对象

06
var proto = {

07
    getName : function(){return this.name},

08
    setName : function(name){this.name = name;} 

09
}

10
//组装

11
var Man = $class(Person,proto);

12
var Woman = $class(Person,proto);

这时候已经得到了两个类Man，Woman。并且是同一个类型的。测试如下：

`1`	`console.log(Man == Woman);` `//true`

`2`	`console.log(Man.prototype == Woman.prototype);` `//true`

创建对象看看

1
var man = new Man("Andy");

2
var woman = new Woman("Lily");

3
 
4
console.log(man instanceof Man); //true

5
console.log(woman instanceof Woman); //true

6
console.log(man instanceof Person); //true

7
console.log(woman instanceof Person); //true

ok，一切如我们所期望。但是有个问题，下面代码的结果输出false

`1`	`console.log(man.constructor == Person);//false<br>`

这让人不悦：从以上的代码看出man的确是通过Man类new出来的 var man = new Man("Andy")，那么对象实例man的构造器应该指向Man，但为何事与愿违呢？

原因就在于$class中重写了Person的原型：c.prototype = p;
好了，我们把$class稍微改写下，将方法都挂在构造器的原型上（而不是重写构造器的原型），如下：

1
function $class(constructor,prototype) {

2
    var c = constructor || function(){};

3
    var p = prototype || {};

4
//  c.prototype = p;

5
    for(var atr in p)

6
        c.prototype[atr] = p[atr];

7
    return c;

8
}

续上篇，

构造函数+原型组装一个类；同一构造函数可以定义出多个类型

01
/**

02
 * $class 写类工具函数之二

03
 * @param {Function} constructor

04
 * @param {Object} prototype

05
 */

06
function $class(constructor,prototype) {

07
    var c = constructor || function(){};

08
    var p = prototype || {};    

09
    return function() {

10
        for(var atr in p) {

11
            arguments.callee.prototype[atr] = p[atr];

12
        }           

13
        c.apply(this,arguments);

14
    }

15
}

与上一篇方式类似，仍然用构造函数，原型对象，定义两个类。

01
//构造函数

02
function Person(name) {

03
    this.name = name;

04
}

05
//原型对象

06
var proto = {

07
    getName : function(){return this.name},

08
    setName : function(name){this.name = name;} 

09
}

10
//写两个类

11
var Man = $class(Person,proto);

12
var Woman = $class(Person,proto);

与上一篇不同的是，虽然Man和Woman都是用Person，proto组装的。但Man却不等于Woman。即同一个构造函数（Person）定义不同的类。

`1`	`// 同一个构造函数（Person）定义不同的类`

`2`	`console.log(Man == Woman);` `//false`

posted @ 2011-03-06 19:16 awp110 阅读(149) 评论(0) 收藏举报

刷新页面返回顶部

不知道自己想要什么没关系，一定要牢记自己不想要什么东西。

JavaScript的写类方式（1）

公告