JavaScript ES6 升級手冊

了解原型鍊 (Prototype Chain)

原型物件:每個物件都有對應的原型物件

取得原型物件

Object.getPrototypeOf(物件)

車子物件

Car
車子的原型物件

原型鍊 Prototype Chain

Object
Object 的原型物件

null

// 定義一個類別

class Car{

constructor(color){this.color=color;}

run(){}

}

// 產生類別物件

let car=new Car("green");

// 取得並在將原型物件顯示出來

let carProto=Object.getPrototypeOf(car); // Car 原型物件

console.log(carProto);

let objProto=Object.getPrototypeOf(carProto); // Object 原型物件

console.log(objProto);

let lastOne=Object.getPrototypeOf(objProto); // 原型鍊的終點:null

console.log(lastOne);

繼承關係中的原型鍊

電動車物件

ElectricCar
電動車的原型物件

Car
車子的原型物件

原型鍊 Prototype Chain

Object
Object 的原型物件

null

// 定義一個類別

class Car{

constructor(color){this.color=color;}

run(){}

}

// 定義子類別

class ElectricCar extends Car{

constructor(color){super(color); this.battery=100;}

}

// 產生子類別物件

let car=new ElectricCar("green");

car.run(); // 這個如何運作?

電動車物件

ElectricCar
電動車的原型物件

Car
車子的原型物件

原型鍊 Prototype Chain

Object
Object 的原型物件

null

run()

run()? NO!

run()? NO!

run()? YES!

// 定義一個類別

class Car{

constructor(color){this.color=color;}

run(){}

}

// 定義子類別

class ElectricCar extends Car{

constructor(color){super(color); this.battery=100;}

run(distance){}

charge(){}

}

// 產生子類別物件

let car=new ElectricCar("green");

car.run(); // 這個如何運作?

電動車物件

ElectricCar
電動車的原型物件

Car
車子的原型物件

原型鍊 Prototype Chain

Object
Object 的原型物件

null

run()

run()? NO!

run()? YES!

run()

charge()

物件實體上,直接定義屬性或方法

// 定義一個類別 … 略過

// 定義子類別

class ElectricCar extends Car{

constructor(color){super(color); this.battery=100;}

run(distance){}

charge(){}

}

// 產生子類別物件

let car=new ElectricCar("green");

// 在物件實體上直接建立方法或屬性

car.name="彭彭的車";

car.test=function(){

console.log("建立物件後,在物件實體上新增方法");

console.log(this.name); // 印出:彭彭的車

};

car.test();

電動車物件

ElectricCar
電動車的原型物件

Car
車子的原型物件

原型鍊 Prototype Chain

Object
Object 的原型物件

null

run()

name

test()

run()

charge()

test()? YES!
name? YES!

沒有很難哪,對吧?

了解原型鍊 - Google Slides