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读取xml
Nov 04 Javascript
ECMAScript 基础知识
Jun 29 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
JavaScript事件委托实例分析
May 26 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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 文件上传类代码
2011/08/06 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP静态成员变量
2017/02/14 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
jquery 笔记 事件
2011/11/02 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
JavaScript简介
2015/02/15 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
layui选项卡效果实现代码
2017/05/19 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
处理Python中的URLError异常的方法
2015/04/30 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python中upper是做什么用的
2020/07/20 Python
Python识别处理照片中的条形码
2020/11/16 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
中学生寄语大全
2014/04/03 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
同意报考公务员证明
2015/06/17 职场文书
MySQL基础(二)
2021/04/05 MySQL
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python