JavaScript - 原生原型

歡迎，有志於成為程序員的各位！今天，我們將深入探索JavaScript原生原型的迷人世界。別擔心你對編程還是新手——我會一步步引導你走過這段旅程，正如我過去幾年來為無數學生所做的那樣。讓我們一起踏上這場冒險！

JavaScript - Native Prototypes

原生原型

想像你在一個神奇的圖書館裡，每本書都擁有特殊的魔力。在JavaScript中，這些"神奇的書"就是我们的原生对象，而它们的"特殊魔力"就是它们天生具有的方法和屬性。這就是我们所謂的原生原型。

原生原型是什麼？

原生原型是標準JavaScript对象（如Array、String、Number和Object）的內置原型。它们提供了一套所有这些对象实例都可以使用的方法。

讓我們看一個例子：

let myString = "Hello, World!";
console.log(myString.toUpperCase());

輸出：

HELLO, WORLD!

在這個例子中，toUpperCase() 是由String原型提供的方法。即使我们没有自己定義這個方法，我們也可以在創建的任何字符串上使用它。就像我们制作的每个字符串都帶有一個内置的工具箱，裡面有許多有用的方法！

探索原生原型

讓我們探索一些更多的原生原型方法：

// Array原型方法
let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);  // 3
console.log(fruits.join(", "));  // "apple, banana, cherry"

// Number原型方法
let num = 3.14159;
console.log(num.toFixed(2));  // "3.14"

// Object原型方法
let person = { name: "Alice", age: 30 };
console.log(Object.keys(person));  // ["name", "age"]

这些方法（length、join、toFixed、keys）都来自各自的原生原型。它们就像瑞士軍刀——在你需要的时候總是隨身可用！

更新原生原型

現在，如果我們想給這些神奇的書添加我們自己的"特殊魔力"怎麼辦？我们可以通过更新原生原型來做到这一点。但是記住，能力越強，責任越大！

向原生原型添加方法

讓我們向String原型添加一个新的方法：

String.prototype.greet = function() {
return `Hello, ${this}!`;
};

let name = "Alice";
console.log(name.greet());  // "Hello, Alice!"

在這裡，我們给所有的字符串添加了一个greet方法。就像给程序中的每个字符串都赋予了說"你好"的能力！

修改原生原型的危險

儘管這看起來很酷，但修改原生原型可能會有風險。這就像在遊戲進行時改變規則——它可能會導致混淆和意外的行為。在專業環境中，通常建議避免修改原生原型。

向構造函數添加方法

一個更安全的選擇是向自己的構造函數添加方法。讓我們創建一个Person構造函數：

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

Person.prototype.sayHello = function() {
return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
};

let alice = new Person("Alice", 30);
console.log(alice.sayHello());  // "Hello, my name is Alice and I'm 30 years old."

這樣，我們在不擾動圖書館原始藏書的情況下，給我們自己的"神奇書"添加了新的能力。

JavaScript原型鏈

現在，讓我們來討論原型鏈。想像一個家族樹，孩子們從父母那裡繼承特徵。在JavaScript中，对象可以通過原型鏈從其他对象繼承屬性和方法。

function Animal(name) {
this.name = name;
}

Animal.prototype.makeSound = function() {
return "Some generic animal sound";
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
return "Woof!";
};

let myDog = new Dog("Buddy");
console.log(myDog.name);  // "Buddy"
console.log(myDog.makeSound());  // "Some generic animal sound"
console.log(myDog.bark());  // "Woof!"

在這個例子中，Dog繼承自Animal。就像說所有狗都是動物，但不是所有動物都是狗。Dog的原型鏈如下所示：myDog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null。

原生原型方法的總結

這裡是一個原生原型方法的常見用法表：

对象类型	方法	描述
Array	push()	向數組的末尾添加一個或多個元素
Array	pop()	從數組中刪除最後一個元素
Array	slice()	返回數組的一部分的淺拷貝
String	toLowerCase()	將字符串轉換為小寫字母
String	trim()	從字符串的两端移除空格
Number	toFixed()	使用固定小數數字格式化數字
Object	hasOwnProperty()	返回一個布爾值，指示對象是否具有指定的屬性

記住，這些只是幾個例子。每个原生对象类型都帶有許多其他有用的方法，供您在JavaScript的旅程中探索和使用！

總結來說，原生原型是JavaScript对象构建的基石。理解它们就像打開了一個寶藏箱，裡面充满了强大的工具，可以使您的代碼更高效、更表達性。在你继续编程的旅程中，你會發現自己越来越多地使用这些工具。祝您編程愉快，並記住——在JavaScript的世界裡，你總是只離原型一步之遙！

Credits: Image by storyset