javascript創建物件、物件繼承的實用方式詳解_基礎知識

本文約定：在不特殊宣告的情況下，屬性代指屬性或方法。

建立物件、物件繼承其實是一回事：我們所需要的實例物件透過建構函式獲得私有屬性、透過原型鏈獲得共享的屬性。什麼是好的方式？私有屬性透過建構函數的方式取得（不考慮實例中自訂私有屬性）且不需要重寫，共享屬性透過原型鏈找到且不需要重複建立。

普適的方式

組合使用建構函式模式和原型模式建立物件

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
Object.defineProperty(HNU_student, 'constructor', {value: HNU_student});

var hiyohoo = new HNU_student('xujian');

透過字面量的方式會重寫prototype，且原型的constructor指向了Object，必要的情況下需要重新定義constructor。

寄生組合式繼承

function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}
function inheritPrototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};

function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  }
}
inheritPrototype(Student_2011, HNU_student);
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
};

var hiyohoo = new Student_2011('xujian', 20110803203);

object()的作用：將作為參數傳入的物件變成實例的原型，該物件的屬性被所有實例共享。

共享屬性：inheritPrototype(Student_2011, HNU_student);，子構造函數原型成為超構造函數原型的一個實例，超構造函數原型中的屬性共享給子構造函數。
私有屬性：HNU_student.call(this, name);，透過子建構函式建立實例時呼叫超建構函式建立私有屬性。

建立物件的其他方式

動態原型模式

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };

  if (!HNU_student.prototype.school) {
    HNU_student.prototype.school = 'HNU';
    HNU_student.prototype.saySchool = function() {
      return this.school;
    };
  }
}

var hiyohoo = new HNU_student('xujian');

將定義在原型中的共享屬性放入建構函式中，使用判斷語句，在第一次呼叫建構函式建立實例時，初始化原型共享屬性。

寄生建構子模式

function SpecialArray() {
  var values = new Array();
  values.push.apply(values, arguments);
  values.toPipedString = function() {
    return this.join('|');
  };

  return values;
}

var colors = new SpecialArray('red', 'black', 'white');

用於為原生建構函式新增特殊的屬性。

其他物件繼承的方式

組合繼承

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};
function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  };
}
Student_2011.prototype = new HNU_student();
Student_2011.prototype.constructor = Student_2011;
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
}
var hiyohoo = new Student_2011('xujian', 20110803203);

共享屬性：Student_2011.prototype = new HNU_student();，子構造函數的原型指向了超構造函數的原型，實例透過原型鏈找到所有共享的屬性。
私有屬性：HNU_student.call(this, name);，透過子建構函式建立實例時呼叫超建構函式建立私有屬性。

缺陷：超構造函數被呼叫了兩遍。 Student_2011.prototype = new HNU_student();的同時，在子建構函式原型中建立了超建構函式定義的私有屬性，這些原型中的私有屬性被實例中的同名屬性覆寫屏蔽。

原型式繼承、寄生式繼承

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = object(student1);

Object.creat()是ECMAScript5新增的方法，接受兩個參數：一是作為原型的原對象，二是重寫或新增屬性的對象，作用與自訂的object()相同。

var student1 = {
  name: 'xujian',
  school: 'HNU'
};
var student2 = Object.create(student1, {
  name: {
    value: 'huangjing'
  }
});

寄生式繼承在原型式繼承的基礎上增加了額外的屬性用來增強物件。

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
function creatAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('Hi!');
  };
  return clone;
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = creatAnother(student1);

原型式繼承和寄生式繼承用於建立與已有物件類似的實例物件。