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 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
js实现简单锁屏功能实例
May 27 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 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 array_unique之后json_encode需要注意
2011/01/02 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php自定义分页类完整实例
2015/12/25 PHP
php远程下载类分享
2016/04/13 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
nginx 设置多个站跨域
2021/03/09 Servers
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
举例讲解Python中装饰器的用法
2015/04/27 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
Python函数调用追踪实现代码
2020/11/27 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Python面试题集
2012/03/08 面试题
军训拉歌口号
2014/06/13 职场文书
销售活动策划方案
2014/08/26 职场文书
道歉短信大全
2015/05/12 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python