分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

js创建类(封装)

发布时间:2023-09-06 01:06责任编辑:胡小海关键词:js
 

js如何创建类(封装)

 
 

学过其他面向对象语言的JavaScripter,可能都应用过类,如:class{},等定义的一系列方法, 
但是初学者看是学习js的时候,经常会看到这样一句话,那就是JavaScript是面向对象语言,可是自己无论怎么学习,都不太清楚面向对象编程,我也是如此,开始一直纠结js面向对象编程,这几天算是有所了解了,谈谈我对js类的理解。。。

所谓类,会有以下功能:

  • 构造器
  • 静态属性,静态方法
  • 共有属性,共有方法
  • 私有属性,私有方法

本文就说说如何用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 Chinaconsole.log(p1.age); ???????????//24 ????var p2 = Person("ys", 12);p2.getHome(); ??????????????????//ys‘s home in Chinaconsole.log(p2.age); ???????????//24 ??console.log(p2.test == p1.test); ?//true, 证明静态私有变量共享性

如上面的代码一样,我们就用js实现了类

总结:

  • 有些公共属性,方法,可以设置为静态的,这样可以在每次实例化的时候,不需要额外开辟内存资源,达到真正意义上的共享,
  • 有些公共的属性方法,只想在内部程序处理时候达到共享,则设置为,静态私有属性方法,
  • 有些公共的属性方法,想在实例对象中达到共享,则设置为prototype属性方法。

在新的ES6语法中支持class关键字来封装类并继承类

具体查看软大师的 讲解:http://es6.ruanyifeng.com/#docs/class

js创建类(封装)

原文地址:http://www.cnblogs.com/lxg0/p/7434842.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved