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 1.42 checkbox 全选和反选代码
Mar 27 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
详解React 的几种条件渲染以及选择
Oct 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php文件系统处理方法小结
2016/05/23 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
python3中zip()函数使用详解
2018/06/29 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
生产班组长岗位职责
2014/01/05 职场文书
采购主管岗位职责
2014/02/01 职场文书
结对共建协议书
2014/08/20 职场文书
无犯罪记录证明
2014/09/19 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python