js模拟类
ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类。
js中的类,既是重点,也是难点,很多时候都感觉模棱两可。
首先强调一下js中很重要的3个知识点:this、prototype、constructor。
下面我们来总结一下定义(模拟)类的几种方法:
1.工厂模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function createObject(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.getName = function (){ return this .name; }; obj.getAge = function (){ return this .age; } return obj; } var obj2 = createObject( "王五" ,19); console.log(obj2.getName()); console.log(obj2.getAge()); console.log(obj2.constructor); |
工厂模式的方法创建对象,工厂模式可以根据接受的参数来创建一个包含必要信息的对象,可以无限次数的调用这个方法,每次都返回一个包含2个属性2个方法的对象。工厂模式解决了创建类似对象的问题,但没有解决对象的识别问题,即不能确定一个对象的类别,统一为Object。
2.构造函数法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function Person(name,age,job){ this .name = name; this .age = age; this .job = job; } Person.prototype = { constructor:Person, getName: function (){ return this .name; }, getAge: function (){ return this .age; }, getJob: function (){ return this .job; } } var p = new Person( "二麻子" ,18, "worker" ); console.log(p.constructor); console.log(p.getName()); console.log(p.getAge()); console.log(p.getJob()); |
构造函数的方式虽然确定了对象的归属问题,能够确定对象的类型,但构造函数中的方法需要在每个对象中都要重新创建一遍,导致一些性能问题。
3.原型模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function Person(){ } Person.prototype = { constructor:Person, name: "张三" , age:21, job: "teacher" , getName: function (){ return this .name; }, getJob: function (){ return this .job; } } var p = new Person(); console.log(p.getName()); //张三 console.log(p.getJob()); //teacher var p2 = new Person(); p2.name = "李四" ; console.log(p2.getName()); //李四 |
由实例代码我们可以知道,对象实例可以访问原型中的值,但不能重写原型中的值,如果对象实例中定义了和原型重名的属性,那么该属性就会屏蔽原型中的那个属性,但并不会重写。
4.封装(暂且这么叫吧)
1
2
3
4
5
6
7
8
9
10
11
12
|
var Dog = { createDog: function (){ var dog = {}; dog.name = "汪汪" ; dog.sayHello = function (){ console.log( "Hello World!" ); }; return dog; } }; var dog = Dog.createDog(); dog.sayHello(); |
就是把代码都封装起来,将实例对象作为一个整体返回,有点类似于工厂模式。
js模拟类的更多相关文章
- js模拟类的公有与私有 方法与变量
var myConstructor = function(message){ //实例变量 this.message = message; //私有变量,外部不可见.用var声明的变量具有块作用域 v ...
- JS模拟类的实现
http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html
- js模拟类的创建以及继承的四部曲
<script> 1)创建父类 function Person(){ } Person.prototype.age = 18;//给父类添加属性 var p1 = new Person() ...
- js面向对象--类式继承
//待研究//类式继承 //js中模拟类式继承的3个函数 //简单的辅助函数,让你可以将新函数绑定到对象的 prototype 上 Function.prototype.method = functi ...
- 关于js模拟c#的Delegate(委托)实现
这是我的第一篇博文,想来讲一讲js的函数.我的标题是js模拟c#的Delegate. 一.什么是Delegate(委托) 在jquery中有delegate函数,作用是将某个dom元素的标签的事件委托 ...
- 在 JavaScript 中使用构造器函数模拟类
今天,我们要讲的是在 JavaScript 中使用构造器函数(construcor function)模拟类. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统 ...
- JS5模拟类
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】
[原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言 最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
随机推荐
- 关于缓存中Cookie,Session,Cache的使用
文章来源:http://canann.iteye.com/blog/1941173 以前实现数据的缓存有很多种方法,有客户端的Cookie,有服务器端的Session和Application. 其中C ...
- 使用Go开发web服务器
原文链接 Go(Golang.org)是在标准库中提供HTTP协议支持的系统语言,通过他可以快速简单的开发一个web服务器.同时,Go语言为开发者提供了很多便利.这本篇博客中我们将列出使用Go开发HT ...
- 时光煮雨 Unity3D实现2D人物动画① UGUI&Native2D序列帧动画
系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...
- 数据库中 关于不能用in 不能用exist 等关键字 查询不出现字段的问题
这是之前在网上见到的一道题,后来心里略微想了想 觉得应该可能,所以就一闪而过了,之前去面试晨光的时候面试者问了我这道问题,当时也只是把自己的想法说了一下,可能因为当时面试的感觉不太好,面试官也没有追究 ...
- CSS3 border-image详解、应用
一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊人.可惜目前支持的浏览器有限,仅Firefox3.5,chrom ...
- javascript中的自增与自减
一直都对自增与自减的执行顺序有点糊涂,今天查了资料,来总结一下 a++(a--),就是指当时计算a,当下一次使用这个变量的时候才执行++或者-- ++a(--a),就是指当时就计算++或者-- 例1: ...
- 【转】PowerShell入门(七):管道——在命令行上编程
转至:http://www.cnblogs.com/ceachy/archive/2013/02/22/PowerShell_Pipeline.html 管道对于Shell来说是个化腐朽为神奇的东西, ...
- HTML5正则表单式验证电子邮件
<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z] ...
- 20160308001 GridView的Sorting排序
参考地址: http://www.cnblogs.com/yinluhui0229/archive/2011/08/01/2124169.html 功能介绍:单击gridview的某一列列头,可以对该 ...
- JSON下
JSON下:目录一:把 JSON 文本转换为 JavaScript 对象二:JSON 实例 - 来自字符串的对象 一.把 JSON 文本转换为 JavaScript 对象JSON 最常见的用法之一,是 ...