使用JavaScript封装一个类
本篇文章讲述了如何使用JavaScript封装一个类,大家对使用JavaScript封装一个类不了解的话或者对使用JavaScript封装一个类感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧
学过其他面向对象语言的JavaScripter,可能都应用过类,如:class{},等定义的一系列方法,
但是初学者看是学习js的时候,经常会看到这样一句话,那就是JavaScript是面向对象语言,可是自己无论怎么学习,都不太清楚面向对象编程,我也是如此,开始一直纠结js面向对象编程,这几天算是有所了解了,谈谈我对js类的理解。。。
所谓类,会有以下功能:
1、构造器
2、静态属性,静态方法
3、共有属性,共有方法
4、私有属性,私有方法
本文就说说如何用js实现对类的封装,实现上述功能,
1.一个简单的类
var Person = function(name, age){ this.name = name; this.age = age; this.sayName = function(){ console.log(this.name); }; }
如何你觉得Ta不像类的话,那么你可以这样做
var Person = function(name, age){ //共有属性 this.name = name; this.age = age; //共有方法 this.sayName = function(){ console.log(this.name); }; }
如果对于构造函数模式不太清楚的话,可以看看这里js创建对象之设计模式
2.一个复杂的类
有了上面的例子之后,我们在此基础之上就可以进行我们的完善了。
var Person = function(name, age){ //共有属性 this.name = name; //共有方法 this.sayName = function(){ console.log(this.name); }; //静态私有属性(只能用于内部调用) var home = "China"; //静态私有方法(只能用于内部调用) function sayHome(){ console.log(home); } //构造器 this.setAge = function(age){ console.log(age + 12); }; this.setAge(age); }//静态方法(只能被类来访问)Person.sayAge = function(){ console.log("your age is 12"); }//静态属性(只能被类来访问)Person.drink = "water";//静态共有方法(类和实例都可以访问)Person.prototype.sayWord = function(){ console.log("ys is a boy"); }
js中利用上述的模拟方法,实现了对类的创建,在此基础上,我们不安现状,想要对他进行封装,让他成为一个整体,更利于体现js的封装性。
3.封装js类
这里我们用闭包来实现,首先解释下闭包的概念。
闭包概念:一个函数有权访问另一个函数作用域中的变量,即在一个函数内部创建另一个函数
实现如下:
var Person = (function(){ //静态私有属性方法 var home = "China"; function sayHome(name){ console.log(name + "'s home in " + home); } //构造函数 function _person(name, age){ var _this = this; //构造函数安全模式,避免创建时候丢掉new关键字 if(_this instanceof _person){ //共有属性, 方法 _this.name = name; _this.getHome = function(){ //内部访问私有属性,方法 sayHome(_this.name); }; _this.test = sayHome; //用于测试 //构造器 _this.setAge = function(age){ _this.age = age + 12; }(age); }else{ return new _person(name, age); } } //静态共有属性方法 _person.prototype = { constructor: _person, drink: "water", sayWord: function(){ console.log("ys is a boy"); } } return _person; })();
调用如下:
var p1 = new Person("ys", 12); p1.getHome(); //ys's home in China console.log(p1.age); //24 var p2 = Person("ys", 12); p2.getHome(); //ys's home in China console.log(p2.age); //24 console.log(p2.test == p1.test); //true, 证明静态私有变量共享性
如上面的代码一样,我们就用js实现了类
总结:
1、有些公共属性,方法,可以设置为静态的,这样可以在每次实例化的时候,不需要额外开辟内存资源,达到真正意义上的共享,
2、有些公共的属性方法,只想在内部程序处理时候达到共享,则设置为,静态私有属性方法,
3、有些公共的属性方法,想在实例对象中达到共享,则设置为prototype属性方法,
以上就是本篇文章的所有内容,大家要是还不太了解的话,可以自己多实现两边就很容易掌握了哦!
相关推荐:
以上是使用JavaScript封装一个类的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
