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 09 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
Javascript事件实例详解
Nov 06 Javascript
Javascript window对象详解
Nov 12 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 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实现简单的语法高亮函数实例分析
2015/04/27 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
什么是GWT的Entry Point
2013/08/16 面试题
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
终止劳动合同通知书
2015/04/16 职场文书
婚宴新娘致辞
2015/07/28 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
Python装饰器的练习题
2021/11/23 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python