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

 更新时间:2017年02月16日 10:16:43   作者:Lewis617  
JavaScript中没有类的概念,所以其在对象创建方面与面向对象语言有所不同。这篇文章主要介绍了JavaScript中利用构造器函数模拟类的方法,文中给出了详细的示例代码和介绍,需要的朋友可以参考下,下面一起看看吧。

前言

本文小编带大家一起学习的是在 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实现经典扫雷游戏

    本文给大家分享的是个人刚开始学习javascript的时候写的仿windows经典的扫雷游戏的代码,当时只是写了下来,没加注释,这里补上,有需要的小伙伴可以参考下。
    2015-04-04
  • 原生JS实现多条件筛选

    原生JS实现多条件筛选

    这篇文章主要为大家详细介绍了原生JS实现多条件筛选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS带你深入领略Proxy的世界

    JS带你深入领略Proxy的世界

    Proxy是es2015 标准规范加入的语法,很可能你只是听说过,但并没有用过,毕竟考虑到兼容的问题,不能轻易地使用Proxy特性。但现在随着各个浏览器的更新迭代,Proxy的支持度也越来越高:而且使用Proxy进行代理和劫持,也渐渐成为了趋势。
    2021-05-05
  • 微信小程序 如何引入外部字体库iconfont的图标

    微信小程序 如何引入外部字体库iconfont的图标

    这篇文章主要为大家详细介绍了微信小程序引入外部字体库iconfont图标的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 纯js实现的积木(div层)拖动功能示例

    纯js实现的积木(div层)拖动功能示例

    这篇文章主要介绍了纯js实现的积木(div层)拖动功能,结合实例形式分析了javascript随机生成各种颜色div层及响应鼠标事件改变元素属性实现拖动效果的相关操作技巧,需要的朋友可以参考下
    2017-07-07
  • Bootstrap基本布局实现方法详解

    Bootstrap基本布局实现方法详解

    这篇文章主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS解析json数据并将json字符串转化为数组的实现方法

    JS解析json数据并将json字符串转化为数组的实现方法

    json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法,需要了解的朋友可以参考下
    2012-12-12
  • 基于百度地图实现产品销售的单位位置查看功能设计与实现

    基于百度地图实现产品销售的单位位置查看功能设计与实现

    这篇文章主要介绍了基于百度地图实现产品销售的单位位置查看功能设计与实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • JavaScript数组去重由慢到快由繁到简(优化篇)

    JavaScript数组去重由慢到快由繁到简(优化篇)

    本文给大家介绍通过indexof去重,hash去重,排序后去重及set去重由慢到快有繁到简的方法给大家介绍了js数组去重的方法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-08-08
  • js判断数组key是否存在(不用循环)的简单实例

    js判断数组key是否存在(不用循环)的简单实例

    下面小编就为大家带来一篇js判断数组key是否存在(不用循环)的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论