JavaScript中的对象化编程


Posted in Javascript onJanuary 16, 2008

关于对象化编程的语句 现在我们有实力学习以下关于对象化编程,但其实属于上一章的内容了。

with 语句 为一个或一组语句指定默认对象。

用法:
with (<对象>) <语句>;

with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中,请注意 Math 的重复使用:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);

当使用 with 语句时,代码变得更短且更易读:
with (Math) {
  x = cos(3 * PI) + sin(LN10);
  y = tan(14 * E);
}

this 对象 返回“当前”对象。在不同的地方,this 代表不同的对象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件处理程序中)使用 this,它就代表 window 对象;如果在 with 语句块中使用 this,它就代表 with 所指定的对象;如果在事件处理程序中使用 this,它就代表发生事件的对象。

一个常用的 this 用法:
<script>
...
function check(formObj) {
  ...
}
...
</script>

<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>

这个用法常用于立刻检测表单输入的有效性。

自定义构造函数 我们已经知道,Array(),Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用 function。在 function 里边用 this 来定义属性。
function <构造函数名> [(<参数>)] {
  ...
  this.<属性名> = <初始值>;
  ...
}

然后,用 new 构造函数关键字来构造变量:
var <变量名> = new <构造函数名>[(<参数>)];

构造变量以后,<变量名>成为一个对象,它有它自己的属性——用 this 在 function 里设定的属性。

以下是一个从网上找到的搜集浏览器详细资料的自定义构造函数的例子:
function Is() {
  var agent = navigator.userAgent.toLowerCase();
  this.major = parseInt(navigator.appVersion);  //主版本号
  this.minor = parseFloat(navigator.appVersion);//全版本号
  this.ns = ((agent.indexOf('mozilla')!=-1) &&
             ((agent.indexOf('spoofer')==-1) && //是否 Netscape
              (agent.indexOf('compatible') == -1)));
  this.ns2 = (this.ns && (this.major == 3));    //是否 Netscape 2
  this.ns3 = (this.ns && (this.major == 3));    //是否 Netscape 3
  this.ns4b = (this.ns && (this.minor < 4.04)); //是否 Netscape 4 低版本
  this.ns4 = (this.ns && (this.major >= 4));    //是否 Netscape 4 高版本
  this.ie = (agent.indexOf("msie") != -1);      //是否 IE
  this.ie3 = (this.ie && (this.major == 2));    //是否 IE 3
  this.ie4 = (this.ie && (this.major >= 4));    //是否 IE 4
  this.op3 = (agent.indexOf("opera") != -1);    //是否 Opera 3
  this.win = (agent.indexOf("win")!=-1);        //是否 Windows 版本
  this.mac = (agent.indexOf("mac")!=-1);        //是否 Macintosh 版本
  this.unix = (agent.indexOf("x11")!=-1);       //是否 Unix 版本
}

var is = new Is();

这个构造函数非常完整的搜集了浏览器的信息。我们看到它为对象定义了很多个属性:major, minor, ns, ie, win, mac 等等。它们的意思见上面的注释。把 is 变量定义为 Is() 对象后,用 if (is.ns) 这种格式就可以很方便的知道浏览器的信息了。我们也可以从这个构造函数中看到,它也可以使用一般的 JavaScript 语句(上例中为 var 语句)。

让我们再来看一个使用参数的构造函数:
function myFriend(theName, gender, theAge, birthOn, theJob) {
  this.name = theName;
  this.isMale = (gender.toLowerCase == 'male');
  this.age = theAge;
  this.birthday = new Date(birthOn);
  this.job = theJob
}

var Stephen = new myFriend('Stephen', 'Male', 18, 'Dec 22, 1982', 'Student');

从这个构造函数我们不但看到了参数的用法,还看到了不同的属性用不同的数据型是可以的(上例五个属性分别为:字符串,布尔值,数字,日期,字符串),还看到了构造函数里也可以用构造函数来“构造”属性。如果用了足够的“保护措施”来避免无限循环,更可以用构造函数自身来构造自己的属性。

Javascript 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
Jquery 扩展方法
May 06 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
JavaScript中的事件处理
Jan 16 #Javascript
JavaScript中的其他对象
Jan 16 #Javascript
JavaScript中的Document文档对象
Jan 16 #Javascript
JavaScript中的Location地址对象
Jan 16 #Javascript
JavaScript中的History历史对象
Jan 16 #Javascript
JavaScript中的Window窗口对象
Jan 16 #Javascript
JavaScript中的Screen屏幕对象
Jan 16 #Javascript
You might like
咖啡语言
2021/03/03 咖啡文化
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
通过C++学习Python
2015/01/20 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python版简单工厂模式
2017/10/16 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
python实现同一局域网下传输图片
2020/03/20 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
师德演讲稿范文
2014/05/06 职场文书
环保倡议书范文
2014/05/12 职场文书
企业精神口号
2014/06/11 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
免职通知
2015/04/23 职场文书