温故而知新-2:对象与继承

1. JavaScript 创建对象的几种方式?

  1. 对象字面量、Object构造函数

    1
    2
    3
    4
    5
    6
    7
    // 对象字面量
    var obj = {};
    obj.gender = "女";
    obj["age"] = 18;

    // Object构造函数
    var obj2 = new Object();
  2. 构造函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=function(){
    alert(this.name);
    };
    }
    var person1 = new Person(...);
    var person2 = new Person(...);
  1. 纯构造函数
    1
     
  1. 空构造函数 + 原型
    1
     
  1. 混合构造函数 + 原型
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function Car(sColor,iDoors,iMpg) {
    this.color = sColor;
    this.doors = iDoors;
    this.mpg = iMpg;
    this.drivers = new Array("Mike","John");
    }
    Car.prototype.showColor = function() {
    alert(this.color);
    };
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);
  1. 动态原型

    动态原型模式将所有信息都封装在了构造函数中,初始化的时候,通过检测某个应该存在的方法时候有效,来决定是否需要初始化原型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Person(name, job) { 
    // 属性
    this.name = name;
    this.job = job;
    // 方法
    if(typeof this.sayName !== 'function') {
    Person.prototype.sayName = function() {
    console.log(this.name);
    }
    }
    }
    var person1 = new Person('Jiang', 'Student');
    person1.sayName();
  1. 寄生构造函数

    这种模式的基本思想就是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新建的对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function Person(name, job) { 
    var o = new Object()
    o.name = name;
    o.job = job;
    o.sayName = function() {
    console.log(this.name);
    }
    return o;
    }
    var person1 = new Person('Jiang', 'student');
    person1.sayName();
  1. Object.create() - ES5
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var child = Object.create(persons); //继承父类的属性
    child.name = 'jack';
    child.sex = 'nan';
    console.log(child);

    // 效果类似
    function extend(obj) {
    var result = {};
    for (var prop in obj) {
    result[prop] = obj[prop];
    }
    // 让result具有obj一样的构造函数
    result.constructor = obj.constructor;
    return result;
    }

2.JavaScript 如何实现继承?

  • 原型链继承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
       function Animal() {
    this.age = 20;
    }
    function Cat() {
    this.name = 'jacy';
    }
    Cat.prototype = new Animal();

    var cat = new Cat();
    cat.name; // "jacy"
    cat.age; // 20
  • 借用结构函数继承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
       function Animal() {
    this.age = 20;
    }
    function Cat() {
    Animal.call(this); // 让Cat所有对象借用Animal对象的构造函数
    this.name = 'jacy';
    }
    Cat.prototype = new Animal();

    var cat = new Cat();
    cat.name; // "jacy"
    cat.age; // 20
  • 原型 + 构造函数组合继承

  • 寄生式继承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 工厂模式创建对象
    function create(age, sex) {
    var obj = {};
    obj.age = age;
    obj.sex = sex;
    return obj;
    }
    // 寄生模式
    function Japanese(name, language) {
    this.name = name;
    this.language = language;
    }
    function createChinese(name, language) {
    var obj = {};
    Japanese.call(obj, name, language);
    return obj;
    }