JavaScript 构造函数 面相对象学习必备知识


Posted in Javascript onJune 09, 2010
function A(x) 
{ 
this.x = x; 
} 
var obj = new A(5); 
alert(obj.x);

这段代码十分简单,但是我们重要的是看到了一个十分惊讶的结果,obj被我们赋予了一个属性x,就如同我们在C#中使用某个类的实例的时候一样。那么这个属性是怎么样产生的呢?

关键语句:this.x=x。这句话就是进行一个属性的申明与赋值,这里,我们肯定会问到,this是什么?为什么可以使用this.x来进行申明与赋值属性呢?

其实this代表的就是我们刚刚实例化出来的obj,就相当于我们使用obj去调用了构造函数A里面的属性、方法等等。

那么,我们怎么样去在构造函数中定义一个方法呢?

function A(x,y) 
{ 
this.x = x; 
this.y = y; 
A.prototype.FunX = function(){alert(x)}; 
A.prototype.FunY = function(){alert(y)}; 
} 
var obj = new A(5,10); 
alert(obj.x); 
alert(obj.y); 
obj.FunX(); 
obj.FunY();

执行的结果十分简单,弹出5、10、5、10的结果,可以看到
A.prototype.FunX = function(){alert(x)}; 
A.prototype.FunY = function(){alert(y)};

这两句代码定义了两个方法,分别是FunX和FunY。那么,如果现在出现了一种情况,如果我们需要临时的给A函数添加方法怎么办呢?
function A(x,y) 
{ 
this.x = x; 
this.y = y; 
} 
A.prototype.FunX = function(){alert("5")}; 
var obj = new A(5,10); 
alert(obj.x); 
alert(obj.y); 
obj.FunX(); 
A.prototype.FunY = function(){alert("10")}; 
obj.FunY();

运行这段代码,我们可以看到,弹出的结果还是和以前的结果一样,但是我们将两个方法都定义在了外边,而且方法FunY是定义在实例化之后的,那么这里大家看出来了什么没?很显然,在我们使用obj.FunY()语句时候,代码会重新的去构造一下obj,然后再来执行此方法,那么如果代码改成这样?
obj.FunY(); 
A.prototype.FunY = function(){alert("10")};

很显然,FunY()就不会去执行方法了。

下一遍,将会说一下关于JavaScript的构造函数与原型(prototype),若有疑问或不正之处,欢迎提出指正和讨论。

Javascript 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
js数组操作学习总结
Nov 04 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
javascript检测两个数组是否相似
May 19 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
JavaScript模块详解
Dec 18 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
JS 图片缩放效果代码
Jun 09 #Javascript
JQuery优缺点分析说明
Jun 09 #Javascript
web页面数据展示新想法(json)
Jun 08 #Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 #Javascript
location.search在客户端获取Url参数的方法
Jun 08 #Javascript
js word表格动态添加代码
Jun 07 #Javascript
Extjs中常用表单介绍与应用
Jun 07 #Javascript
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
django模板结构优化的方法
2019/02/28 Python
Python input函数使用实例解析
2019/11/22 Python
python 实现按对象传值
2019/12/26 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
Collection和Collections的区别
2016/05/02 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
五年级音乐教学反思
2014/02/06 职场文书
简单租房协议书
2014/04/09 职场文书
骨干教师培训方案
2014/05/06 职场文书
安全责任书
2015/01/29 职场文书
搬迁通知
2015/04/20 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
python脚本框架webpy模板控制结构
2021/11/20 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL