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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
Vue父子组件之间的通信实例详解
Sep 28 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
杏林同学录(六)
2006/10/09 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php截取视频指定帧为图片
2016/05/16 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
原生JS实现留言板
2020/03/26 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Django 反向生成url实例详解
2019/07/30 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python正则表达式学习小例子
2020/03/03 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
夏季药店促销方案
2014/08/22 职场文书
导游词之大雁塔景区
2019/09/17 职场文书