第五周第三天笔记之面向对象

1. 面向对象

• 对象两大特征：属性和方法；
• 面向对象（oop,oo）思想：
  • 封装：对于同一个功能，只需要封装一次，以后再使用的时候，只需要调用即可，无需重写；这种叫做低耦合高内聚；
  • 继承：子类可以继承父类的属性和方法；
  • 多态：重载和重写；
    • 重载：JS上没有严格意义上的重载；但有类似重载的功能，就是传不同的参数，有不同的返回值；
    • 重写：子类可以重写父类的属性和方法；

2. 面向对象的设计模式：

• 列举四种常见的设计模式：
  • 单例模式
  • 工厂模式
  • 构造函数模式
  • 构造函数原型模式（原型模式）

2.1单例模式

• 把同一个对象上的属性和方法，都放在同一个内存空间中，给这个内存空间起个名字，这个名字就叫做命名空间；
• 单例模式的本质：普通对象；建立多个对象，添加属性和方法；
• 模块化开发：对于一个复杂的大项目，可以分配给不同的工程师同步进行开发；等项目完成的时候，合并即可；
  • 各个模块之间的相互调用：对象名.属性名；
  • 本模块之间的相互调用：this.属性名

  <script>
      var person1={
          name:"zhangsan",
          age:26
      };
      var person2={
          name:"lisi",
          age:person1.age,//不同对象之间的调用，用对象名.属性名获取属性值；
          introduce:function () {
              console.log("我的名字是"+this.name);//本对象中的调用，用this.属性名获取属性值；
          }
      };
      console.log(person2.age);
      person2.introduce();//加()进行函数执行；
  </script>
  

2.2 工厂模式

• 工厂模式，分三步：1）创建对象 2）给对象添加属性和方法 3）返回对象；
  • 实质：创建一个新的函数，添加形参，当调用函数的时候，传入实参，获得一个对象；
  • 缺点：每调用一次函数，都会形成一个新的堆地址，内存容量会很大；

<script>
    function person(name,age){
        //1.引进原材料
        var obj=new Object();//实例型创建对象；var obj={};为字面量型创建对象；
        //2.加工原材料
        obj.name=name;
        obj.age=age;//给对象添加属性名及属性值；
        obj.showName=function () {//将函数定义的地址赋给showName；
            console.log("我的名字是"+this.name);
        };//添加一个方法；
        //3.输出原材料
        return obj;
    }
    var person1=person("1111",18);//调用函数，传入实参；生成一个对象；
    var person2=person("2222",19);
    console.log(person1.showName===person2.showName);//判断两个对象在定义函数时的地址是否相同；结果为false;
</script>

2.3 构造函数模式

• 工厂模式转化为构建函数模式的步骤：
  1. 函数名首字母大写，形成类函数；
  2. 函数定义中删除创建空对象步骤，和返回对象步骤，默认进行这两步；添加属性及方法步骤中，obj变成this
  3. 调用函数时，添加new 函数名(实参);
• 工厂模式和构造函数模式的区别：
  1. 在调用的时候：
     • 工厂模式：person();
     • 构造函数模式：new Person();是一个类；
  2. 在函数体内：
     • 工厂模式三步：1）创建对象 2）对象添加属性和方法 3）返回对象；
     • 构造函数模式只有一步：对象添加属性和方法，第一步和第三步系统默认做了，系统提供了一个对象叫做this；
• 构造函数模式
  1. 构造函数首字母一定大写；
  2. 构造函数中放的都是私有的属性和方法；
  3. 原型上放的都是共有的属性和方法；
  4. 系统默认会创建一个对象，this;
  5. 系统默认会返回一个对象，this;
  6. 构造函数中的this，指向当前这个实例；（构造函数new给谁，this就指向谁）；
  7. 构造函数中存放的都是私有的属性和方法；
  8. 构造函数是函数的定义阶段，里面的代码被作为字符串存在堆内存地址中；
  9. 原型是个对象，里面存在都是共有的属性和方法；
  10. var f=new Fn():实例创建一定是对象，是对构造函数的调用；

 function Person(name,age){//函数名首字母大写；
        /* //1.引进原材料
         var obj=new Object();//实例型创建对象；*/
         //2.加工原材料
         this.name=name;
         this.age=age;
         this.showName=function () {//将函数定义的地址赋给showName；
             console.log("我的名字是"+this.name);
         };//添加一个方法；
        /* //3.输出原材料
         return obj;*/
     }
     var person1=new Person("1111",18);//调用函数时，要添加new 函数名（实参）；
     var person2=new Person("2222",19);
     console.log(person1.name);
     console.log(person2.showName());//此时打印结果为undefined，因为函数没有返回值；
     console.log(person1.showName===person2.showName);//判断两个对象在定义函数时的地址是否相同；结果为false; 

2.4 构造函数原型模式（原型模式）

• 构造函数原型模式：在构造函数的基础上，创建一个公共的地址，每次调用函数时，不会创建更多的堆地址；
• 以下实例中：添加公共属性prototype

 <script>
     function Person(name,age){
         this.name=name;
         this.age=age;
     }
     Person.prototype.showName=function () {
         console.log("我的名字是"+this.name);
     };//添加公共地址，引用时全部调用此地址；
     var person1=new Person("1111",18);//调用函数时，要添加new 函数名（实参）；
     var person2=new Person("2222",19);
     console.log(person1.name);
     console.log(person2.showName());//此时打印结果为undefined，因为函数没有返回值；
     console.log(person1.showName===person2.showName);//判断两个对象在定义函数时的地址是否相同；结果为true;
 </script>

• 四种模式的区别：
  • 单例模式：每个对象的属性名，方法，全部定义一遍，非常麻烦；
  • 工厂模式：同样的东西写一遍就行；创建一个函数，传入实参获得不同的对象，缺点：每调用一次函数，函数中的showName属性都会形成一个新的堆地址，内存容量会很大；
  • 构造函数模式：将工厂模式中的函数精简，函数首字母大写，变成类函数，用实例型创建，即添加new 函数名(形参)；缺点：跟工厂模式相同，会形成很多的地址；
  • 构造函数原型模式（原型模式）：在构造函数基础上添加公共地址，prototype;避免创建更多的堆地址；

2.5 面向对象的结果

• 面向对象的结果：就是创建一个类似于new Array()的数组类函数，里面有属性和原型模式，原型模式里面添加的是方法；
• 数组类new Array()分析：
  • 代码：

  <script>
      var ary1=new Array(100,200);
      var ary2=new Array(300,400);
      ary1.push();//指的是ary1对象上的方法，即在ary1对象私有属性"_ _photo_ _"上不存在push()方法，要去它所属类Array上的prototype对象中寻找，得到push()方法；
      console.dir(ary1);//dir打印变量身上的属性和方法；
      console.dir(ary2);
      console.log(ary1.constructor);//打印的是Array类，用于查找ary1属于哪个类函数；
  </script>
  

  数组分析图1
  
  
  数组分析图2
  • 数组类分析：
    1. 类函数Array
       • Array为一个类函数，包含基本属性和prototype属性；
       • 基本属性：
         • 属性名为从0开始递增，通过new Array()中括号里传入实参，来进行赋值；
         • 还有一个length属性，属性名为数组长度；
       • prototype为一个对象，所以新建一个堆地址，里面存放键值对；然后将地址作为属性值赋给prototype；
         • 在prototype堆地址中，有一组键值对，其中属性名为constructor,对应的属性值为当前所属类；
         • 在prototype堆地址中，还有许多键值对，也可称为方法；如push(),pop()等，
           • 方法的存在方式是键值对，属性名为push;对应的属性值为function(){};
           • 使用方法时，代码ary.push()的意思是()()；即调用函数执行；
       • 类函数的实质：创建一个函数，返回一个对象；
    2. 对象
       • 代码 var ary1= new Array(100,200);含义：类函数Array调用，传入实参100和200，执行完成后返回一个对象，赋给ary1;
       • 调用函数时创建一个私有作用域，其中ary1对象中存在四组键值对
         • 基本属性三组：分别是0:100,1:200,length:2
         • 第三组键值对:属性名为：_ _proto_ _；属性值为：指向当前对象所属类（Array）的原型(prototype);
       • 通过ary1.constructor找到ary1所属的类函数；
  • 模拟数组函数

  <script>
      function Ary() {
          //基本属性的设置
          for(var i=0;i<arguments.length; i++){
              this[i]=arguments[i];
          }
          this.length=arguments.length;
      }
        //在公共地址中添加方法
      Ary.prototype.push1=function (news) {
          var num=this.length;//获元素长度
          this[num]=news;//给对象添加属性num，给其赋值为news;
          this.length=num+1;//设置函数内的length属性，使其属性值加1；
          return this.length;//返回值，为新数组的长度
      };
      var ary111=new Ary(100,200,300,40,5,6);
      /*console.dir(ary111);*/
      var newscount=ary111.push1(30);//此时返回值为新数组的长度
      console.dir(ary111);
      console.log(newscount);
  </script>
  

  模拟数组函数分析图
• 构造函数原型模式原型图
  • 代码：

    <script>
        function Fn(){
            this.x=100;
            this.y=200;
        }
        Fn.prototype.showX=function () {
            alert("我是x"+this.x);
        };
        var f1=new Fn();//实例一定是对象，实例是对函数的调用；
        f1.showX();//调用公共地址中的showX的属性值，然后函数执行；
    </script>
    

  原型图
• 原型模式基础：
  1. 每个类函数数据类型，都有一个属性，叫做prototype,其中prototype是个对象，指向一个堆地址空间；
  2. prototype这个对象的堆地址空间中，存放的是键值对，其中，天生自带一个属性，叫做constructor，它的属性值指向当前所属类；
  3. 每个对象身上，都有一个属性，叫做_ proto _，它的属性值指向当前实例所属类的原型，即prototype对象Object;
• 原型链：指的是_ _proto_ _
  • 如果要查找—对象.属性名 比如f1.showX;
    1. 先在自己的私有作用域中查找；如果找到，那么这个属性就是私有属性；
    2. 如果没找到，到当前实例所属类的原型上找（f1._ proto _），如果找到属于共有的属性或方法；
    3. 如果还没找到，继续通过_ proto _往上找，一直找到Object.prototype上还没有的话，返回undefined;
       • 注意：变量不存在则找不到会报错，而变量已声明但未定义返回undefined，属性找不到会返回undefined;
• 要形成的几个条件反射：
  • 看到构造函数——存的是私有的属性和方法；
  • 看到prototype——存的都是共有的属性和方法；
  • _ proto _原型链；
• 数组对象中的私有属性及所属类，以及所属祖类
  
  数组对象的属性及方法
  
  
  数组对象的祖类