学过其他面向对象语言的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 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实现了类

总结:

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

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

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

js创建类(封装)的更多相关文章

  1. JS创建类的方法--简单易懂有实例

    版权声明:本文为博主原创文章,转载请注明出处 Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class. ...

  2. JS创建类和对象

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

  3. JS创建类和对象(好多方法哟!)

    http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 ...

  4. JS创建类和对象,看完了,头就不大了

    JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...

  5. js 创建类和继承的几种方法

    在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法.JavaScript语言里是没有类的概念的,但是我们通过以下方法也 ...

  6. JS创建类以及类的方法(StringBuffeer类)

    创建StringBuffer类以及toString,append()方法 //创建一个StringBuffer类 ,此类有两个方法:一个是append方法一个是toString方法 function ...

  7. JS面向对象编程创建类的方式

    js创建类的方式有几种,大致如下: 1,构造函数方式: function Car(parameters) { this.name = "objectboy"; } var cat1 ...

  8. js构建类的方法

    Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class.(不过,ES6引入了Class这个概念,作为对 ...

  9. 第九节: 利用RemoteScheduler实现Sheduler的远程控制 第八节: Quartz.Net五大构件之SimpleThreadPool及其四种配置方案 第六节: 六类Calander处理六种不同的时间场景 第五节: Quartz.Net五大构件之Trigger的四大触发类 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联

    第九节: 利用RemoteScheduler实现Sheduler的远程控制   一. RemoteScheduler远程控制 1. 背景: 在A服务器上部署了一个Scheduler,我们想在B服务器上 ...

随机推荐

  1. 《html5 从入门到精通》读书笔记(二)

    接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...

  2. 键盘控制背景边框平滑移动(jquery)

    今天同事让我看了一个动画效果,是由键盘控制背景边框平滑移动,我感觉挺cool,所以我自己也动手制作了一个.目的是为了锻炼自己,看自己是否也能在短时间内实现. 先上图: 一.html代码 <!DO ...

  3. RobotFramework做接口自动化(post请求)

    接口成功时返回: { "reCorde": "SUCCESS", "data": { ", "verify": ...

  4. ASP.NET MVC 使用过滤器需要注意

    想往下继续执行就return~

  5. centos7 守护进程

    ASP.NET Core应用程序发布linux在shell中运行是正常的.可一但shell关闭网站也就关闭了,所以要配置守护进程, 用的是Supervisor,本文主要记录配置的过程和过程遇到的问题 ...

  6. pos机代理行业

        传统模式(代理):代理商线性分润,代理商或营运商给一代大量的机器及要求,而且这个要求公对公结算(必须要有公司),分润也是直接给一代.然后一代找二代推广,层层发展.这样你会很担心你的上家的上家突 ...

  7. code::blocks学习

    code::block不能调试问题 今天在codeblock不能进行调试,百度总结如下: 1 进行调试的必须是一个project而不能是一个单一的cpp文件. 2 project的路径不能包含中文,尽 ...

  8. [ActionScript 3.0] 简单倒计时

    import flash.utils.Timer; import flash.events.TimerEvent; import flash.text.TextField; var text:Text ...

  9. ubuntu14.04搭建ftp服务器

    一,搭建匿名FTP服务器 实现ftp匿名登录,上传,下载,重命名文件. 1. 首先安装vsftpd:sudo apt-get install vsftpd,装好之后,默认的ftp根目录是在 /srv/ ...

  10. MkDocs 文档生成逻辑浅析

    Markdown 和 MkDocs 简介 Markdown 的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客.世界上最流行的博客平台 WordPress 和大型 CMS 如 Jo ...