js-面向对象

面向对象

• 面向对象 ： 思维方式 ，编程方式

  • 面向过程 ： 注重事物发展的过程 ，一步一步执行
  • 面向对象 ：分析事物中的对象 ，分析 属性和方法 ---》抽离成类 （复用性）---》研究类之间的逻辑关系

• js里的对象

  • 如何创建对象

    • 字面量
    • 内置构造函数

• 模拟类概念

  • 工厂模式 :类的概念 ，工厂可以生产很多个对象

      function Factory(){
          let obj = {};
          obj.name = name;
          return obj;
      }
  

  • 工厂模式有缺陷

    • 指代不明
    • 没有 公共空间 ，性能不好

  • 构造函数

    • new 的作用

      • 可以执行函数
      • 创建一个对象
      • 把函数里的this绑在这个对象上
      • 隐式的返还这个对象

    • 通过new 来简化工厂模式

        function Person(name,age){
            this.name = name;
            this.age = age;
        }
    
        var zhangsan  = new Person();
    

    • 构造函数 模拟类的概念

      • 指代问题

        • zhangsan.constructor===Person;

      • 公共空间

        • 原型 prototype 是一个公共空间
        • 一般在构造函数里 会把属性放在构造函数 把方法放在原型上

            function Person(){
                this.name = name;
            }
            Person.prototype.fn = function(){
                console.log("fn");
            }
           // Person.prototype.age = 20;
            let zhangsan = new Person();
        

prototype 原型

• 每个对象都会有自身和原型构成

  • 实例化前 ---> 构造函数 和prototype （显示原型）

    • 有一个固有属性 constructor 指回构造函数 （判断类型）
    • prototype 的赋值问题
      • 追加赋值

          var obj = {
              name:"李四"
          }
          var obj = {  // 覆盖式的赋值
              height:"178"
          }
          obj.height = "178cm"; // 追加 在原来的对象上追加属性
      

  • 实例化后 -->对象

    • 对象的属性 和 对象的原型 （[[prototype]],proto）; 隐式原型

          obj.__proto__===构造函数.prototype  // true
      

    • getPrototypeOf ：获取对象的隐式原型
    • setPrototypeOf :设置对象的隐式原型

  • 创建原型属性和方法 ： Object.create({});

  • 原型是一个对象

  • 原型链 ： 由于 原型本身是一个对象 Object.prototype

    • 对象的属性和方法的查找规则
      • 首先会在自身查找 然后再在原型上查找 原型链上查找 ，最终会找到undefined

  • for in 会循环原型链

    • hasOwnPrototype ： 判断一个属性是否是自身属性

  • constructor ：判断类型

  • instanceof : 查找对象在原型链上是否有构造关系

  • 扩充复杂数据类型方法

      Array.prototype.fn = function(){  // 所有的数组 都会拥有这个fn方法
          console.log(this);// 哪个数组调用了 fn函数
      }
      var arr = [1,2,3];
  

ES6的类

• 怎么写 ? class

class Person{
    constructor(name){
        this.name = name;
    }
    fn(){
        console.log("fn")
    }
}
let zhangsan = new Person("张三");

• 静态成员 ：只和类有关系 和对象没有关系的属性和方法

  • static 声明

  //ES6 静态成员
      class Person{
          static num = 10;
      }
      Person.num;
  // ES5 构造函数
  function Person(){
  
  }
  Person.num = 10;  // 定义静态成员
  

• 私有属性 自身可以调用 外部（实例化之后）不能调用

  • '#'

      class Person{
          #name = "张三";
      }
      // 共有方法调取私有属性