JS系列总结笔记——4.JS继承

1.类式继承

// 父类
var SuperClass = function() {
    this.superValue = true;
}
// 子类
var SubClass = function() {
    this.subValue = false;
}

SubClass.prototype = new SuperClass();  // 原型指向父类的实例，即可继承父类的方法
SubClass.prototype.constructor = SubClass;  // 将构造函数指向本身

缺点：

• 子类对象可以改变父类对象的共有属性（这里一般说引用类型，值类型也可更改，需要通过proto,有些浏览器不允许这么做）；
  例如：

var SuperClass = function() {
this.superValue = true;
    this.books = ['js', 'h5', 'css3'];
}
var SubClass = function() {
    this.subValue = false;
}
SubClass.prototype = new SuperClass();  
SubClass.prototype.constructor = SubClass;  

var sub1 = new SubClass();
var sub2 = new SubClass();

console.log(sub1.books);  // ["js", "h5", "css3"]
console.log(sub2.books);  // ["js", "h5", "css3"]

sub1.books.push('设计模式');  

console.log(sub1.books);  // ["js", "h5", "css3", "设计模式"]
console.log(sub2.books);  // ["js", "h5", "css3", "设计模式"]

• 子类对象属性无法定制，例如想要sub1.books为[‘js’],sub2.books为[‘css’]就无法实现

---

2.构造函数继承

var SuperClass = function(id) {
    this.id = id;
    this.books = ['js', 'h5', 'css3'];
};

var SubClass = function(id) {
    SuperClass.call(this, id);
};

var sub1 = new SubClass('1');
var sub2 = new SubClass('2');

sub1.books.push('设计模式');  

console.log(sub1.books);  // ["js", "h5", "css3", "设计模式"]
console.log(sub2.books);  // ["js", "h5", "css3"]

缺点：有些属性可能是公有的，没必要每个对象都有一份独立的。

---

3.组合继承

var SuperClass = function(id) {
this.id = id;
    this.books = ['js', 'h5', 'css3'];
};
SuperClass.prototype.getId = function() {
    return this.id;
}
var SubClass = function(id, name) {
    SuperClass.call(this, id);
    this.name = name;
};
SubClass.prototype = new SuperClass();
SubClass.prototype.constructor = SubClass;

SubClass.prototype.getName = function(){
    return this.name;
}

缺点：父类的构造函数跑了两遍，在子类对象的proto中存在与子类对象的同名变量，造成空间浪费。

---

4.寄生式继承

var book = {
    name: '设计模式',
    alikeBook: ['css book', 'html book']
}

var createBook = function(o) {
    var inheritObject = function(o) {
        var oFn = function() {  };
        oFn.prototype = o;
        return new oFn;
    }
    var obj = inheritObject(o);
    obj.getName = function() {console.log(this.name);};
    return obj;
}

缺点：硬要说缺点的话，感觉继承的属性方法放在proto上有点奇怪（强迫症…）,不过既然是继承的，在proto上也很合理。

---

5.终极继承–寄生组合式继承

var SuperClass = function(id, name){
 this.id = id;
  this.name = name;
 }

 SuperClass.prototype.getName = function() {
  return this.name;
 }

 var SubClass = function(id, name, price){
  SuperClass.apply(this, [id, name]);
  this.price = price;
 }
 var inheritObject = function(o) {
  var oFn = function() {};
  oFn.prototype = o;
  return new oFn;
 }
 SubClass.prototype = inheritObject(SuperClass.prototype);
 SubClass.prototype.constructor = SubClass;