JavaScript 原型鏈與繼承問答（第一天）

龙种人發表於2024-05-11
JavaScript原型繼承

1、在程式語言中，什麼叫語法糖

在程式語言中，"語法糖"是指一種程式語言的語法功能，它並不改變語言的功能，但可以讓程式碼更易讀、更易寫。它是一種語法上的簡化，讓程式設計師能夠用更少的程式碼表達相同的邏輯。比如es6中，一個物件想複用另外一個物件的所有欄位，可以這樣
const obj2 = {...obj}

2、在js中，call方法的作用

在JavaScript中，`call` 方法用於在一個物件上呼叫一個方法，同時指定該方法的 `this` 值。這允許你以不同的上下文來呼叫函式。
舉個例子，假設有一個物件 `person`：

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

現在，假設有另一個物件 `person2`：

var person2 = {
  firstName: "John",
  lastName: "Doe"
}

透過使用 `call` 方法，我們可以在 `person2` 上呼叫 `person` 物件的 `fullName` 方法，並在呼叫時將 `person2` 作為 `this` 值傳遞：

person.fullName.call(person2); // 返回 "John Doe"

這樣做的效果就相當於將 `person` 物件的 `fullName` 方法應用到 `person2` 物件上，使得 `this` 指向了 `person2`。

3、Object.create函式的作用

`Object.create` 是 JavaScript 中用於建立一個新物件的函式。它的作用是建立一個新物件，新物件的原型（prototype）是作為 `Object.create` 的第一個引數傳入的物件。這個函式常常用於實現基於原型的繼承。透過將一個現有物件作為原型，可以建立一個繼承自該物件的新物件。例子如下：

function Widget(widgetName) {
    this.widgetName= widgetName;
}
 
Widget.prototype.identify = function() {
    return "這是" + this.widgetName;
};
 
function Notice(widgetName) {
    Widget.call(this, widgetName);
}
 
Notice.prototype = Object.create(Widget.prototype);
 
Notice.prototype.display= function() {
    console.log("你好， " + this.identify() + ".");
};
 
var notice1 = new Notice("應用A");
var notice2 = new Notice("應用B");

Object.getPrototypeOf(notice1) === Notice.prototype //true
Object.getPrototypeOf(notice2) === Notice.prototype //true

notice1.display(); // "你好，這是應用A"
notice2.display(); // "你好，這是應用B"

在這個例子中，`Notice.prototype = Object.create(Widget.prototype);` 這行程式碼的作用是建立一個新物件，該物件的原型為 `Widget.prototype`。這樣做的目的是讓 Notice 的例項在查詢屬性和方法時能夠共享 Widget 原型上的方法，以便在 Notice 物件上呼叫 Widget 的方法。這種方法也可以稱為原型繼承，透過它，可以實現物件間的原型鏈關係，從而實現屬性和方法的繼承。

4、在js中，什麼資料型別才有prototype這個欄位，這個欄位有什麼作用

在 JavaScript 中，只有函式（Function）資料型別才具有 prototype 這個欄位。 JavaScript 中的函式是一種特殊的物件，因此它們可以有屬性和方法，其中包括 prototype。

prototype 是每個函式特有的屬性，它是一個物件，用於儲存可以由特定型別的所有例項共享的屬性和方法。透過原型，可以實現屬性和方法的共享，從而節省記憶體空間。當我們嘗試訪問一個物件的屬性或方法時，如果該物件本身沒有這個屬性或方法，JavaScript 會沿著原型鏈（prototype chain）向上查詢，直到找到這個屬性或方法或者到達原型鏈的頂端為止。

舉例來說，如果你建立了一個名為"Car"的建構函式，你可以將"Car.prototype"用來定義所有Car物件例項需要共享的方法，比如"drive"或者"stop"方法。這樣，所有透過"Car"建構函式建立的物件都可以共享這些方法，而不是每個物件都擁有一份獨立的方法，從而節省記憶體空間。
舉例說明其作用：

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
Car.prototype.drive = function() {
  return "The " + this.make + " " + this.model + " is driving.";
};
Car.prototype.stop = function() {
  return "The " + this.make + " " + this.model + " has stopped.";
};
var myCar = new Car("Toyota", "Corolla", 2022);
console.log(myCar.drive()); // 輸出："The Toyota Corolla is driving."
console.log(myCar.stop()); // 輸出："The Toyota Corolla has stopped."

在這個例子中，我們使用"Car.prototype"來新增"drive"和"stop"方法，這些方法可以被所有透過"Car"建構函式建立的物件所共享。

相關文章