摘要:

我们在开发Web程序时或多或少都会应用到Javascript脚本程序,在当今的AJAX如此盛行的时代,JS的作用将不断的提升。这个新一代的 Web 应用程序的复杂性和交互性需要程序员以完全不同的方法来编写JavaScript 代码,我们在编写一次性的脚本显然已经不能够满足这样的需求。面向对象编程 (OOP) 是一种流行的编程方法,很多 JavaScript 库中都使用这种方法,以便更好地管理和维护基本代码。我们可以从ASP.NET AJAX库或SilverLight库以及经常见到的prototype.js库等等都采用了这种编程方式。JS支持OOP,但是又和C++,C#等非常不一样,所以这种概念一直会让人难以琢磨,这编文章将讲述 JavaScript 语言实际上如何支持面向对象编程,我们又如何应用这种方式来编写我们JS程序。

JavaScript对象

在.NET中我们知道,万物皆为对象,也就是类实例化后得到的就是对象,每个对象都有各自不同的属性和方法。JavaScript中的对象和他有所不同,我们知道在JS中我们可以通过.[]运算符来获取或设置对象中的方法或属性,我们可以把它想象为包含键/值对的字典。下面我们来看个例子:

1var obj = new Object();
2obj.Now= new Date();
3alert(obj.Now); 

我们可以用[]运算符来达到同样的效果:

1var obj=new Object();//{};
2obj["Now"]=new Date();
3alert(obj.Now);

我们还可以直接定义它的属性,效果一样:

1var obj={"Now": new Date()};
2alert(obj.Now);

以上三种方法都能够达到同样得效果,如果你用过C#3.0他的匿名赋值就有点像,也许它就是跟JS学的(只是猜测)。您不必预先声明属性Now — 如果 obj 没有该名称的属性,该属性将被直接添加到 obj。这是不是很像字典,我们可以不断地往字典里加入键/值对,我想把它想象成字典最容易理解多了。

JavaScript函数

在上面所讲述的是对象的属性,我们可以把属性值直接付给一个键(名称),其实JS的方法也是这样。JavaScript 函数实际上是具有与它关联的可执行代码的对象,我们定义方法时可以把我们的函数符给一个对象(类)中的名称(方法名称)。对于方法我想大家应该都很熟悉,这里就不多说了。

JavaScript原型

在使用 JavaScript 的面向对象编程中,原型对象是个核心概念。在 JavaScript 中对象是作为现有示例(即原型)对象的副本而创建的,该名称就来自于这一概念。此原型对象的任何属性和方法都将显示为从原型的构造函数创建的对象的属性和方法。可以说,这些对象从其原型继承了属性和方法。

在 JavaScript 中,每个函数都有名为“prototype”的属性,用于引用原型对象。此原型对象又有名为“constructor”的属性,它反过来引用函数本身。 当我们用用new创建对象时,所创建的对象将继承此函数的prototype属性。

每个 JavaScript 对象都继承一个原型链,而所有原型都终止于 Object.prototype。当您尝试访问对象的属性/方法时,JavaScript 将检查该属性/方法是否是在该对象中定义的。如果不是,则检查对象的原型。如果还不是,则检查该对象的原型的原型,如此继续,一直检查到 Object.prototype。所以我想如果用很长的prototype链对于性能方面应该会有所影响,但是现在的客户端足以承受,因此在ASP.NET AJAX中用了相当大的prototype。

JavaScript闭包

由于我对这个概念也不是特别的熟悉这个咚咚,它是JavaScript的一个高级功能,闭包是当内部函数绑定到它的外部函数的本地变量时所发生的运行时现象,这很容易让我们想到在C#中匿名的方法。我们可以通过一下实例来更好的理解这个功能:

1var isMoreThan300 = filter(
2    function(x) { return (x > 300) ? true : false; }, 
3    num);
4

以上事例说明了当前数num是否比300大,如果比300大我们就返回true,否则反回false。但我们可能还需要判断是否比400,500,200...等时,我们可以通过下列方法来完成:

 1function makeMoreThan(lowerBound) {
 2    return function(numberToCheck) {
 3        return (numberToCheck > lowerBound) ? true : 
 4
 5false;
 6    };
 7}
 8
 9function filter(pred, numberToCheck) {
10    return pred(numberToCheck);
11}
12
13
14var isMoreThan10 = makeMoreThan(10);
15var isMoreThan100 = makeMoreThan(100);
16alert(filter(isMoreThan10,1));
17alert(filter(isMoreThan100,111));

上面的代码运行后返回的结果是:false;true。从上面的代码可以看出makeMoreThan这个方法返回的是匿名函数,而这个匿名函数接受一个参数numberToCheck。根据作用域规则,当函数makeMoreThan退出时,变量lowerBound将失效,然而返回的匿名方法仍然带着lowerBound甚至在makeMoreThan结束后很长的一段时间内仍是如此。这样我们就可以利用这个特性来模拟.NET等中的私有变量,代码如下:

