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为table动态添加行的实现代码
Mar 30 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
详解Vue中的watch和computed
Nov 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 strrpos()与strripos()函数
2013/08/31 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP自定义多进制的方法
2016/11/03 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python线程中的同步问题及解决方法
2019/08/29 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
师范应届生教师求职信
2013/11/05 职场文书
科研先进个人典型材料
2014/01/31 职场文书
婚礼主持词
2014/03/13 职场文书
公司委托书范本
2014/04/04 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
会议简讯范文
2015/07/20 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Python中的tkinter库简单案例详解
2022/01/22 Python