[AC] constructor function and prototypal inheritance

constructor function.js

// Constructor Function
function SmartPhone (name, price, features){
  this.name = name
  this.price = price
  this.features = features
}

// Put methods in protoype
SmartPhone.prototype.showPhoneInfo = function() {
  console.log(`The price of ${this.name} is $${this.price}, which has the newest features such as ${this.features.join(', ')}.`)
}


let alphaPhoneX = new SmartPhone('alphaPhoneX', 14999, ['long battery life', 'AI camera'])

// let alphaPhoneY = new SmartPhone('alphaPhoneY', 18900, ['water proof', 'high screen resolution'])

// let alphaPhoneZ = new SmartPhone('alphaPhoneZ', 23900, ['IP47', 'high screen resolution', 'full display'])


alphaPhoneX.showPhoneInfo()  // "The price of alphaPhoneX is $14999, which has the newest features such as long battery life, AI camera."

// Modify showPhoneInfo in prototype
SmartPhone.prototype.showPhoneInfo = function() {
  console.log(`The phone '${this.name}' with the newest features such as ${this.features.join(', ')}, only cost $${this.price}`)
}

// same instance but with different result
alphaPhoneX.showPhoneInfo() // The phone 'alphaPhoneX' with the newest features such as long battery life, AI camera, only cost $14999

function constructor inheritance example with ES6 class.js

class SmartPhone {
  constructor(ram, storage, batteryCapacity) {
    this.ram = ram;
    this.storage = storage;
    this.batteryCapacity = batteryCapacity;
  }

  showSpec() {
    console.log(`This smartphone has ${this.ram}GB of RAM, ${this.storage}GB of storage, and ${this.batteryCapacity}mAh capacity battery.`);
  }
}

class AlphaPhone extends SmartPhone {
  constructor(name, ram, storage, batteryCapacity, price, features) {
    super(ram, storage, batteryCapacity);
    this.name = name;
    this.price = price;
    this.features = features;
  }

  showProductInfo() {
    console.log(`The price of ${this.name} is $${this.price}, which has the newest features such as ${this.features.join(', ')}.`);
  };
}

let myPhone = new SmartPhone(8, 64, 3000);
myPhone.showSpec();

let alphaX = new AlphaPhone('alphaX', 8, 64, 3000, 16999, ['long battery life', 'AI camera']);
alphaX.showSpec();
alphaX.showProductInfo();

function constructor inheritance example.js

function SmartPhone(ram, storage, batteryCapacity) {
  this.ram = ram
  this.storage = storage
  this.batteryCapacity = batteryCapacity
}

SmartPhone.prototype.showSpec = function() {
  console.log(`This smartphone has ${this.ram}GB of RAM, ${this.storage}GB of storage, and ${this.batteryCapacity}mAh capacity battery.`)
}

function AlphaPhone(name, ram, storage, batteryCapacity, price, features) {
  SmartPhone.call(this, ram, storage, batteryCapacity)
  this.name = name
  this.price = price
  this.features = features
}
AlphaPhone.prototype = Object.create(SmartPhone.prototype)
AlphaPhone.prototype.constructor = AlphaPhone

AlphaPhone.prototype.showProductInfo = function() {
  console.log(`The price of ${this.name} is $${this.price}, which has the newest features such as ${this.features.join(', ')}.`)
}

let myPhone = new SmartPhone(8, 64, 3000);
myPhone.showSpec();

let alphaPhoneX = new AlphaPhone('alphaPhoneX', 8, 64, 3000, 16999, ['long battery life', 'AI camera']);
alphaPhoneX.showSpec();
alphaPhoneX.showProductInfo();

MDN 上的範例.js

function Person(name, interests) {
  this.name = name;
  this.interests = interests;
};

Person.prototype.greeting = function() {
  console.log(`Hi! I'm ${this.name}.`);
};

function Teacher(name, interests, subject) {
  Person.call(this, name, interests);
  this.subject = subject;
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;
Teacher.prototype.greeting = function() {
  console.log(`Hi! My name is ${this.name}. I major in ${this.subject}`);
}

aaron = new Teacher('Aaron', ['computer science'], 'psychology');
aaron.greeting();

prototypal inheritance.js

const name = 'AlphaPhoneX'
console.log(name.constructor.name)
console.log(Object.getPrototypeOf(name))

組合式繼承.js

// Parent Class
function Person(name) {
  this.name = name || 'default';
  this.interest = ['reading', 'music'];
}
Person.prototype.say = function() {
  console.log(`Hello, I am Person. My name is ${this.name}`);
}

// Child Class
function Student(name, score) {
  Person.call(this, name);                // 建構式函式繼承(繼承屬性)
  this.score = score;
}
Student.prototype = new Person();          // 原型鏈繼承(繼承方法)
Student.prototype.constructor = Student;

aaron = new Student('aaron', 80);
lucy = new Student('lucy', 88);

aaron.interest.push('basketball');
console.log(aaron.interest);  //  ["reading", "music", "basketball"]
console.log(lucy.interest);   //  ["reading", "music"]