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中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
Django使用多数据库的方法
Sep 06 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
js模拟实现烟花特效
Mar 10 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正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
解密效果
2006/06/23 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
如何将python中的List转化成dictionary
2016/08/15 Python
python自定义异常实例详解
2017/07/11 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python编写单元测试代码实例
2020/09/10 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
献爱心标语
2014/06/21 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
单位单身证明样本
2014/10/11 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2014年营业员工作总结
2014/11/18 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
java executor包参数处理功能 
2022/02/15 Java/Android