js 高级 （面向对象高级）

对象创建模式

Object构造函数模式

方式一：Object构造函数模式

套路：先创建Object对象，再动态添加属性/方法
适用场景：起始时不确定对象内部数据
问题：语句太多

/*
        一个人:name:"Tom",age: 12
        */
      var p = new Object();

      
      p.name = "Tom";
      p.age = 12;
      p.setName = function (name) {
        this.name = name;
      };

      // 测试
      p.setName('康熙');
      console.log(p.name,p.age);

方式二：对象字面量

套路：适用{}创建对象，同时指定属性/方法
适用场景：起始时对象内部数据是确定的
问题：如果创建多个人对象，有重复代码

var p = {
            name: 'Tom',
            age: 12,
            setName: function (name) {
                this.name = name;
            }
        }


        // 测试
        console.log(p.name,p.age);
        p.setName('康熙');
        console.log(p.name,p.age);

        var p2 = {  // 如果创建多个对象代码很重复
           name: 'Bob',
            age: 13,
            setName: function (name) {
                this.name = name;
            }
        }

方式三：工厂模式

套路：通过工厂函数动态创建对象并返回
适用场景：需要创建多个对象
问题：对象没有一个具体的类型，都是Object类型

function createPerson(name,age) {   // 返回一个对象的函数===>工厂函数
            var obj = {
                name: name,
                age: age,
                setName: function(name) {
                    this.name = name;
                }
            }
            return obj;
        }

        // 创建两个人
        var p1 = createPerson('Tom',12);
        var p2 = createPerson('Bob',13);

        // p1/p2是Object类型

        function createStudent(name,price) {
            var obj = {
                name:name,
                price:price
            }
            return obj;
        }
        var s = createPerson('张三',10000000);
        // s也是Object类型

方式四：自定义构造函数模式

套路：自定义构造函数，通过new创建对象
使用场景：需要创建多个类型确定的对象
问题：每个对象都有相同的数据，浪费内存

// 定义类型
        function Person(name,age) {
            this.name = name;
            this.age = age;
            this.setName = function(name) {
                this.name = name;
            }
        }
        var p1 = new Person('中国',5000);
        console.log(p1);
        console.log('国家：'+p1.name+'历史:'+p1.age);
        var p2 = new Person('王八',300);
        p2.setName('美国');
        console.log(p2);
        console.log('国家：'+p2.name+'历史:'+p2.age);
        console.log(p1 instanceof Person);

        function Student (name,price){
            this.name = name;
            this.price = price;
        }
        var s = new Student('Bob',13000);
        console.log(s instanceof Student);

        console.log(p1,p2);

方式五：构造函数+原型的组合模式

套路：自定义构造函数，属性在函数中初始化，方法添加到原型上
使用场景：需要创建多个类型确定的对象

function Person(name,age) {    // 在构造函数中只初始化一般函数
            this.name = name;
            this.age = age;
        }
        Person.prototype.setName = function (name) {
            this.name = name;
        }

        var p1 = new Person('Tom',23);
        var p2 = new Person('jack',24);

继承模式

方式一：原型链继承

方式1：原型链继承

1. 套路

1. 定义父类型构造函数
2. 给父类型的原型添加方法
3. 定义子类型的构造函数
4. 创建父类型的对象赋值给子类型的原型
5. 将子类型原型的构造属性设置为子类型
6. 给子类型的对象：可以调用父类型的方法

2. 关键

1. 子类型的原型为父类型的一个实例对象

// 父类型
      function Supper() {
        this.supProp = "父属性";
      }
      Supper.prototype.showSupperProp = function () {   // showSupperProp 让所有Supper的实例都被能看见
        console.log(this.supProp);
      };

      // 子类型
      function Sub() {
        this.subProp = "子属性" ;
      }

      // 子类型的原型为父类型的一个实例对象
      Sub.prototype = new Supper();
      // 让子类型的原型的constructor指向子类型
      Sub.prototype.constructor = Sub;
      Sub.prototype.showSubProp = function () {
        console.log(this.subProp);
      };

      var sub = new Sub();
      sub.showSupperProp();
    //   sub.toString(); 
      sub.showSubProp();

      console.log(sub.constructor); // constructor 输出sub的构造函数

方式二：借用构造函数继承(假的)

1. 套路：

1. 定义父类型构造函数
2. 定义子类型构造函数
3. 在子类型构造函数中调用父类型构造

2. 关键：

1. 在子类型构造函数中通用call()调用父类型构造函数

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

      function Student(name, age, price) {
        Person.call(this, name, age); // 相当于： this.Person(name,aeg)
        this.price = price;
      }

        var s = new Student('Tom',20,14000);
      console.log(s.name, s.age, s.price);

方式三：组合继承

1. 利用原型链实现对父类型对象的方法继承
2. 利用super()借用父类型构建函数初始化相同属性

function Person(name, age) {
        this.name = name;
        this.age = age;
      }
      Person.prototype.setName = function (name) {
        this.name = name;
      };

      function Student(name, age, price) {
        Person.call(this, name, age); // 得到属性   // call() 让函数成为对象的方法调用
        this.price = price;
      }

      Student.prototype = new Person(); // 为了能看到父类型的方法
      Student.prototype.constructor = Student; // 修正constrictor属性

      Student.prototype.setPrice = function (price) {
        this.price = price;
      };

      var s = new Student("Tom", 24, 150000);
      s.setName("Bob");
      s.setPrice(160000000);
      console.log(s.name, s.age, s.price);