JavaScript之自定义类型

更新时间：2012年05月04日 00:39:14 作者：

在JavaScript中，创建一个具有自定义属性和方法的对象有很多种模式，下面一一进行介绍

1、直接创建模式。这是最简单也是最直接的一种模式，首先创建一个引用类型的对象，然后为其添加自定义属性和方法。示例代码如下：

 
var person = new Object(); 
person.name = "Sam"; 
person.age = 16; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
person.speak(); 

可以看到，上面创建了一个Object类型的对象，然后为其添加了name和age属性以及一个speak方法。直接创建模式虽然简单，但其缺点是显而易见的：当我们需要创建许多相同的对象时，每次都要重复编写代码。为了解决这个问题，我们可以将创建对象的过程进行封装，于是便有了下面的工厂模式。
2、工厂模式。工厂模式是程序设计中一种常用的设计模式，它主要是将创建对象的过程进行了封装，示例代码如下：

复制代码代码如下:

 
function createPerson(name, age){ 
var person = new Object(); 
person.name = name; 
person.age = age; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
return person; 
} 
var person1 = createPerson("Sam", 16); 
var person2 = createPerson("Jack", 18); 

使用工厂模式后，创建相同类型的对象变得简单了。但工厂模式没有解决对象识别的问题，即我们无法确定创建的对象的具体类型。有过面向对象编程经验的开发人员都知道，对象的创建应当基于类，有了具体的自定义类，再来创建该类的对象。幸好，在JavaScript中，我们可以通过构造函数模式来模拟一个类。
3、构造函数模式。构造函数和普通函数没有任何区别。任何普通函数都可以作为构造函数，只要使用new操作符即可；任何构造函数也都可以作为普通函数来调用。只不过在JavaScript中，有一个约定，就是用作构造函数的函数名需要首字母大写。示例代码如下：

复制代码代码如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 

可以看到，在构造函数内部，我们使用了this来添加属性和方法，那么，这个this是指什么呢？当我们创建了一个Person的对象时，this即是指这个创建的对象。现在，我们可以识别出对象person1和person2的具体类型了。使用alert(person1 instanceOf Person)后可以发现，输出的值为true。但构造函数模式也有自己的缺点，就是构造函数内声明的方法在每次创建新对象时都会重新创建（在JavaScript中，函数也是对象）。也就是说，构造函数内的方法是与对象绑定的，而不是与类绑定的。下面代码的输出可以验证我们的推断。
alert(person1.speak == person2.speak); // false 解决这个缺点的一种比较简单的方法就是将函数的声明放到构造函数的外面，即：

复制代码代码如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
function speak(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 
alert(person1.speak == person2.speak); // true 

问题解决了，但这种方法又带来了新的问题。首先，函数speak是在全局作用域中声明的，但它却只能被用于Person构造函数，放在全局作用域中有被误用的风险；其次，如果一个自定义类型有很多的方法，则需要声明很多的全局函数，这既将导致全局作用域的污染，也不利于代码的封装。那么，有没有什么办法能让自定义类型的方法成为与类绑定的，又不污染全局作用域呢？答案是使用原型模式。
4、原型模式。在我们声明一个新的函数后，该函数（在JavaScript中，函数也是对象）就会拥有一个prototype的属性。prototype是一个对象，表示会被该函数创建的所有对象拥有的公共属性和方法。示例代码如下：

复制代码代码如下:

 
function Person(){} 
Person.prototype.name="Sam"; 
Person.prototype.age=16; 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true 

可以看到，虽然构造函数内没有声明speak方法，但我们创建的对象person1还是能调用speak方法，这是因为JavaScript有一个搜索规则，先搜索实例属性和方法，找到则返回；如果没找到，则再到prototype中去搜索。原型模式使得方法是与类相关的，并且没有污染全局作用域，但其也有自身的缺点：一是所有属性也都与类相关，这意味着所有对象共享一份属性，这显然是不合理的；二是没有办法向构造函数传入初始化数据了。解决的方法很简单，就是混合使用构造函数模式和原型模式。
5、组合模式。示例代码如下：

复制代码代码如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
} 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true 

不难发现，组合模式实现了我们的所有需求，这也是目前应用得比较广泛的一种模式。有面向对象编程经验的开发人员可能会觉得将prototype的声明放在构造函数外面有点别扭，那么能否将其放到构造函数里去呢？答案是肯定的，使用动态组合模式即可。
6、动态组合模式。其原理就是先判断原型中的某个属性或方法是不是已经声明过，如果没有声明，则声明整个原型；否则，什么也不用做。示例代码如下：

复制代码代码如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
if (Person.prototype.speak == "undefined"){ 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
} 

您可能感兴趣的文章:

自定义类型

JS 用6N±1法求素数实例教程
显然，当N≥1时，6N，6N+2，6N+3，6N+4都不是素数，只有形如6N+1和6N+5的自然数有可能是素数。所以，除了2和3之外，所有的素数都可以表示成6N±1的形式(N为自然数)。
2009-10-10
es6中Promise 对象基本功能与用法实例分析
这篇文章主要介绍了es6中Promise 对象基本功能与用法,结合实例形式分析了es6中Promise对象的基本功能、用法及操作注意事项,需要的朋友可以参考下
2020-02-02
ES6新特性之解构、参数、模块和记号用法示例
这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
2017-04-04
深入了解Hybrid App技术的相关知识
这篇文章主要介绍了深入了解Hybrid App技术的相关知识，Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
2019-07-07
Js中FileReader读取文件内容方法详解(async/await)
这篇文章主要给大家介绍了关于Js中FileReader读取文件内容(async/await)的相关资料,FileReader是前端进行文件处理的一个重要的Api,特别是在对图片的处理上,如果你想知道图片的处理原理,你就永远不可能绕过它,需要的朋友可以参考下
2023-11-11
js去空格技巧分别去字符串前后、左右空格
js去空格想必大家多少都会点吧，在接下来的文章中为大家详细介绍下如何分别去字符串前后，左边，右边空格，感兴趣的朋友可以参考下
2013-10-10
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例代码。
2009-11-11
Javascript 实现 Excel 导入生成图表功能
这篇文章主要介绍了Javascript 实现 Excel 导入生成图表功能，本文通过实例代码讲解给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-10-10
JavaScript截屏功能的实现代码
我觉得使用JS截图的想法是非常荒谬的，首先JS没有权限调用操作系统的截图功能，其次，浏览器（BOM）也没有提供相关的截图接口，经过一番折腾，有点思路了，下面通过实例代码给大家简单介绍下js 截屏功能的实现代码，一起看看吧
2017-07-07
JS 终止执行的实现方法
下面小编就为大家带来一篇JS 终止执行的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起小编过来看看吧
2016-11-11