脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 类(Class)

JavaScript中的类(Class)详细介绍

 更新时间：2014年12月30日 08:41:48   投稿：junjie  
这篇文章主要介绍了JavaScript中的类(Class)详细介绍,本文讲解了JavaScript中类的定义、JavaScript中的Constructor(构造函数)、类名等内容,需要的朋友可以参考下

在JavaScript中，可以使用类(Class)来实现面向对象编程(Object Oriented Programming)。不过，JavaScript中的类与Java中的有所不同，其相应的定义和使用也不一样。

JavaScript中类的定义

在JavaScript中，所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类；也就是说，JavaScript中的类是一个对象集合的概念，如果两个对象它们的prototype相同，那么它们就属于同一个类；JavaScript中的类甚至都不需要类名。以下面的代码为例：

复制代码 代码如下:

var p = {x:42};
var a = Object.create(p);
var b = Object.create(p);
console.log(a === b);//false
console.log(Object.getPrototypeOf(a) === Object.getPrototypeOf(b));//true

在上述例子中，对象a和b拥有相同的原型对象(prototype) p，因此a和b属于同一个类(虽然这个类都没有类名)，它们从原型对象p处继承了值为42的属性x。

从这个例子中可以看到，原型对象的作用就相当于模板，可以由之衍生/创建出多个对象，其地位与Java语言中的类代码(Class code)相同，是JavaScript中类定义的核心。以下这个例子中的原型对象就呈现出更像类代码的样子：


复制代码 代码如下:

var p = {
 INCREMENT_BY : 1,
 increment : function(x){
  return x + this.INCREMENT_BY;
 }
}
var a = Object.create(p);
var b = Object.create(p);
console.log(a.increment(7));//8
console.log(b.increment(9));//10


上述例子中，原型对象p定义了一个值为1的property (INCREMENT_BY)和一个名为increment的函数；对象a和b从p这个模板处获取了INCREMENT_BY和increment函数。当调用对象a或b的increment函数时，JavaScript会试图获取a或b的INCREMENT_BY值(this.INCREMENT_BY)；由于INCREMENT_BY是从p中获取的，因此其值都是1 — 从模板中获取的，值都相同的变量，类似于Java中的静态类变量(static variable)，因此上面的例子中对INCREMENT_BY变量命名时使用了全大写字符。

在上面的例子中，所有从模板p处创建出来的对象(属于同一个类的这些对象)，其属性和行为都是一模一样的。但实际上对于同一个类的不同对象，它们除了拥有类所定义的属性/行为以外，往往具有一些自身所特有的属性与行为。因此，如果需要将prototype这个模板当作类来使用的话，就必须对每一个从中衍生出来的对象进行一定的定制：


复制代码 代码如下:

var p = {
 INCREMENT_BY : 1,
 increment : function(x){
  return x + this.INCREMENT_BY + this.custom_increment_by;
 }
}
var a = Object.create(p);
var b = Object.create(p);
a.custom_increment_by = 0;
b.custom_increment_by = 1;
console.log(a.increment(7));//8
console.log(b.increment(9));//11


在这个例子中，从模板p处创建出来的对象a和b拥有一个彼此间值不一定相等的变量custom_increment_by，而它们的increment()函数这个行为的最终结果则与custom_increment_by的值相关。一般来说，对新建对象进行定制化的工作往往放在统一的函数中进行：


复制代码 代码如下:

