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 相关文章推荐
jquery中$.post()方法的简单实例
Feb 04 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
js里面的变量范围分享
Jul 18 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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python中bisect的用法及示例详解
2020/07/20 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
火山动力Java笔试题
2014/06/26 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
自我鉴定四大框架
2014/01/17 职场文书
网络编辑求职信
2014/04/30 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书