面向对象：工厂模式、构造函数模式、原型模式、构造函数和原型组合

佚名 6年前 (2019-05-10) 随笔 1935人围观抢沙发百度已收录

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script>
      //1.创建对象
      var person = new Object();
      person.name = '张三';
      person.age = 18;
      person.sayName = function() {
        console.log(this.name);
      }
      //字面量形式
      var person = {
        name: '张三',
        age: 18,
        sayName: function() {
          console.log(this.name);
        }
      }
      //2.工厂模式：可以解决创建多个对象的问题，不足：不知道一个对象的类型
      function createPerson(name, age) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.sayName = function() {
          console.log(this.name);
        }
        return o;
      }
      var person1 = createPerson('张三',18);
      var person2 = createPerson('李四',16);
      //3.构造函数：可以解决对象类型的问题，不足：方法共享问题即每个方法都要在每个实例上重新创建一遍。
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sayName = function() {
          console.log(this.name)
        }
      }
      var person1 = new Person('张三',18);
      var person2 = new Person('李四', 16);
      //4.原型模式：可以解决方法共享问题，不足：引用类型的数据改写一个实例所有实例跟着改写
      function Person() {};
      Person.prototype = {
        constructor: Person,
        name: '张三',
        age: 18,
        friends: ['王五', '赵六'],
        sayName: function() {
          console.log(this.name);
        }
      }
      var person1 = new Person();
      var person2 = new Person();
      person1.friends.push('李立')
      console.log(person1);
      console.log(person2);
      console.log(person1.friends == person2.friends);//true 注：要把其他的代码注释掉只剩原型模式才是true否则代码会受影响
      //4.构造函数+原型：构造函数定义实例属性，原型模式定义方法和共享的属性
      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.friends = ['王五','赵六']
      }
      Person.prototype = {
        constructor: Person,
        sayName: function() {
          console.log(this.name)
        }
      }
      var person1 = new Person('张三',18);
      var person2 = new Person('李四', 16);
      person1.friends.push('李立');
      console.log(person1.friends == person2.friends) //false;
    </script>
  </body>
</html>