JS创建类和对象的两种不同方式


Posted in Javascript onAugust 08, 2014

在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数。下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后。

var Person = function(name) { // 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类 

this.name = name; 

} 

function Person(name) { // 直接定义一个叫做Person的函数表示Person类 

this.name = name; 

} 

Person.prototype = { // 定义Person的prototype域 

printName: function() { // 定义一个print函数 

alert(this.name); 

} 

}

当你通过函数的方式声明了一个类之后, 你就可以通过new操作符来实例化这个类。这样, 你就可以调用类的成员函数来完成你的逻辑。

var person = new Person("Joe Smith"); // 使用new操作符来新建一个Person的实例, 并赋给变量person 
person.printName(); // person就可以看作是一个实例的引用(reference), 所以可以通过这个引用来调用Person类中的成员函数

我们来总结一下创建一个新的类的实例的整个流程和步骤:

1. 通过定义一个函数的方式(匿名或者实名)来声明一个新的类.
2. 如果有必要, 定义这个新的类的prototype域.
3. 使用new操作符紧跟你所定义的函数来创建一个新的类的实例. 一旦JavaScript编译器碰到了new操作符, 它实际上创建了一个空的类实例变量.
4. 将所有这个类的prototype域中的属性与方法复制到这个新的实例中, 并将其成员函数中所有的this指针指向这个新创建的实例.
5. 接下来, 执行紧跟在new操作符后面的那个函数.
6. 当你执行这个函数时, 如果你试图对一个不存在的属性进行赋值, JavaScript编译器将自动为你在这个实例范围内新创建这个属性.
7. 函数执行完毕后, 将这个初始化完成的实例返回.

在Prototype中, 使用Class对象, 你可以以一个比较简单的方式来声明一个新的对象。通过使用Class.create(), prototype为你创建了一个默认的构造函数initialize(), 一旦你实现这一函数, 就可以以一个类似Java中构造函数的方式来创建一个新的类的实例。

Javascript 相关文章推荐
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
webpack打包js文件及部署的实现方法
Dec 18 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 #Javascript
jquery datatable后台封装数据示例代码
Aug 07 #Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 #Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 #Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 #Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 #Javascript
谷歌地图打不开的解决办法
Aug 07 #Javascript
You might like
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
javascript,jquery闭包概念分析
2010/06/19 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
js date 格式化
2017/02/15 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python实现数组插入新元素的方法
2015/05/22 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
美国在线工具商店:Acme Tools
2018/06/26 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
教师节宣传方案
2014/05/23 职场文书
小学语文教研活动总结
2014/07/01 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL