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 相关文章推荐
JS实现选项卡实例详解
Nov 17 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
js删除局部变量的实现方法
2016/06/25 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python实现整数的二进制循环移位
2019/03/08 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python龙贝格法求积分实例
2020/02/29 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
高老头读书笔记
2015/06/30 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
如何在C++中调用Python
2021/05/21 Python
React四级菜单的实现
2022/04/08 Javascript