【前端】-026-JavaScript-进阶篇-面向对象编程

原型

1. 原型的概念

• 类和引用
  • 面向对象语言有类的概念，通过类可以创建任意个具有相同属性和方法的对象；
  • JavaScript中没有类的概念，引用类型是一种数据结构，将数据和功能组织在一起，对象是引用类型的实例。
• 构造对象的区别
  • 类构造对象的过程，类是抽象的，由类构造对象是从抽象类到具体化对象的过程
  • 在JavaScript中通过使用原型模拟类生成对象的过程，原型构造对象，从具体对象到另一个具体对象，即用现有的对象为原型构建新的对象

2. 如何用原型对象构建新的对象

• Object.create(proto) 方法
  • 以proto对象作为参数，返回新对象
  • 新创建的对象，共享proto上的属性和方法
  • JS中对象的传递按共享传递
• 构造函数方法
  • function Constructor(…){…}，使用new关键字创建对象
  • 使用prototype属性设置原型对象，新创建的对象，共享proto上的属性和方法
  • 构造函数创建对象的过程：
    a. 创建新对象newObject
    b. 设置新对象的_proto_属性，指向prototype原型对象，完成原型链指向
    c. 执行原型对象的方法和属性初始化新对象，即Object.apply(newObject, arguments)

3. 原型链

   • _proto_属性构成的指针链表

   • 属性的访问，优先在对象本身查找，如果没有找到会遍历原型链查找

   • 属性的修改和删除，只能修改和删除对象本身的属性，没有则创建相关属性，不会修改

   • 示例：
     //使用构造函数的prototype属性创建对象
     function Car(logo){
     this.logo = logo || "Unknown_Name";
     }
     Car.prototype = {
     start: function () {
     console.log("%s start!", this.logo);
     },
     run: function(){
     console.log('%s running!', this.logo);
     },
     stop: function(){
     console.log('%s stop!', this.logo);
     }
     }
     function LandRover(serialNO){
     this.serialNO = serialNO;
     }
     LandRover.prototype = new Car("LandRover");

     var landrover1 = new LandRover(1001);
     var landrover2 = new LandRover(1002);
     

protochain

4. 其他
   • 引用（对象）的_proto_属性，私有属性，不允许被修改，指向一个对象，即创建该对象的原型
   • 函数的prototype属性，指向一个对象，这个对象包含实例共享的属性和方法，称为原型对象

• constructor属性，查看引用（对象）的构造函数
• hasOwnProperty(attributeName)，查看属性是否是当前对象自身的属性

面向对象编程

1. 封装——信息的隐藏，可使用闭包函数

• _开始的属性，表示私有属性

• _开始的方法，表示protected方法

• 没有下划线开头的方法，表示public方法
  // 模拟 private 的属性
  function ClassName(){
  var _property = '';
  this.getProperty = function(){
  return _property;
  };
  }

    // 模拟 protected 属性，使用人为约束规则
    var pro = ClassName.prototype;
    pro._protectedMethod = function(){...};
    pro.publicMethod = function(){...};
  

2. 继承

• 组合继承，通过原型链和借用构造函数两种方式，保证每个实例都有自己的属性，还是保证只使用构造函数模式来定义类型。
  function ClassA() {
  ClassA.classMethod = function(){};
  ClassA.prototype.api = function(){};

      function ClassB() {
        ClassA.apply(this, argument);
      }
      ClassB.prototype = new ClassA();
      ClassB.prototype.constructor = ClassB;
      ClassB.prototype.api = function(){
        ClassA.prototype.api.apply(this, arguments);
      }
    }
  
    // ClassA 为父类
    // ClassB 为子类
  
    var b = new ClassB();
    b.api();
  

组合继承

• 原型继承，通过Object.create()方法创建对象，本质是对给定对象执行浅复制
  var proto = {
  action1: function(){},
  action2: function(){}
  }

    var obj = Object.create(proto);
  

---

参考资料：

1. JavaScript高级程序设计（第3版）
2. 面向对象 · 前端开发笔记本