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 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
js实现盒子滚动动画效果
Aug 09 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随机获取金山词霸每日一句的方法
2015/07/09 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python根据日期返回星期几的方法
2015/07/06 Python
python爬取51job中hr的邮箱
2016/05/14 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
党委书记岗位职责
2013/11/24 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python
Golang 字符串的常见操作
2022/04/19 Golang