淺談JS對象的建立、原型、原型鏈繼承

JS的內置對象，可分爲兩類：

• 數據封裝類對象：Object、Boolean、Number、String、Array
• 其餘對象：Function、Date、Error、Math、RegExp、Arguments

天然，除了內置對象外，能夠經過JS代碼自定義對象。

先總結下建立對象的方式，每種方式繼承的原型對象不一樣：

• 構造函數：原型爲構造函數的prototype屬性
• Object.create()：原型爲傳入的第一個參數，若第一個參數爲null，以Object.prototype爲原型；第二個參數爲可選的屬性描述符

下面分別看一下代碼示例：

1. 構造函數方式

function Phone(brand) {
  this.brand = brand
}
let nokia = new Phone('Nokia')
console.log(nokia.constructor === Phone); // true
console.log(nokia.constructor.prototype === Phone.prototype); // true
console.log(Phone.prototype.__proto__ === Object.prototype); // true => the final relationship between Phone() and Object()
console.log('Object.prototype.__proto__: ', Object.prototype.__proto__); // null

function Smartphone(model) {
  this.model = model
}
let iphone8 = new Smartphone('iphone8')
console.log(iphone8.constructor === Smartphone); // true

// prototype繼承
Smartphone.prototype = new Phone('Huawei')
let honor = new Smartphone('honor')
console.log(honor.constructor === Smartphone); // false
console.log(honor.constructor === Phone); // true
console.log(honor.brand); // Huawei => 繼承了brand屬性
console.log(honor.model); // honor

// 直接以字面量形式聲明時，至關於構造函數爲Object
let ironman = {name: 'Tony Stark'}
console.log(ironman.constructor === Object) // true
console.log(ironman.constructor.prototype === Object.prototype) // true
複製代碼

2. 利用Object.create()

// 創建一個原型爲null的對象
let spiderman = Object.create(null, {
  props: {
    name: 'Peter Park'
  }
});
console.log(spiderman.constructor); // => undefined
    
// 建立一個原型爲Array的對象
let array = Object.create(Array.prototype, {});
console.log(array.constructor); // => Array()
console.log(array.constructor.prototype); // => [constructor: ƒ, ...]

// 建立一個原型爲自定義類的對象
function Car() {
  this.fix = function() {
    console.log('going to fix');
  }
}
let audi = Object.create(Car.prototype, {});
audi.ov = '3.0T'
Car.prototype.charge = function() {
  console.log('going to charge');
}
console.log(audi.constructor); // Car()
console.log(audi.constructor.prototype); // {charge: ƒ, constructor: ƒ}
複製代碼

js經過對原型的操做，能夠模擬高級語言對象中的繼承特性:

• prototype是函數層面的屬性，隱性原型屬性__proto__是對象(包括函數)層面的屬性。
• 一個對象的__proto__，便是其構造器函數的prototype。
• prototype做爲一個對象，亦擁有__proto__屬性，指向的是更上一層構造器函數的prototype。
• 直到__proto__指向的是最上層的Object.prototype，且到此後，Object.prototype.__proto__的值爲null。
• JS的新版本趨勢中，逐步開始模擬高級語言(特別是Java)的特性，描述實例成員、靜態成員、繼承等特性，越來接近面向對象編程。

進一步看下prototype繼承：

將某個類的prototype指向爲某個對象後，此類將會繼承該對象的全部實例成員，靜態成員除外。看例子：

function Phone(brand) {
  this.brand = brand
  this.online = function() {
    console.log(brand + ' is going to online');
  }
}
let nokia = new Phone('Nokia')
console.log(nokia.__proto__ === nokia.constructor.prototype); // true => 對象的__proto__便是其構造器的prototype
console.log(nokia.constructor.prototype.__proto__ === Object.prototype); // true
console.log('prototype of nokia: ', nokia.prototype); // undefined => 可再次看出prototype是構造器層面的屬性，且__proto__是對象層面的屬性
nokia.online(); // Nokia is going to online
Phone.prototype.onMsg = function() {
  console.log('nokia message coming');
}
nokia.onMsg(); // nokia message coming

function Smartphone(model) {
  this.model = model
  this.oncalling = function() {
    console.log(model + ' is on calling');
  }
}
let iphone8 = new Smartphone('iphone8')
iphone8.oncalling(); // iphone8 is on calling

// 繼承方式之一:
// 此方式優缺點：簡單易於實現, 但若爲子類新增屬性和方法，要在賦值了prototype以後執行, 沒法實現多繼承
Smartphone.prototype = new Phone('Xiaomi') // 繼承Phone對象實例的全部成員，靜態成員除外
let iphoneX = new Smartphone('iphoneX')

console.log(iphoneX.brand); // Xiaomi
console.log(iphoneX.model); // iphoneX
iphoneX.online(); // Xiaomi is going to online
iphoneX.onMsg(); // nokia message coming
iphoneX.oncalling(); // iphoneX is on calling

console.log(iphoneX instanceof Phone); // true 
console.log(iphoneX instanceof Smartphone); // true
複製代碼

順帶提一下call方法也能夠實現繼承：

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   
function Cat(name){  
  Animal.call(this, name);  
}    
var cat = new Cat("Black Cat");   
cat.showName(); // Black Cat
複製代碼

進一步看下原型鏈

function Ball(name){
  this.name = name;
  this.showName = function () {
    console.log('I am ' + this.name + ' from this'); 
  }
}
Ball.prototype.showName = function () {
  console.log('I am ' + this.name + ' from prototype'); 
}
let football = new Ball("football");
football.fly = function () {
  console.log(this.name + ' is flying');
}
football.fly(); // football is flying

// 先從自身找，找不到在__proto__中去找,沒找到，去找上層__proto__，直到結果爲null爲止
football.showName(); // I am football from this
複製代碼