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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
antd design table更改某行数据的样式操作
Oct 31 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php生成随机密码的几种方法
2011/01/17 PHP
php include和require的区别深入解析
2013/06/17 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
基于Python的关键字监控及告警
2017/07/06 Python
Python探索之自定义实现线程池
2017/10/27 Python
利用Python循环(包括while&for)各种打印九九乘法表的实例
2017/11/06 Python
Python continue继续循环用法总结
2018/06/10 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
eBay美国官网:eBay.com
2020/10/24 全球购物
合作意向协议书范本
2014/03/31 职场文书
金融事务专业求职信
2014/04/25 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
车间统计员岗位职责
2015/04/14 职场文书
公司承诺书格式范文
2015/04/28 职场文书
二婚主持词
2015/06/30 职场文书
2015年度女工工作总结
2015/10/22 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python