zoukankan      html  css  js  c++  java
  • JS面向对象

    var clock={
      hour:12,
      minute:10,
      second:10,
      showTime:function(){
       alert(this.hour+":"+this.minute+":"+this.second);
      }
     }
     clock.showTime();//调用

    2.创建Object实例

     var clock = new Object();
     clock.hour=12;
     clock.minute=10;
     clock.showHour=function(){alert(clock.hour);};

     clock.showHour();//调用

    由此可见 属性是可以动态添加,修改的

    对象创建模式:

    1.工厂模式:就是一个函数,然后放入参数,返回对象,流水线工作

     function createClock(hour,minute,second){
      var clock = new Object();
       clock.hour=hour;
       clock.minute=minute;
       clock.second=second;
       clock.showHour=function(){
       alert(this.hour+":"+this.minute+":"+this.second);
      };
      return clock;
     };
     var newClock = createClock(12,12,12);//实例化
     newClock.showHour();//调用

    优点:总算优点抽象的概念了。但是不能识别对象的类型呢!

    2.构造函数模式

     function clock(hour,minute,second){
      this.hour = hour;
      this.minute = minute;
      this.second = second;
      this.showTime = function(){
       alert(this.hour+":"+this.minute+":"+this.second);
      }
     }
     var newClock =new  clock(12,12,12); 
     alert(newClock.hour);

     注意:这个new关键字是必须,如果不加,clock就不会当成构造函数调用,而只是一个普通的函数。同时,还会意外地给他的外部作用域即window添加属性,因为此时构造函数内部的this已经映射到了外部作用域了。所以为了安全起见,可以这样创建

     function clock(hour,minute,second){
      if(this instanceof clock){
       this.hour = hour;
       this.minute = minute;
       this.second = second;
       this.showTime = function(){
        alert(this.hour+":"+this.minute+":"+this.second);
       }
      }
      else{
       throw new Error("please add 'new' to make a instance");
      }
     }

    构造函数的缺点:由于this指针在对象实例的时候发生改变指向新的实例。这时新实例的方法也要重新创建,如果n个实例就要n次重建相同的方法。于是让我们来揭开原型模式吧

    3.原型模式

      function clock(hour,minute,second){
     }
     clock.prototype.hour=12;
     clock.prototype.minute=12;
     clock.prototype.second=12;
     clock.prototype.showTime=function(){
      alert(this.hour+":"+this.minute+":"+this.second);
     }
     var newClock = new clock();
     newClock.showTime();

    深度理解原型模型很重要,

    首先,每个函数都有一个prototype(原型)属性,这个指针指向的就是clock.prototype对象。而这个原型对象在默认的时候有一个属性constructor,指向clock,这个属性可读可写。而当我们在实例化一个对象的时候,实例newClock除了具有构造函数定义的属性和方法外(注意,只是构造函数中的),还有一个指向构造函数的原型的指针,ECMAScript管他叫[[prototype]],这样实例化对象的时候,原型对象的方法并没有在某个具体的实例中,因为原型没有被实例。(废话有点多,没有误导您吧。别晕)

    所以这种模式定义的对象,在调用方法的时候过程:调用newClock.showTime();先看实例中有没有,有调之,无追踪到原型,有调之,无出错,调用失败。

    当然可以这样写:

     function clock(hour,minute,second){
     }
     clock.prototype={
      constructor:clock,    //必须手动设置这个属性,不然就断了与构造函数的联系了。没有实例共享原型的意义了。
      hour:12,
      minute:12,
      second:12,
      showTime:function(){
       alert(this.hour+":"+this.minute+":"+this.second)
      }
     }
     var newClock = new clock();
     newClock.showTime();

     注意:实例与构造函数原型的联系也是通过指针来联系的,故可以动态添加修改原型的方法。

    这种纯原型的模式问题也很明显,所有的属性,方法都是共享的,不能让对象具体化。常常我们想每个对象有自己的属性。于是,结合前两种,产生新的模式

    4.构造-原型组合模式。

     function clock(hour,minute,second){
      this.hour = hour;
      this.minute = minute;
      this.second = second;
     }
     
     clock.prototype.showTime=function(){alert(this.hour+":"+this.minute+":"+this.second);}
     var newClock = new clock(12,12,12);
     newClock.showTime();

    function SuperType() { this.colors = ["red", "green", "blue"]; } function SubType() { //继承了SuperType SuperType.call(this); } var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //red,green,blue,black var instance2 = new SubType(); alert(instance2.colors); //red,green,blue

    复制代码

    通过call方法继承了SuperType。我们实际上是在新创建的SubType实例的环境下调用了SuperType构造函数。即执行了SuperType函数中定义的所有对象的初始化代码。

    如何给超类型构造函数传递参数:

    复制代码
        function SuperType(name) {
            this.name = name;
        }
    
        function SubType() {
            //继承了SuperType
            SuperType.call(this, "yangjinjin");
            this.age = 27;
        }
    
        var obj = new SubType();
    
        alert(obj.name); //yangjinjin
        alert(obj.age); //27
    复制代码

    以上代码,SuperType构造函数接受一个name参数,直接赋给this.name属性。在调用SubType构造函数内部调用SuperType构造函数时,实际上是为SubType的实例设置name属性。

    共用构造函数的问题:

    方法都在构造函数内部定义,函数的复用性就无从谈起了。在超类型的原型中定义的方法,对子类型而言是不可见的。考虑这些问题,借用构造函数也是很少单独使用。

  • 相关阅读:
    使用 Traefik 代理 UDP 服务
    KubeOperator界面,集群详情中的存储,存储提供商
    centos7使用yum方式安装node_exporter
    Traefik2.3.x 使用大全(更新版)
    jumpserver堡垒机版本升级,从2.14.2升级到2.16.3
    Traefik 2.0 实现灰度发布
    matplotlib 中文问题
    数据采集实战(五) 当当网童书排名
    雅可比行列式迭代及优化(golang版)
    mysql8.x docker 远程访问配置
  • 原文地址:https://www.cnblogs.com/sunbin123/p/7070562.html
Copyright © 2011-2022 走看看