var p = {
 INCREMENT_BY : 1,
 increment : function(x){
  return x + this.INCREMENT_BY + this.custom_increment_by;
 }
}
function getIncrementalClassObject(customIncrementByValue){
 var incrementalObj = Object.create(p);
 incrementalObj.custom_increment_by = customIncrementByValue;
 return incrementalObj;
}
var a = getIncrementalClassObject(0);
var b = getIncrementalClassObject(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11


如此，便通过原型对象p和getIncrementalClassObject()函数完成了一个类的定义：可以通过调用getIncrementalClassObject()函数来获取原型对象都是p的对象，而在调用getIncrementalClassObject()函数过程中可以对这些新建对象进行一定的定制化。值得注意的是，此时这个已经定义了的类还没有类名，为了方便描述，姑且称之为Incremental。

回顾getIncrementalClassObject()函数中所做的工作，可以看到从Incremental这个类中创建新的对象所经历的过程如下：

1.创建一个空对象，并将其原型对象定义为p。
2.根据不同的参数值，对这个新建的空对象进行定制。
3.返回已经定制完成的新对象。

在JavaScript中，可以通过使用Constructor(构造函数)来快速地完成类的定义以及新对象的创建。

JavaScript中的Constructor(构造函数)

从上述Incremental类这个例子中可以看到，定义新的类需要两部分代码：创建原型对象作为模板、创建自定义函数对新对象进行初始化；而从类中创建新的对象则经历了三个过程：指定新对象的原型对象、定制/初始化新对象、返回这个新对象。在JavaScript中，这一切都可以通过Constructor(构造函数)来完成。

JavaScript中的Constructor是一个函数(function)，承担对新对象进行初始化的职责；而这个Constructor函数的prototype则作为模板用于创建新对象。仍以上述Incremental类为例，用Constructor来重写代码后是这样的：


复制代码 代码如下:

function Incremental(customIncrementByValue){
  this.custom_increment_by = customIncrementByValue;
}
Incremental.prototype = {
  INCREMENT_BY : 1,
 increment : function(x){
  return x + this.INCREMENT_BY + this.custom_increment_by;
 }
}

var a = new Incremental(0);
var b = new Incremental(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11

通过new关键词，使用Constructor函数来创建新对象这一过程，其实际上经历了以下几个阶段：

创建一个新的空对象。

1.将这个对象的原型对象指向constructor函数的prototype属性。
2.将这个对象作为this参数，执行constructor函数。
3.这与之前的getIncrementalClassObject()函数中所做的工作是一样的。

类名

在使用Constructor创建对象时，相应的对象也就有了“类名”，这可以从instanceof操作符的结果上得到验证：

复制代码 代码如下:

console.log(a instanceof Incremental);//true
console.log(b instanceof Incremental);//true

不过，instanceof操作符并不判断对象是否由Incremental这一构造函数所创建，instanceof操作符只判断对象的原型对象是否为Incremental.prototype。当存在两个prototype一样的构造函数时，instanceof操作符将统一返回true，而不会区分用于创建对象的构造函数到底是哪个。
复制代码 代码如下:

function Incremental2(customIncrementByValue){
  this.custom_increment_by = customIncrementByValue + 3;
}
Incremental2.prototype = Incremental.prototype;
console.log(a instanceof Incremental2);//true

您可能感兴趣的文章:

相关文章

  • JavaScript懒加载详解

    JavaScript懒加载详解

    这篇文章主要为大家详细介绍了JS实现页面数据懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Three.js基础部分学习

    Three.js基础部分学习

    本文主要分享了一个案例，介绍了使用Three.js绘制旋转立方体的方法与实现过程。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JS delegate与live浅析

    JS delegate与live浅析

    这篇文章主要介绍了JS delegate与live，有需要的朋友可以参考一下
    2013-12-12
  • bootstrapTable+ajax加载数据 refresh更新数据

    bootstrapTable+ajax加载数据 refresh更新数据

    这篇文章主要为大家详细介绍了bootstrapTable+ajax加载数据，以及refresh更新数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

    基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

    这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • 将html页面保存成图片,图片写入pdf的实现方法(推荐)

    将html页面保存成图片,图片写入pdf的实现方法(推荐)

    下面小编就为大家带来一篇将html页面保存成图片,图片写入pdf的实现方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 前端中的JS使用调试技巧

    前端中的JS使用调试技巧

    掌握各种js调试技巧，在前端开发中降低开发成本，起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等等。这篇文章主要介绍了前端中的JS使用调试技巧,需要的朋友可以参考下
    2022-12-12
  • JavaScript必看的10道面试题总结（推荐）

    JavaScript必看的10道面试题总结（推荐）

    JavaScript 已经成为全栈开发技能的基石，在全栈开发面试中都会不可避免地涉及到与 JavaScript 有关的问题。这篇文章主要给大家介绍了关于JavaScript必看的10道面试题,需要的朋友可以参考下
    2021-05-05
  • 一文读懂TS 中联合类型和交叉类型各自的含义

    一文读懂TS 中联合类型和交叉类型各自的含义

    联合类型在 TypeScript 中相当流行，你可能已经用过很多次了。交叉类型稍微不那么常见，它们似乎引起更多的困惑，这篇文章主要介绍了一文读懂TS 中联合类型和交叉类型的含义,需要的朋友可以参考下
    2022-12-12
  • uniapp中实现App自动检测版本升级的示例代码

    uniapp中实现App自动检测版本升级的示例代码

    本文主要介绍了uniapp中实现App自动检测版本升级的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01

最新评论