1function Person(name) {
2    this.getName = function() { return name; };
3    this.setName = function(newName) { name = newName; };
4    var gender;         
5    this.getGender = function() { return gender; };
6    this.setGender  = function(newGender) { gender = newGender; };

然后我们就可以调用Person中的方法给变量赋值,而其中的name和gender则就是我们的私有变量,当然这和.NET中所说的私有变量肯定是不同的。

Javascript继承

在OOP中继承是不可少的,在C#中要继承某个类只要用:运算符就可继承,但是在Javascript中可没有那么简单,我们还需要写点代码才能够达到此效果。通过下面的例子就能够很好的说明:

 1function Person(name){
 2   this.getName = function(){return name;};
 3   this.setName = function(newName){name = newName;};
 4}
 5
 6Person.prototype.toString = function(){
 7   return "My name is:" + this.getName();
 8}
 9
10function XiaMenPerson(name,address){
11   Person.call(this,address);
12   this.getAddress = function(){return address;};
13}
14
15XiaMenPerson.prototype = new Person();//继承prototype链
16
17XiaMenPerson.prototype.constructor = XiaMenPerson;//指定当前构造函数
18//重写toString()方法,调用基类中的getName属性。
19XiaMenPerson.prototype.toString = function(){
20   return "My name is:"+this.getName()+"\nCome from:"+this.getAddress();
21};
22
23var p = new Person("网魂小兵");
24alert(p);
25//My name is:网魂小兵
26var xp = new XiaMenPerson("网魂小兵","厦门");
27alert(xp);
28//My name is:网魂小兵
29//Come from:厦门
30alert(xp instanceof XiaMenPerson);//true;
31alert(xp instanceof Person);//true;
32alert(xp instanceof Object);//true;

手表一看,边学边写边测试(MSDN-Magazine)4个小时过去了,写JS比写其他的C#的难得多阿,看来JS对我来说还是有很大的难度阿。通过ASP.NET AJAX我们还可以看出命名空间的模拟(我们可以声明当前类所在的命名空间为一个变量,这样调用方法或类时就不需要写那么长的命名空间了),反射等等这里就不多说了。Windows Server 2008(Longhorn Server)听说今年下半年要发布了,VS2007(Orcas)不知道什么时候能够发布,希望他的到来给我们提供很爽的IDE编辑器来写JS。这篇文章也是为了能够更好的学习ASP.NET AJAX等做准备,希望能给大家带来点帮助。

转载于:https://www.cnblogs.com/hzuIT/articles/758627.html

[JavaScript]面向对象编程相关推荐

  1. 《JavaScript面向对象编程指南》——第1章 引言1.1 回顾历史

    本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...

  2. 《JavaScript面向对象编程指南》——1.3 分析现状

    本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.3节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...

  3. (二)Javascript面向对象编程:构造函数的继承

    Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...

  4. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

    javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...

  5. JavaScript面向对象编程深入分析

    JavaScript面向对象编程深入分析 一. Javascript 面向对象编程:封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又 ...

  6. 《javascript面向对象编程指南》读书笔记

    <javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记 第一章 面向对象的JavaScript 第二章 基本数据类型与流程控制 变量 ...

  7. (转)Javascript 面向对象编程(一):封装

    它们都是非常优秀的Javascript读物,推荐阅读. 笔记分成三部分.今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承&q ...

  8. 《JavaScript面向对象编程指南》——1.7 训练环境设置

    本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.7节,作者: [加]Stoyan Stefanov 译者: 凌杰 更多章节内容可以访问云栖社区" ...

  9. 《JavaScript面向对象编程指南》—第128页错误指正

    最近在阅读<JavaScript面向对象编程指南第2版>,感觉很有帮助.今晚发现一个小错误,想指正一下. 如图,书中第128页: 书中的第三个例子代码如下: "potato&qu ...

  10. 浅谈JavaScript 面向对象编程[转]

    这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...

最新文章

  1. 北师大刘嘉:认知神经科学如何打开 AI 黑箱?
  2. 支付宝人脸数据被共享?李开复道歉
  3. Linux日常命令使用记录
  4. Redis和数据库 数据同步问题
  5. 【POJ - 3616】Milking Time (贪心+dp)
  6. python中importlib模块安装_Python中标准模块importlib详解
  7. 图论 —— k 短路
  8. Python机器学习:SVM003Soft Margin和SVM(线性)的正则化
  9. Linux深入篇之一:配置Nginx Web服务器及多域名主机
  10. 用R3写卡成PRL302,解决新电信卡PRL301只能1X不能上3G问题
  11. 如何安装mysql安装包_如何安装MySQL,MySQL两种安装方式
  12. C语言中进制转换与函数
  13. java网上购物系统_Java Web 应用教程——网上购物系统的实现
  14. 只有程序员才懂的幽默
  15. SSL基础:12:查询证书详细信息
  16. ESP8266 +0.96“ I2C OLED 表盘时钟
  17. mac os vs windows(于前端开发而言)
  18. 我的美国CS面试经验分享
  19. 关于tensorflow版本更新
  20. linux cp并打包目录,【linux】【qt5】【将linux下的qt程序打包发布(完全适用于中标麒麟)】...

热门文章

  1. vrrp 的mac是怎么算出来的_宇宙总质量约10^55kg,与大家掰一掰是怎么算出来的
  2. redirect_uri 域名与后配置不一致是什么意思_网站域名怎么购买?多少钱?
  3. 电脑配置知识_电脑小知识:装机不求人!10 分钟电脑配置挑选速成攻略|硬盘|电脑|cpu|装机|固态硬盘|机械硬盘...
  4. 汇编实现冒泡法排序及优化
  5. 中牟好的计算机学校,中牟县职业中等专业学校
  6. 蓝桥杯2019年第十届C/C++省赛第六题-旋转
  7. java实现阴历、阳历互相转换
  8. Android 网络请求(OKHttp框架)
  9. Java面向对象之内部类(访问格式)
  10. HDU 5980 位运算 进制转换函数 DEV C++调试失败的原因