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获取html对象的几种方式介绍
Dec 05 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
Javascript异步编程async实现过程详解
Apr 02 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 多维数组排序实现代码
2009/08/05 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
推荐11个实用Python库
2015/01/23 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
李培根演讲稿
2014/05/22 职场文书
三峡人家导游词
2015/01/31 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