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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JavaScript 基础问答三
Dec 03 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
React组件生命周期详解
Jul 03 Javascript
JavaScript运行原理分析
Feb 09 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 Javascript
JS setTimeout与setInterval的区别
Apr 20 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 一个页面执行时间类代码
2010/03/05 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
学习Vue组件实例
2018/04/28 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python中str.format()详解
2017/03/12 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
计算机专业学生的自我评价
2013/12/15 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
请假条范文大全
2014/04/10 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
先进班组材料范文
2014/12/25 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python