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 模拟用户单击事件
Dec 31 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
jquery预加载图片的方法
May 27 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
Vue基础配置讲解
Nov 29 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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使用内置函数生成图片的方法详解
2016/05/09 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
js string 转 int 注意的问题小结
2013/08/15 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
python 循环数据赋值实例
2019/12/02 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
元宵节晚会主持人串词
2014/03/25 职场文书
幼儿教师求职信
2014/05/24 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
单位接收证明格式
2015/06/18 职场文书