1. 最新更新请访问: http://denghejun.github.io

  JavaScript与OOP

     JavaScript作为web前端一种重要的脚本技术,已被大多开发人员所熟知。compare with the other

     programming language,可能会有很多不同的地方。但据我观察大多数普通程序员仅仅会用script

做一些简单的工作,例如前端验证、DOM元素查找等。当然,不可否认,有时候似乎我们没有必要把

script代码编写的太过于复杂或是紧凑。从自我追求上讲,每个程序员都有责任将自己的代码整理的井

井有条且是有结构化的。OOP的思想是一种迎合自然的思想,它的出现不得不说让我们重新审视自己的

代码结构。Programming language 一般可以和OOP结合得很完美,所以JavaScript也不例外。今

天我们将对此进行深入的探索。

  创建对象

      OO的语言很明显的特征是它会有类(class)的概念,通过class,可以创建任意个数的具有相同属性和

方法的对象实例。

      我们以JavaScript中创建object对象为例,你会发现他是如此简单。

  1. var car=new object();
  2.  
  3.     car.name="jeep";
  4.  
  5.     car.sayName=function (){
  6.     alert(this.name);
  7.     };
  8.  
  9.     car.sayName();// alert "jeep"

    从上面的代码我们可以看出,Javascript创建对象的关键字是new,这与大多数OO语言相似。我们创建

car的对象,接着给予它一个name属性和一个sayName方法,以及它的调用方式,一切看起来都是那么

自然。但是问题总是被隐藏在看似优美的代码中。object是所有对象的base class,我们要创建不同类型

的对象,势必会产生很多重复代码。进而,我们必须寻求更加完美的编码方式。

    

    工厂

           设计模式中的工厂相比大家都有看过,与之类似,下面的代码将会演示产生car对象的工厂模式。

  1. function CreateCar(name)
  2. {
  3. var car= new Object();
  4.  
  5. car.name=name;
  6.  
  7. car.sayName=function(){
  8. alert(this.name);
  9. };
  10.  
  11. }

实际上它看起来也并不复杂,但似乎问题变得更为头疼了,因为每当你调用该方法后,工厂丢给你的对

象你并不知道它是什么类型的,这对于OO而言无疑是背道而驰。

  构造函数模式

如果你熟悉OO语言的特点,那么你对constructor一定不会陌生。恰巧JavaScript也有。所有的OO语

言都是相同的,我甚至经常怀

疑他们疑似在互相抄袭。

      构造函数模式能够很好的解决对象类型的问题,例如下边的代码,看起来一定会很不错。

  1. function Car(name)
  2. {
  3.  
  4. this.name=name;
  5.  
  6. this.sayName=function(){
  7. alert(this.name);
  8. };
  9.  
  10. }
  11.  
  12. var car1 =new Car("jeep");
  13. var car2 =new Car("jack");
  14.  
  15. car1.sayName(); // alert "jeep"
  16. car2.sayName(); // alert "jack"

每个对象都会有一个constructor属性,直接指向构造函数,例如car1.constructor==Car,car2.con

structor==Car。在构造函数指向过程中,会有一个作用域的概念,例如构造函数中的this就代表了被创

建后的对象,例如car1和car2。

       接下来,我们可以很容易的检测对象的类型了:

  1. alert(car1 instanceof Object); // true
  2.  
  3. alert(car1 instanceof Car); //true
  4.  
  5. alert(car2 instanceof Object); // true
  6.  
  7. alert(car2 instanceof Car);// true

       构造函数也是一个普通的方法,它任然可以像普通函数一样的调用方式那样被调用:

           像构造函数一样调用:

  1. var car1 =new Car("jeep");
  2. car1.sayName(); // "jeep"

    

       像普通函数一样调用:

  1. Car('jeep'); // 将被注册到window对象中
  2. window.sayName();// 'jeep'

      在另一个对象的作用域中调用:

  1. var o= new Object();
  2. Car.call(o,"jeep");
  3. o.sayName(); // "jeep"

      没错,就是你看到的那样。

      好了,今天关于OOP&JavaScript就写到这里,如果你已经感受到了巨大的兴趣,请继续关注明天的更新

,明天将会继续探讨构造函数的不足之处和原型模型。

希望能与你们一起前行。如有任何疑问均可留言,转载请注明出处,你们的支持将是我持久的动力!

  

