什么是原型？

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

在 JavaScript 中，每個(gè)函數(shù)對(duì)象都有一個(gè) prototype 屬性，該屬性指向該函數(shù)的原型對(duì)象。當(dāng)使用 new 操作符創(chuàng)建一個(gè)對(duì)象時(shí)，該對(duì)象的原型就被設(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 的對(duì)象之間不是完全獨(dú)立的關(guān)系，它們之間是通過原型鏈（prototype chain）相互關(guān)聯(lián)的。原型鏈指的是對(duì)象之間的一種繼承關(guān)系，每個(gè)對(duì)象都有一個(gè)原型對(duì)象，而原型對(duì)象也可能有自己的原型，這樣一直遞歸下去，就形成了原型鏈。

當(dāng)讀取一個(gè)對(duì)象的屬性或執(zhí)行一個(gè)對(duì)象的方法時(shí)，如果該對(duì)象本身沒有這個(gè)屬性或方法，JavaScript 就會(huì)沿著該對(duì)象的原型鏈向上查找，直到找到該屬性或方法為止。如果到達(dá)了原型鏈的頂端還沒有找到該屬性或方法，則返回 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è)構(gòu)造函數(shù) Person 和 Student，并通過 Student.prototype = Object.create(Person.prototype); 實(shí)現(xiàn)了 Student 對(duì)象繼承自 Person 對(duì)象的屬性和方法。當(dāng)我們調(diào)用 student1.sayHello() 方法時(shí)，JavaScript 沿著該對(duì)象的原型鏈向上查找，找到了 Person.prototype 中的 sayHello() 方法。當(dāng)我們調(diào)用 student1.study() 方法時(shí)，則直接在 Student.prototype 中查找到了該方法。

總結(jié)

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

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

最新評(píng)論