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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
EsLint入门学习教程
Feb 17 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
vue基于viewer实现的图片查看器功能
Apr 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
javascript中sort()的用法实例分析
2015/01/30 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python中安装easy_install的方法
2018/11/18 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python交易记录整合交易类详解
2019/07/03 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
中学教师管理制度
2014/01/14 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
市场部经理岗位职责
2014/04/10 职场文书
教书育人演讲稿
2014/09/11 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript