• 面向对象的 Javascript (声明篇)


    有时间重新审视了遍 Javascript 的面向对象机制。与其他的语言不同,Javascript 可以说提供了更灵活的面向对象机制(比如 function 在完成其自身功能的同时也是对象)。

    由于才疏学浅,我不得不将 《Javascript 高级程序设计》 中的部分内容摘抄过来,这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要,而且内容非常的繁多,在这里就分篇章逐个介绍。

    使用对象首先就是声明它(内置的对象当然就不需要了)。该死的 Javascript 总是会让我们死去很多的脑细胞,这篇文章主要说明下声明 Javascript 类的几种方法。

    工厂模式

    工厂模式可能是很多开发人员使用的一种模式,简单的说这种方法先定义「地基」,然后在往上面扔(绑定)各种功能和属性。下面的代码可能看起来会非常的熟悉:

    var oCar = new Object; oCar.color = "red"; oCar.showColor = function() {     alert(this.color); } oCar.showColor();

    当然,既然包装成一个类,就要重用它(上面的方法从语法上说仅仅是变量)。可以使用返回特定对象的工厂函数(factory function)将其封装起来:

    function createCar() {     var oCar = new Object;     oCar.color = "red";     oCar.showColor = function() {         alert(this.color);     }      return oCar; } oCar = createCar(); oCar.showColor();

    当然,变通一下,可以在 createCar 函数上加入些参数,这样看起来已经非常地专业了:

    function createCar(sColor) {     var oCar = new Object;     oCar.color = sColor;     oCar.showColor = function() {         alert(this.color);     }      return oCar; } oCar = createCar(); oCar.showColor();

    匿名函数总是让人感觉非常的高深,但是有时候也会迷惑了自己。如果不考虑篇幅,可以外部定义它:

    function showColor() {     alert(this.color); }  function createCar(sColor) {     var oCar = new Object;     oCar.color = sColor;     oCar.showColor = showColor;      return oCar; } oCar = createCar(); oCar.showColor();

    这样做还有一个好处,就是不用重复定义 oCar.showColor 了(高效率的程序每个人都喜欢)。

    构造函数模式

    构造函数其实和工厂方式差不多。从代码量上来说,就是省略了构造函数内部没有创建一个对象。

    function Car(sColor) {     this.color = sColor;     this.showColor = function () {         alert(this.color);     } } oCar = new Car("red"); oCar.showColor();

    其实此隐含的对象已经在 new 以后就被实例化了。默认情况下,构造函数返回的就是其 this 的值(所以不必使用 return 返回)。但构造函数模式和工厂模式一样可能会重复定义方法,这点可以参考上述工厂模式的做法避免它(始终看起来不完美)。

    原型模式

    已经受够重复定义的问题了,那么有没有完美的解决办法呢?当然有。使用原型方法可以有效的避免此类的问题。

    function Car() {} Car.prototype.color = new Array("red", "green", "blue"); Car.prototype.showColor = function() {     alert(this.color); } oCar = new Car(); oCar.showColor();

    但是使用此模式需要注意的是类中的所有属性和方法都是共用的(其实就是指针)。这意味着虽然被实例化的两个变量,如果其中一处的值被更改,那么另外一个就也会被更改。

    注:此段内容有更改,详细请参见 这里这里 (感谢 fish 兄弟提出)。

    混合模式

    看起来越来越完美了,结合上述学到的方法就很容易解决原型模式的问题,这样看起来就更像是专业的程序员了。

    function Car(sColor) {     this.color = sColor; } Car.prototype.showColor = function() {     alert(this.color); } oCar = new Car("red"); oCar.showColor();

    上述的方法声明的类, showColor 方法是原型(仅创建了一个实例),其他的都是构造(互不干扰)。

    动态原型模式

    把自己的方法仍在外面总不是件非常环保的事情,下面的方法就非常的「绿色」:

    function Car() {     this.color = "red";     if (typeof Car._initialized == "undefined") {         Car.prototype.showColor = function() {             alert(this.color);         };         Car._initialized = true;     } } oCar = new Car("red"); oCar.showColor();

    此方法于上述的混合模式效果一致,即在构造函数内定义属性,而方法则使用原型模式。唯一的区别就是赋予对象方法的位置。

    混合工厂模式

    混合工厂模式可以认为是构造模式与混合模式的整合,因为 function 本身就是一个对象,所以可以使用 new 来实例化(请允许我这样描述)。

    function Car() {     var oCar = new Object;     oCar.color = "red";     oCar.showColor = function() {         alert(this.color);     }      return oCar; } oCar = new Car(); oCar.showColor();

    不过建议避免使用此方法定义,因为于上述的工厂模式一样,它存在重复声明的问题。

    选用何种模式?

    其实通过上面的描述已经有所结果,通常使用的是 混合模式 与 动态原型模式 (我个人投动态原型模式一票)。不过不要单独使用 工厂模式 与 构造模式 (或者其两者的结合体),因为这样会造成不必要的浪费。

    附,上述的代码 打包下载

    转载:

    http://www.gracecode.com/archives/934/

  • 相关阅读:
    day01
    ASP.NET 最全的POST提交数据和接收数据 —— (1) 用url传参方式
    Quartz.NET 入门,带C#实例
    asp.net 后台注册(调用)JS
    DataSet和List 泛型之间互相转换 (转载)
    .NET异步编程总结----四种实现模式
    VS2013 “未找到与约束 ContractName Microsoft.Internal.VisualStudio.PlatformUI.ISolutionAttachedCollectionService RequiredTypeIdentity Microsoft.Internal.VisualStudio.PlatformUI.ISolutionAttachedCollectionService 匹配的导出”
    Sql Server 删除所有表、视图、存储过程
    GPS定位,根据经纬度查询附近地点的经纬度-sql方法实现
    GPS定位,经纬度附近地点查询–C#实现方法
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/2334786.html
Copyright © 2020-2023  润新知