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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
微信小程序实现下拉加载更多商品
Dec 29 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
php上传excel表格并获取数据
2017/04/27 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python selenium如何设置等待时间
2016/09/15 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
小学教师的自我评价范例
2013/10/31 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
答谢词范文
2015/01/05 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
python内置进制转换函数的操作
2021/06/02 Python