今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类。

构造器函数简介

你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统的构造器函数来模拟类,因为这样可以给人一种你是个 JavaScript 老手的错觉,哈哈!

什么是构造器函数?构造器函数是编写对象的方法之一。一般情况下,你可以这样编写一个对象:

var obj = { a:1, b:2 };

但也可以使用构造器函数来编写对象:

 function Obj(a, b){
   this.a = a;
   this.b = b;
 }
 var obj = new Obj(1, 2); //obj 等价于 { a:1, b:2 }

使用构造器函数的好处在于可以传递参数。构造器函数通常首字母大写,而且需要使用 new 关键词来调用。在 JavaScript 中是没有类的,利用构造器函数我们可以模拟一个类。

使用构造器函数编写栈类

了解了构造器函数,我们使用它编写一个迷你的栈类,下面就是实现代码:

Stack.js

function Stack() {
  // 私有变量 items,用于记录数组,对象不能直接操作
  var items = [];
  // 类方法 push,在数组末尾添加项,对象可以直接调用
  this.push = function (element) {
    items.push(element);
  };
  // 删除并返回数组末尾的项
  this.pop = function () {
    return items.pop();
  };
}

上述栈类中,有个私有变量 items ,为何它就不能直接操作呢?为何挂在 this 上的方法可以直接调用?因为 new 操作符会将构造器函数中的 this 指向生成的对象,也就是说挂在 this 上的方法或属性将来会成为生成对象的方法或属性,所以可以直接调用。而 items 则是函数内部的一个局部变量,它在函数外部是不可见的,生成对象只能通过调用自身的方法,沿着作用域链来操作 items。

var stack = new Stack();

// stack 对象不能直接操作items,结果是 undefined
console.log(stack.items) 

// stack 对象可以直接操作构造器函数中挂在 this 上的属性和方法
stack.push(1);
// 打印了1
console.log(stack.pop())

如果你不熟悉 JavaScript ,那么你应该先学习一下 JavaScript 作用域、this 和 new 操作符的相关知识。推荐阅读参考 Stoyan Stefanow 的《JavaScript 面向对象编程指南》,这本书里面有很多小的代码片段以及相关的图文解读,可以帮助你更好地理解 JavaScript 的相关特性。

教程源代码及目录

https://github.com/lewis617/javascript-datastructures-algorithms

在 JavaScript 中使用构造器函数模拟类的更多相关文章

  1. JavaScript中的工厂函数

    所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例. 在学习jQuery的时候,我们经常会看到“工厂函数”这个概念,那么究竟什么是“工厂函数”呢?我们来看看概念,“所 ...

  2. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  3. 理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报  分类: JavaScript(4)    目录( ...

  4. 理解javascript中的回调函数(callback)【转】

    在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...

  5. JavaScript 中的回调函数

    原文:http://javascriptissexy.com/ 翻译:http://blog.csdn.net/luoweifu/article/details/41466537 [建议阅读原文,以下 ...

  6. 【转载】【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态

    [游戏开发]在Lua中实现面向对象特性——模拟类.继承.多态   阅读目录 一.简介 二.前提知识 三.Lua中实现类.继承.多态 四.总结 回到顶部 一.简介 Lua是一门非常强大.非常灵活的脚本语 ...

  7. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  8. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  9. javascript中使用md5函数

    javascript中使用md5函数 这对于js来讲本来是没有的,现在可以自己定义一个md5的函数,达到加密效果. var hexcase = 0; function hex_md5(a) { if ...

随机推荐

  1. 调试大叔V1.0.1(2017.09.01)|http/s接口调试、数据分析程序员辅助开发神器

    2017.09.01 - 调试大叔 V1.0.1*支持http/https协议的get/post调试与反馈:*可保存请求协议的记录:*内置一批动态参数,可应用于URL.页头.参数:*可自由管理cook ...

  2. poj 2763 Housewife Wind (树链剖分)

    题目链接:http://poj.org/problem?id=2763 题意: 给定一棵含n个结点的树和树的边权,共有q次操作,分为两种 0 c :求从位置s到c的距离,然后s变成c 1 a b:把第 ...

  3. 海外 App 的推送服务,试试 FCM 吧!!!

    > **版权声明:** > > **本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有.** > > **每周会统一更新到这里,如果喜欢,可关注公 ...

  4. Python初学——pickle & set

    pickle 存放数据 保存和提取python运算完的结果 首先import pickle模块 定义一个字典: a_dict={'da':111,2:[23,1,4],'23':{1:2,'d':'s ...

  5. 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能

    Ajax文件上载 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 导入组件并准备静态脚本 <dependency> <groupId& ...

  6. git 介绍及其使用总结

      版本控制 Git                   目录  目录 2 第1章 Shell和vi 4 1.1 什么是shell 4 1.2 shell分类 4 1.3 认识bash这个shell ...

  7. 基于Vue全家桶制作的的高仿美团APP

    鸣谢:该项目核心部分参考了慕课网精英讲师ustbhuangyi的课程,其余部分高仿美团APP构建. 前端菜鸟项目,大佬们轻喷~ 美团外卖APP

  8. 汽车VIN码识别适用于什么行业

    在您看完之前的文章知道了VIN码识别的原理,现在跟大家分享一下汽车VIN码识别的应用场景吧 汽车VIN码不仅在制造.销售.保养.保险.交易环节会需要录入汽车的VIN码,在交通事故处理中,作为汽车身份唯 ...

  9. 【Beta阶段】测试与发布

    [Beta阶段]测试报告 一.Bug记录 1. 已经修复的BUG:文件查重的小组的空指针处理了 . 2.未能修复的bug: (1).在进行查重的时候必要要有10个文件,不然会报错:        (2 ...

  10. 团队作业8——第二次项目冲刺(Beta阶段)Day5--5.23

    1.提供当天站立式会议照片一张 2.会议内容 讨论已完成的功能 对于界面,谈谈各自的看法 商定测试计划 用户需求进一步调研 3.工作安排 队员 今日任务 明日任务 贡献比 林燕 测试运行效果 根据测试 ...