Learn JavaScript(面向对象的程序设计01)的更多相关文章

  1. JavaScript 面向对象的程序设计(一)之理解对象属性

    首先,JavaScript 面向对象的程序设计,主要分三部分. 理解对象属性: 理解并创建对象: 理解继承. 本文主要从第一方面来阐述: 理解对象属性 首先我们来理解Javascript对象是什么?在 ...

  2. JavaScript 面向对象的程序设计

    面向对象(Object-oriented,OO)的语言有一个标志,那就是它们都有类的概念.而通过类可以创建任意多个具有相同属性和方法的对象.前面提到过,ECMAScript中没有类的概念,因此它的对象 ...

  3. 重学js之JavaScript 面向对象的程序设计(创建对象)

    注意: 本文章为 <重学js之JavaScript高级程序设计>系列第五章[JavaScript引用类型]. 关于<重学js之JavaScript高级程序设计>是重新回顾js基 ...

  4. javascript面向对象的写法01

    类和对象 其他面向对象的语言类的语法是内置的,自然而然的事.javascript中有对象,但没有类的语法,类的实现需要模拟出来. 只需要把对象想成一个容器,里面存放一些属性或方法,把类想象成一个对象的 ...

  5. JavaScript面向对象的程序设计

    ECMAScript支持面对对象(oo)编程,但不使用类或接口.对象可以在代码执行过程中创建和增强,因此具有动态性而非严格定义的实体.在没有类的情况下,可以此采用下列模式创建对象. 工厂模式,使用简单 ...

  6. javascript面向对象的程序设计之Object.getOwnPropertyDescriptor()

    Object.getOwnPropertyDescriptor()用于获取给定属性的描述信息,这个描述信息是一个对象. 如果是访问器属性,则这个对象的属性有configurable,enumerabl ...

  7. JavaScript面向对象程序设计:数组

    或许你会奇怪,面向对象的程序设计为什么从数组开始讲起?这是因为……其间的种种关系吧……嘿嘿,这里先卖个关子,先来看看我们熟悉的数组在JavaScript里面是什么样子的.   1. 创建数组   在J ...

  8. JavaScript 面向对象程序设计(下)——继承与多态 【转】

    JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...

  9. JavaScript高级程序设计学习笔记--面向对象的程序设计(二)-- 继承

    相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...

随机推荐

  1. Windows下图文详解PHP三种运行方式(php_mod、cgi、fastcgi)

    PHP能不能成功的在Apache服务器上运行,就看我们如何去配置PHP的运行方式.PHP运行目前为止主要有三种方式: a.以模块加载的方式运行,初学者可能不容易理解,其实就是将PHP集成到Apache ...

  2. window共享linux下的文件 samba

    1.在Ubuntu上安装samba服务 sudo apt-get install samba 2.修改配置文件vim /etc/samba/smb.conf [xubu] (共享名) guest ac ...

  3. CentOS7下安装和使用Xdebug

    wget http://xdebug.org/files/xdebug-2.4.0rc4.tgztar xvzf xdebug-2.4.0rc4.tgzcd xdebug-2.4.0RC4phpize ...

  4. 数据库模型设计PowerDesigner

    Power Designer 是Sybase公司的CASE工具集,使用它可以方便地对管理信息系统进行分析设计,他几乎包括了数据库模型设计的全过程.利用Power Designer可以制作数据流程图.概 ...

  5. win7 去快捷箭头

    去掉快捷方式箭头.reg   Windows Registry Editor Version 5.00   [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows ...

  6. linux编程问题记录

    1.程序中需要用到字符串的时候,尽可能选择string类型,这种类型的字符串有很多比较容易的功能,如字符串之间可以直接拷贝赋值 string a; string b="123"; ...

  7. PHP-----练习-------租房子-----增删改查,多条件查询

    练习-------租房子-----增删改查,多条件 一 .题目要求: 二 .做法: [1]建立数据库 [2]封装类文件------DBDA.class.php <?php class DBDA ...

  8. 《C#高级编程(第六版)》泛型学习笔记(一):泛型优点和特性 (转载)

    原文出处:http://www.cnblogs.com/xun126/archive/2011/01/13/1933838.html 泛型是CLR 2.0的一个新特性,在CLR 1.0中,要创建一个灵 ...

  9. Power BI for Office 365(二)Power Query

    在上一篇中我们看到了Power BI在移动端的支持,从这一篇起降依次介绍Power BI中的各个功能组件,此篇讲通过一个故事来介绍如何在Power Query中获取并且组织数据. 在这个系列中,我们将 ...

  10. bootstrap 20161012

    栅格系统 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="u ...