JavaScript入门教程(12):对象化编程

2016-02-20 00:55 9 1 收藏

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程，今天给大家分享JavaScript入门教程(12):对象化编程教程,希望对大家能有一点小小的帮助。

【 tulaoshi.com - Web开发】

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

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

用法：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）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');

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

来源:http://www.tulaoshi.com/n/20160220/1632831.html

上一篇： JavaScript入门教程(2):JS基础知识
下一篇： WPS让文字在两个文本框内滑动

看过《JavaScript入门教程(12):对象化编程》的人还看了以下文章更多>>

土人AS入门教程对象篇

标签： flash教程

虽然AS不是真正的面向对象的编程，但是它也有对象的概念。这个概念贯穿整个AS的始终，所以，对对象的理解，比对语法或者其他的理解更为重要。现在开始吧：首先，我们来了解一下路径，路径分两种：绝对路径和相对路径。做过html的朋友应该知道这个概念。但这里我还是要详细解释一下，我认为对路径的理解要深入，我初学的时候就是磕在路径上。 ...

VxD编程入门教程(2)

标签：编程语言网络编程

三、Windows 95／98应用程序与VxD的通信 Windows 95／98应用程序与VxD的通信一般使用DeviceIoControl函数，这里给出一个实例源程序（FHTEST.C）如下： //拦截Windows 95／98文件操作测试程序 #include #include "tchar.h" #define INSTALL_FILE_SYSTEM_API_HOOK 1 #define UNINSTALL_FILE_SYSTEM_API_HOOK 2 static TCHAR szAppName[...

JavaScript入门教程(13):Cookies

标签： Web开发

使用 Cookies 我们已经知道，在 document 对象中有一个 cookie 属性。但是 Cookie 又是什么？某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息，这些文件就称为 Cookie。 MSIE 帮助。一般来说，Cookies 是 CGI 或类似，比 HTML 高级的文件、程序等创建的，但是 JavaScript 也提供了对 Cookies 的很全面的访问权利。在继续...

Javascript面向对象编程

标签： Web开发

----什么是类和对象这是所有面向对象编程之前必须弄明白的. 所谓类:简单地说就是模板,说的专业一些,是一类具有某种性质的物的集合.比如:人就是一个类,车也是一个类,等等. 所谓对象:就是类的具体实现.如上面所说,人是一个类,一个具体的人就是一个对象,比如张三. &nb...

JavaScript入门教程(11):事件处理

标签： Web开发

事件处理概述事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死，缺乏灵活性。事件处理的过程可以这样表示：发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。事件的处理程序...

查看更多精彩>>