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 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JS hashMap实例详解
May 26 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
js自定义弹框插件的封装
Aug 24 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
详解json在php中的应用
2018/09/30 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python字符串的修改方法实例
2019/12/19 Python
python的Jenkins接口调用方式
2020/05/12 Python
python dict如何定义
2020/09/02 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
科技节口号
2014/06/19 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
典型事迹材料范文
2014/12/29 职场文书
正规欠条模板
2015/07/03 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
分享3个非常实用的 Python 模块
2022/03/03 Python