zoukankan      html  css  js  c++  java
  • js设计模式精讲系列

    很久没逛园子了,忙于工作,闲话少说,进入正题。

    1:构造模式(Constructor Pattern)

    先讲下js对象的3中创建方式:

    var newObj = {};
    
    var newObj = Object.create(null);
    
    var newObj = new Object();

    常用的是第一种和第三种。

    接着讲下给对象添加属性和方法的四种方法:

    1.Dot语法 即通过“.”点号添加
    给对象添加属性和值
    newObj.someKey ="Hello javascript! i love u";
    获取属性值
    var key = newObj.someKey;
    2.方括号语法
    newObj["someKey"] = "this is the second method!";
    var key = newObj["someKey"];
    这两种是比较普遍的做法,ECMAScript3 编译通过
    3.Object.defineProperty
    Object.defineProperty(newObj,"someKey",{
          value:"好处在于可以对属性做更多的行为动作",
           writeable:true,
           enumerable:true,
           configurable:true
    });
    一种更通俗易懂的简单写法
    var defineProp = function ( obj, key, value ){
      config.value = value;
      Object.defineProperty( obj, key, config );
    };
    使用这种方式,我们创建一个空person 对象
    var person = Object.create(null);
    defineProp(person,"car","BMW");
    defineProp(person,"dateOfBirth","1988");
    defineProp(person,"hasbeard",true);
    等等
    4.Object.defineProperties
    如果说刚才只能设置一个属性,这个可以设置多个属性,请看下面
    Object.defineProperty(newObj,{
          "someKey":{
                 value:"这是一些属性",
                 writeable:true},
           "anotherKey":{
                 value:"这是另外一 些属性",
                 writeable:true}
    });
    说明:3,4在ECMAScript5下编译通过
    可以用1或2的方式获取3或4属性或者方法,改成方法例子把 value:function(args){} 即可

    使用这些方法能够用来继承,我们来做个小实验,看如下代码:

    创建一个赛车手,继承上面的person对象
    var driver = Object.create(person);
    添加一些新的属性或方法
    defineProp(driver,"topSpeed","100mph");
    我们输出日志看下是否继承了person的属性
    console.log(driver.dateOfBirth);
    //output:1988
    在重新获取新设置的属性
    console.log(driver.topSpeed);
    //output:100mph

    上面这些例子也告诉我们Js 没有class的概念,但是支持Object特殊的构造函数,通过简单地加前缀使用关键字“new”调用构造函数,我们可以告诉JavaScript我们希望用函数来表现得像一个构造函数、实例化一个新的对象与成员定义的函数。

    简单的介绍后,我们来看基本的构造器模式的写法,如下:

    function Car( model, year, miles ) {
    
      this.model = model;
      this.year = year;
      this.miles = miles;
    
    }
    //注意这里我们使用obj.protorype.newMethod 而不是Object.prototype是为了避免重定义原型对象
    Car.prototype.toString = function () {
      return this.model + " has done " + this.miles + " miles";
    };
    
    // 用法:
    
    var civic = new Car( "Honda Civic", 2009, 20000 );
    var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
    
    console.log( civic.toString() );
    console.log( mondeo.toString() );

    上面的ToString()的单实例,保证每台Car都能共用这个方法。这里就是一个简单的构造器模式。

    下章讲解:模块化模式

      

  • 相关阅读:
    MQ(二):ActiveMQ基础概念以及案例
    MQ(一):消息中间件开篇
    Nginx(三):Nginx基本概念以及用法
    Nginx(二):Nginx基本安装
    Nginx(一):Nginx初识
    配置中心(十)Config:环境搭建
    声明式服务调用(Feign)九:环境搭建
    服务监控(Hystrix Dashboard、Turbine)八:环境搭建
    服务保护机制(Hystrix)七:环境搭建
    客户端负载均衡(Ribbon)六:环境搭建
  • 原文地址:https://www.cnblogs.com/apsnet/p/2860519.html
Copyright © 2011-2022 走看看