JavaScript 定义类，定义属性，定义方法的几种方式详解及分析

最新推荐文章于 2024-05-28 17:35:26 发布

向着阳光奔跑的少年

最新推荐文章于 2024-05-28 17:35:26 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript 定义类，定义属性，定义方法的几种方式详解及分析

提起面向对象我们就能想到类，对象，封装，继承，多态。在《

javaScript

高级程序设计》

（人民邮电出版社，曹力、张欣译。英文名字是：

Professional JavaScript for Web

Developers

）这本书中描述的还算比较详细。我们看看

JavaScript

中定义类的各种方法。

1．工厂方式

javaScript

中创建自己的类和对象，

我们应该是必须掌握的，我们都知道javaScript中对象的属性可以在对象创建后动态定义，比如下面的代码：

// 定义 var oCar = new Object(); oCar.color = "red"; oCar.doors = 4; oCar.showColor = function() { alert(this.color); } //调用 oCar.showColor();

我们很容易使用

oCar

对象，但是我们创就是想创建多个

Car

实例。我们可以使用一个

函数来封装上面的代码来实现：

// 定义 function createCar() { var oCar = new Object(); oCar.color = "red"; oCar.doors = 4; oCar.showColor = function() { alert(this.color); } return oCar; } // 调用 var ocar1 = createCar(); var ocar2 = createCar(); ocar1.color = "black"; ocar1.showColor(); ocar2.showColor();

顺便说一下，

javaScript

对象默认成员属性都是

public

的。

这种方式我们称为工厂方式，

我们创造了能创建并返回特定类型的对象的工厂。

这样做有点意思了，但是在面向对象中我们经常使用创建对象的方法是：

Car car=new Car();

使用

new

关键字已经深入人心，

因此我们使用上面的方法去定义总感觉别扭，

并且每次

调用时都去创建新的属性以及函数，

功能上也不实际。

下来我们看看构造函数的形式定义类。

．构造函数

这种方式看起来有点象工厂函数。具体表现如下：

// 定义 function Car(color, doors) { this.color = color; this.doors = doors; this.showColor = function() { alert(this.color); }; } // 调用 var car1 = new Car("red", 4); var car2 = new Car("blue", 4); car1.showColor(); car2.showColor();

看起来效果很明显，

有差别了吧。

感觉有点意思了。

在构造函数内部创造对象使用

this

关

键字，使用

new

运算符创建对象感觉非常亲切。但是也有点问题：每次

new

对象时都会

创建所有的属性，

包括函数的创建，

也就是说多个对象完全独立，

我们定义类的目的就是为

了共享方法以及数据，

但是

car1

对象与

car2

对象都是各自独立的属性与函数，

最起码我们

应该共享方法。这就是原形方式的优势所在。

．原型方式

利用对象的

prototype

属性，可把它看出创建新对象所依赖的原型。方法如下：

// 定义 function Car() { }; Car.prototype.color = "red"; Car.prototype.doors = 4; Car.prototype.drivers = new Array("Tom", "Jerry"); Car.prototype.showColor = function() { alert(this.color); } // 调用： var car1 = new Car(); var car2 = new Car(); car1.showColor(); car2.showColor(); alert(car1.drivers); car1.drivers.push("stephen"); alert(car1.drivers); // 结果： Tom,Jerry,stephen alert(car2.drivers); // 结果： Tom,Jerry,stephen // 可以用 json 方式简化 prototype 的定义 : Car.prototype = { color: "red", doors: 4, drivers: ["Tom", "Jerry",'safdad'], showColor: function() { alert(this.color); } 首先这段代码的构造函数，其中没有任何代码，接下来通过对象的 prototype 属性添加属性定义 Car 对象的属性。这种方法很好，但是问题是 Car 的对象指向的是 Array 指针， Car 的两个对象都指向同一个 Array 数组，其中一个对象 car1 改变属性对象的引用（数组 Array ）时，另一个对象 car2 也同时改变，这是不允许的。同时该问题也表现在原型不能带任何初始化参数，导致构造函数无法正常初始化。这需要另一种方式来解决：那就是混合的构造函数 / 原型模式。 4. 混合的构造函数 / 原型模式联合使用构造函数和原型方式，定义类就非常方便。 // 定义 function Car(color,doors) { this.color=color; this.doors=doors; this.drivers=new Array("Tom","Jerry"); } Car.prototype.showColor=function(){ alert(this.color); } // 调用： var car1=new Car('red',4); var car2=new Car('blue',4); car1.showColor(); car2.showColor(); alert(car1.drivers); car1.drivers.push("stephen"); alert(car1.drivers); // 结果： Tom,Jerry,stephen alert(car2.drivers); // 结果： Tom,Jerry alert(car1 instanceof Car);

该方法是把属性放在内部定义，

把方法放在外边利用

prototype

进行定义。

解决了第三种

方法的问题。

这种方法其实应该来说非常友好了，但是比起

java

的语法来，应该有一些不和谐，感觉

比较凌乱，对

C++

来说，我们就没有那么麻烦的感觉了，可是开发