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()); //teachervar 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 ...
随机推荐
- C语言之memcpy函数
昨天自己动手实现memcpy这个函数,用一个例程试了一下,结果正确,满心欢心,可是有些地方想不明白,于是百度了一下,结果自己写的函数简直无法直视. 觉得还是写个总结,以示教训. 先贴上我自己的函数: ...
- html5,实例开发代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Visual Studio C#的winform/webform/asp.net控件命名规范
控件命名规范 类型 前缀 示例 AdRotator adrt adrtTopAd Button btn btnSubmit Calendar cal calMettingDates CheckBox ...
- Swift数据类型简介(二)
整数 整数就是没有小数部分的数字,比如42和-23.整数可以是有符号(正.负.零)或者无符号(正.零). Swift 提供了8,16,32和64位的有符号和无符号整数类型.这些整数类型和 C 语言的命 ...
- Hibernate 简单使用
首先在数据库中创建相应的表,脚本如下: create table Student (id int primary key, sName ), sNO ), sex ), email )) 在Myecl ...
- redmine设置
接上篇. 1.redmine新版本已经比较强大了,可以定制所有字段(含标准字段和自定义字段)的读写属性.这里为了避免字段过多影响用户感受,希望增加功能将不相关的字段屏蔽,下载插件Workflow Hi ...
- Java堆栈的应用2----------中缀表达式转为后缀表达式的计算Java实现
1.堆栈-Stack 堆栈(也简称作栈)是一种特殊的线性表,堆栈的数据元素以及数据元素间的逻辑关系和线性表完全相同,其差别是线性表允许在任意位置进行插入和删除操作,而堆栈只允许在固定一端进行插入和删除 ...
- Prince2是怎么考试的?
Prince2是怎么考试的? 在前几年,对于项目经理来讲关注的很多是单项目管理的工具技术模板,谈论最多的是,进度延期,成本超支,范围蔓延等等!有一个不成文的形态就是--去考个PMP吧!一时间PMP成为 ...
- keytool的使用
1. 创建数字证书 keytool -genkey -v -alias scent -dname "CN=John,OU=MNG,O=Corp,L=Hangzhou,ST=Zhejiang, ...
- 关于sifari兼容性的一个问题
输入框 一个很基础的控件 结果出现了兼容性问题 在chrome ie android上页面正常 结果在Safari和IOS系统里面输入框无法输入, 点击后边框有高亮效果但是无法输入文本,问题代码如下: ...