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的一个浮动框(扩展性比较好 )
Aug 27 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
python生成n个元素的全组合方法
2018/11/13 Python
Python之循环结构
2019/01/15 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
pygame实现飞机大战
2020/03/11 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
初学者学习Python好还是Java好
2020/05/26 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
平面设计师工作职责范文
2013/12/03 职场文书
自荐信如何制作?
2014/02/21 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
文员岗位职责
2015/02/04 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS