Js面向对象

一、复习面向对象

面向对象的思维

1. 面向
2. 编程模式的发展
3. 对象的来源
4. 对象的优势
5. 面向对象的分析和设计
   • 分解小模块：分工
   • 按照模块之间的关系或执行顺序，相互协作
6. 面向对象编程

面向对象 的 晚餐

• 需求，一顿饭，3人量

1. 面向对象：OO
2. 面向对象的分析：OOA
   • 分解：要做什么菜
   • 高内聚
3. 面向对象的设计：OOD
   • 模式识别和抽象：
     • 每道菜的做法，是否有规律可循
       • 如果有规律，可以封装
     • 每个模块之间的关系
       • 功能排序
   • 低耦合
4. 面向对象的编程：OOP
   • 开发和执行：动手做，细节实现部分
5. 评估评价
   • 总结，复盘，考虑代码的性能和合理性，下次做出改进

• 思考 -> 利用创建对象的语法，搭建结构(高内聚和低耦合) -> 完善每一个模块
  • 内聚：一个对象的每个功能模块，都从属于当前对象
  • 耦合：模块与模块之间的调用关系

面向对象的语法

1. 面向对象思维的实现方式

2. 创建对象

   • …

3. 工厂模式创建对象

   • 自定义工厂模式，放弃，自己封装对象，返回对象

     function fn(n){
         var obj = {};
         obj.name = n;
         return obj;
     }
     var o = fn("admin");
     

   • 内置的工厂模式(自定义的构造函数)，推荐，new执行函数

     function Fn(n){
         // 自动创建的对象：通过this拿到
         this.name = n;
     }
     var o = new Fn("root");
     

4. 构造函数的缺陷

   function Fn(n){
       // 自动创建的对象：通过this拿到
       this.name = n;
       this.show = function(){
           console.log(this.name)
       }
   }
   var o1 = new Fn("admin");
   var o2 = new Fn("root");
   console.log(o1.show === o2.show);       // f
   

   • 以上代码，会在内存中产生大量的冗余功能(show)
   • 解决方式：不把show写给每个具体的对象(实例)，写给父级数据
     • 有技术短板
       • 学习原型

5. 原型

   • 原型是一种概念

     • 在js中所有的对象（O），都一个内置属性：__proto__
       • 是个指针，用来指向当前对象（O）的父级数据，必然是对象
     • 在除了箭头函数之外的任何函数（F）身上，都有一个默认属性：prototype
       • 是个对象类型的属性，用来作为当前函数（F）被new执行后，创建出来的对象，做父级对象使用
       • 被new创建出来的对象的__proto__，被强行指向了new的函数的prototype

   • 对象读取属性的原则

     • 向上查找：顺着自身的__proto__属性，查找，找到了就使用，没找到，继续向上，到头还没找到，就抛出undefined，相当于报错

   • 目前，就可以解决，之前方法冗余的问题：

     function Fn(n){
         // 自动创建的对象：通过this拿到
         this.name = n;
     }
     Fn.prototype.show = function(){
         console.log(this.name)
         // this=======实例
         var that = this;
         obox.onclick = function(){
             // this======当前函数的执行对象obox
             // that======实例
         }
     }
     var o1 = new Fn("admin");
     var o2 = new Fn("root");
     console.log(o1.show === o2.show);       // t
     

   • 小提示：

     • 在构造函数中的this，原型上方法中的this，都是将来的实例
     • 如果在构造函数或原型上方法中，出现了新的函数，注意其内部this指向的改变

6. 应用技巧

   • 并不是熟练了语法，就会面向对象编程
   • 但是如果this不熟练，不清楚this的指向，必然做不了面向对象编程
   • 当然，必须得先有面向对象的思维方式
   • 面向对象三大特点之一：封装
     • 封装：只要某个功能可以作为独立运行的模块，将来有可能被重复调用，就可以封装，封装成方法
   • 属性写在构造函数内，方法写在原型上

ES6新增的class语法

class Tab{
    constructor(n){
        // 相当于老语法的构造函数部分
        this.name = n;
    }
    // 以下方法都 相当于 被绑定到构造函数的原型对象上
    show(){
        console.log(this.name)
    }
}
var t = new Tab("root");
console.log(t)
t.show();