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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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 模拟$_PUT实现代码
2010/03/15 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
基于python3实现倒叙字符串
2020/02/18 Python
django跳转页面传参的实现
2020/09/17 Python
Django视图类型总结
2021/02/17 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
师德师风剖析材料
2014/09/30 职场文书
行为习惯主题班会
2015/08/14 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
详解Vue的sync修饰符
2021/05/15 Vue.js
Mysql中存储引擎的区别及比较
2021/06/04 MySQL