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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
将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仿QQ验证码的实例分析
2013/07/01 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
Angular路由简单学习
2016/12/26 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
详解Layer弹出层样式
2017/08/21 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
tensorflow如何批量读取图片
2019/08/29 Python
appium+python adb常用命令分享
2020/03/06 Python
python能否java成为主流语言吗
2020/06/22 Python
如何利用Python写个坦克大战
2020/11/18 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
电气个人求职信范文
2014/02/04 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
观后感开头
2015/06/19 职场文书
党员干部学习心得体会
2016/01/23 职场文书