Javascript 面向对象 (声明篇)

所属分类: 网络编程 / JavaScript 阅读数: 501
收藏 0 赞 0 分享
由于才疏学浅,我不得不将《Javascript 高级程序设计》中的部分内容摘抄过来,这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要,而且内容非常的繁多,在这里就分篇章逐个介绍。

使用对象首先就是声明它(内置的对象当然就不需要了)。该死的 Javascript 总是会让我们死去很多的脑细胞,这篇文章主要说明下声明 Javascript 类的几种方法。

工厂模式
工厂模式可能是很多开发人员使用的一种模式,简单的说这种方法先定义“地基”,然后在往上面扔(绑定)各种功能和属性。下面的代码可能看起来会非常的熟悉:

复制代码 代码如下:

var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
oCar.showColor();


当然,既然包装成一个类,就要重用它(上面的方法从语法上说仅仅是变量)。可以使用返回特定对象的工厂函数(factory function)将其封装起来:
复制代码 代码如下:

function createCar() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = createCar();
oCar.showColor();

当然,变通一下,可以在 createCar 函数上加入些参数,这样看起来已经非常地专业了:
复制代码 代码如下:

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = createCar();
oCar.showColor();

匿名函数总是让人感觉非常的高深,但是有时候也会迷惑了自己。如果不考虑篇幅,可以外部定义它:
复制代码 代码如下:

function showColor() {
alert(this.color);
}

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = showColor;

return oCar;
}
oCar = createCar();
oCar.showColor();

这样做还有一个好处,就是不用重复定义 oCar.showColor 了(高效率的程序每个人都喜欢)。

构造函数模式
构造函数其实和工厂方式差不多。从代码量上来说,就是省略了构造函数内部没有创建一个对象。
复制代码 代码如下:

function Car(sColor) {
this.color = sColor;
this.showColor = function () {
alert(this.color);
}
}
oCar = new Car("red");
oCar.showColor();

其实此隐含的对象已经在 new 以后就被实例化了。默认情况下,构造函数返回的就是其 this 的值(所以不必使用 return 返回)。但构造函数模式和工厂模式一样可能会重复定义方法,这点可以参考上述工厂模式的做法避免它(始终看起来不完美)。

原型模式
已经受够重复定义的问题了,那么有没有完美的解决办法呢?当然有。使用原型方法可以有效的避免此类的问题。
复制代码 代码如下:

function Car() {}
Car.prototype.color = new Array("red", "green", "blue");
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car();
oCar.showColor();

但是使用此模式需要注意的是类中的所有属性和方法都是共用的(其实就是指针)。这意味着虽然被实例化的两个变量,如果其中一处的值被更改,那么另外一个就也会被更改。

注:此段内容有更改,详细请参见这里和这里(感谢 fish 兄弟提出)。

混合模式
看起来越来越完美了,结合上述学到的方法就很容易解决原型模式的问题,这样看起来就更像是专业的程序员了。
复制代码 代码如下:

function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car("red");
oCar.showColor();

上述的方法声明的类, showColor 方法是原型(仅创建了一个实例),其他的都是构造(互不干扰)。

动态原型模式
把自己的方法仍在外面总不是件非常环保的事情,下面的方法就非常的“绿色”:
复制代码 代码如下:

function Car() {
this.color = "red";
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};
Car._initialized = true;
}
}
oCar = new Car("red");
oCar.showColor();

此方法于上述的混合模式效果一致,即在构造函数内定义属性,而方法则使用原型模式。唯一的区别就是赋予对象方法的位置。

混合工厂模式
混合工厂模式可以认为是构造模式与混合模式的整合,因为 function 本身就是一个对象,所以可以使用 new 来实例化(请允许我这样描述)。
复制代码 代码如下:

function Car() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = new Car();
oCar.showColor();

不过建议避免使用此方法定义,因为于上述的工厂模式一样,它存在重复声明的问题。

选用何种模式?
其实通过上面的描述已经有所结果,通常使用的是 混合模式 与 动态原型模式 (我个人投动态原型模式一票)。不过不要单独使用 工厂模式 与 构造模式 (或者其两者的结合体),因为这样会造成不必要的浪费。

测试代码

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多