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特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
Angular排序实例详解
Jun 28 Javascript
VUE长按事件需求详解
Oct 18 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
使用数据库保存session的方法
2006/10/09 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
jquery radio 操作代码
2011/03/16 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
python中xrange用法分析
2015/04/15 Python
Python中的random()方法的使用介绍
2015/05/15 Python
Python中Class类用法实例分析
2015/11/12 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
市场营销专业推荐信
2013/11/03 职场文书
《赶海》教学反思
2014/04/20 职场文书
作文评语大全
2014/04/23 职场文书
保护环境倡议书范文
2014/05/13 职场文书
爱与责任演讲稿
2014/05/20 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
慈善募捐倡议书
2015/04/27 职场文书
公司宣传语大全
2015/07/13 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL