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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 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 MYSQL简易交互式站点开发
2016/12/27 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
Vue实现手机计算器
2020/08/17 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python实现控制COM口的示例
2019/07/03 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
python中如何使用虚拟环境
2020/10/14 Python
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
旷课检讨书2000字
2014/01/14 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
十八大观后感
2015/06/12 职场文书
党员证明信
2015/06/19 职场文书
详解Python描述符的工作原理
2021/06/11 Python
mysql数据库隔离级别详解
2022/06/16 MySQL