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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
JS中Attr的用法详解
Oct 09 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
php设计模式 Delegation(委托模式)
2011/06/26 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
js自动生成对象的属性示例代码
2013/10/28 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Php多进程实现代码
2018/05/07 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
工程承包协议书
2014/04/22 职场文书
减负增效提质方案
2014/05/23 职场文书
大学生团日活动总结
2015/05/06 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript