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是怎么继承的介绍
Jan 05 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
js格式化时间的简单实例
Nov 27 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
微信小程序实现音乐播放器
Nov 20 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
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中new static() 和 new self() 的区别介绍
2015/01/09 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
js中eval详解
2012/03/30 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jqTransform美化表单
2015/10/10 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
详细讲解Python中的文件I/O操作
2015/05/24 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python变量类型知识点总结
2019/02/18 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
浅谈Python协程
2020/06/17 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
车间统计员岗位职责
2014/01/05 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
围城读书笔记
2015/06/26 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
Java无向树分析 实现最小高度树
2022/04/09 Javascript