JavaScript中利用构造器函数模拟类的方法


Posted in Javascript onFebruary 16, 2017

前言

本文小编带大家一起学习的是在 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 的相关特性。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
javascript中的事件代理初探
Mar 08 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
js实现截图保存图片功能的代码示例
Feb 16 #Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 #Javascript
原生JS实现图片翻书效果
Feb 16 #Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 #Javascript
js+html制作简单验证码
Feb 16 #Javascript
Vue 仿百度搜索功能实现代码
Feb 16 #Javascript
javascript实现秒表计时器的制作方法
Feb 16 #Javascript
You might like
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python整数对象实现原理详解
2019/07/01 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
迷你西餐厅创业计划书范文
2013/12/31 职场文书
投标邀请书范文
2014/01/31 职场文书
食品安全检查制度
2014/02/03 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
汽车专业求职信
2014/06/05 职场文书
作文评语怎么写
2014/12/25 职场文书
长城导游词300字
2015/01/30 职场文书
国庆节慰问信
2015/02/15 职场文书
搞笑婚前保证书
2015/02/28 职场文书
公司奖励通知
2015/04/21 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL