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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
mui back 返回刷新页面的实例
Dec 06 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 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
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
Vue实现动态响应数据变化
2017/04/28 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python实现计算倒数的方法
2015/07/11 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
pytorch实现查看当前学习率
2020/06/24 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
static函数与普通函数有什么区别
2015/12/25 面试题
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
保险公司年会主持词
2014/03/22 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
酒店员工管理制度
2015/08/05 职场文书
创业计划书之水果店
2019/07/18 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python