JavaScript中利用构造器函数模拟类的方法
作者:Lewis617 时间:2023-07-02 05:30:13
前言
本文小编带大家一起学习的是在 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 的相关特性。
总结
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
如何使用flask将模型部署为服务
![](https://img.aspxhome.com/file/2023/3/95883_0s.png)
python基础教程之实现石头剪刀布游戏示例
python用于url解码和中文解析的小脚本(python url decoder)
python使用matplotlib显示图像失真的解决方案
![](https://img.aspxhome.com/file/2023/6/73006_0s.jpg)
banner字体设计与应用
![](https://img.aspxhome.com/file/UploadPic/20097/6/01-44s.jpg)
在vue项目中使用Jquery-contextmenu插件的步骤讲解
![](https://img.aspxhome.com/file/2023/6/139946_0s.png)
详解javascript中var与ES6规范中let、const区别与用法
利用django和mysql实现一个简单的web登录页面
![](https://img.aspxhome.com/file/2023/4/133514_0s.png)
python中的Numpy二维数组遍历与二维数组切片后遍历效率比较
Django实现分页功能
![](https://img.aspxhome.com/file/2023/4/72104_0s.png)
webstorm中配置Eslint的两种方式及差异比较详解
![](https://img.aspxhome.com/file/2023/5/136195_0s.png)
使用python创建Excel工作簿及工作表过程图解
![](https://img.aspxhome.com/file/2023/1/121761_0s.png)
Python3 关于pycharm自动导入包快捷设置的方法
![](https://img.aspxhome.com/file/2023/2/135022_0s.jpg)
MySQL中事务概念的简洁学习教程
![](https://img.aspxhome.com/file/2023/6/119716_0s.jpg)
IDEA 链接Mysql数据库并执行查询操作的完整代码
![](https://img.aspxhome.com/file/2023/6/72516_0s.png)
plsql和tsql常用函数比对
Jupyter notebook在mac:linux上的配置和远程访问的方法
Python可视化学习之seaborn绘制矩阵图详解
![](https://img.aspxhome.com/file/2023/3/90883_0s.jpg)
python numpy库之如何使用matpotlib库绘图
![](https://img.aspxhome.com/file/2023/2/104392_0s.png)