什么是原型？

JavaScript 是一門基于對象的語言，每個對象都有一個原型（prototype），原型是一個對象或 null 值，它定義了該對象所具有的屬性和方法。當(dāng)讀取一個對象的屬性或執(zhí)行一個對象的方法時，如果當(dāng)前對象本身沒有這個屬性或方法，那么 JavaScript 就會從該對象的原型中查找這個屬性或方法，并遞歸查找到其原型鏈上的所有對象，直到找到該屬性或方法為止。

在 JavaScript 中，每個函數(shù)對象都有一個 prototype 屬性，該屬性指向該函數(shù)的原型對象。當(dāng)使用 new 操作符創(chuàng)建一個對象時，該對象的原型就被設(shè)置為構(gòu)造函數(shù)的 prototype 屬性的值。例如：

function Person(name) {
  this.name = name;
}
var person1 = new Person("李三");
// person1 的原型是 Person.prototype
console.log(person1.__proto__ === Person.prototype); // 輸出：true

什么是原型鏈？

JavaScript 的對象之間不是完全獨立的關(guān)系，它們之間是通過原型鏈（prototype chain）相互關(guān)聯(lián)的。原型鏈指的是對象之間的一種繼承關(guān)系，每個對象都有一個原型對象，而原型對象也可能有自己的原型，這樣一直遞歸下去，就形成了原型鏈。

當(dāng)讀取一個對象的屬性或執(zhí)行一個對象的方法時，如果該對象本身沒有這個屬性或方法，JavaScript 就會沿著該對象的原型鏈向上查找，直到找到該屬性或方法為止。如果到達了原型鏈的頂端還沒有找到該屬性或方法，則返回 undefined。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};
function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}
// 繼承了 Person 的屬性和方法
Student.prototype = Object.create(Person.prototype);
// 在 Student.prototype 上添加自己的屬性和方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying in grade ${this.grade}`);
};
var student1 = new Student("李三", 3);
student1.sayHello(); // 輸出：Hello, my name is 李三
student1.study(); // 輸出：李三 is studying in grade 3

在上面的例子中，我們定義了兩個構(gòu)造函數(shù) Person 和 Student，并通過 Student.prototype = Object.create(Person.prototype); 實現(xiàn)了 Student 對象繼承自 Person 對象的屬性和方法。當(dāng)我們調(diào)用 student1.sayHello() 方法時，JavaScript 沿著該對象的原型鏈向上查找，找到了 Person.prototype 中的 sayHello() 方法。當(dāng)我們調(diào)用 student1.study() 方法時，則直接在 Student.prototype 中查找到了該方法。

總結(jié)

通過本文的介紹，我們可以明確 JavaScript 中原型和原型鏈的概念以及使用方法。理解原型和原型鏈的設(shè)計思想，可以幫助我們更好地理解 JavaScript 的對象模型，從而更好地編寫高質(zhì)量的代碼

到此這篇關(guān)于一文帶你理解JS中原型和原型鏈的文章就介紹到這了,更多相關(guān)JS原型和原型鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論