js原型和原型鍊是：1、原型，所有的函數(shù)預(yù)設(shè)都有一個「prototype」這樣公有且不可列舉的屬性，它會指向另一個對象，這個物件就是原型。 2.原型鏈，當(dāng)存取物件的屬性或方法時，首先物件會從自身去找，找不到就會往原型中去找，也就是它建構(gòu)函式的「prototype」中，如果原型中找不到，即建構(gòu)函式中也沒有該屬性，就會往原型後面的原型上去找，這樣就形成了鍊式的結(jié)構(gòu)，稱為原型鏈。

本教學(xué)作業(yè)系統(tǒng)：windows10系統(tǒng)、JavaScript? ECMAScript 2021版本、DELL G3電腦。

一、原型

原型：所有的函數(shù)預(yù)設(shè)都有一個「prototype」這樣公有且不可列舉的屬性，它會指向另一個對象，這個對象就是原型。每當(dāng)定義一個物件（函數(shù)也是物件）時，就會產(chǎn)生一個__proto__屬性，被稱為隱式原型；這個__proto__屬性指向的是這個物件的建構(gòu)函數(shù)的prototype，被稱為顯式原型。每一個物件都會從原型中「繼承」屬性。

首先看一個例子，建立一個Student類，並建立類別的實例物件student：

class Student{
    constructor(name, score) {
        this.name = name;
        this.score = score;
    }
    introduce() {
        console.log(`我是${this.name}，考了${this.score}分。`)
    }
}
const student = new Student('張三', 99)
console.log('student', student); // student Student { name: '張三', score: 99}
student.introduce(); // 我是張三，考了99分。

控制臺能存取到屬性和方法。

但直接在控制臺輸入student，會發(fā)現(xiàn)只有name和score屬性，沒有introduce方法，但有一個[[Prototype]]屬性，用兩個中括號括起來。

把[[Prototype]]展開，會發(fā)現(xiàn)introduce方法在[[Prototype]]中。

[[Prototype]]屬性被稱為student物件的隱式原型。當(dāng)我們要去找一個物件的屬性或方法時，如果在目前物件上找不到，就會去當(dāng)前物件的隱式原型[[Prototype]]屬性上去找。

可透過.__proto__屬性存取原型，注意__proto__兩邊分別有兩條底線。

而Student()建構(gòu)子也有一個prototype屬性，Student()建構(gòu)子的prototype屬性其實等於student物件的__proto__屬性。

下面用一張圖來說明：

#因此，建構(gòu)子的prototype屬性就等於實例物件的__proto__屬性，建構(gòu)函數(shù)的prototype屬性稱為明確原型，實例物件的__proto__屬性稱為隱式原型。

二、原型鏈

原型鏈：當(dāng)存取一個物件的屬性或方法時，首先物件會從自身去找，如果找不到，就會往原型中去找，即__proto__，也就是它構(gòu)造函數(shù)的prototype中；如果原型中找不到，即構(gòu)造函數(shù)中也沒有該屬性，因為構(gòu)造函數(shù)也是對象，也有__proto__，就會往原型上去找，這樣就形成了鍊式的結(jié)構(gòu)，稱為原型鏈，本質(zhì)描述的是物件的一種繼承關(guān)係。

再來看一個例子，建立一個Person類，再建立一個Teacher類別繼承自Person類，並建立實例物件teacher：

class Person {
    constructor(name) {
        this.name = name;
    }
    drink(){
        console.log('喝水');
    }
}
class Teacher extends Person {
    constructor(name, subject) {
        super(name);
        this.subject = subject;
    }
    teach() {
        console.log(`我是${this.name}， 教${this.subject}。`)
    }
}
const teacher = new Teacher('哈默', '前端開發(fā)')
console.log('teacher', teacher);
teacher.teach();
teacher.drink();

控制臺輸出如下，teacher可以執(zhí)行teach()和drink()方法。

展開teacher對象，發(fā)現(xiàn)找不到這兩個方法，於是去找對象的原型，即__proto__屬性，找到teach()方法，再展開下一層__proto__屬性，找到drink()方法。

下面用一張圖說明：

可以看到，teacher實例對象本身是沒有teach()方法的，這時就會去teacher對象的__proto__隱式原型指向的Teacher.prototype顯式原型上去找，此時找到了teach()方法并執(zhí)行；同時，Teacher.prototype上仍然沒有找到drink()方法，而Teacher.prototype也是一個對象，有自己的__proto__隱式原型，那么就去Teacher.prototype.__proto__上去找，Teacher.prototype.__proto__會指向Person()構(gòu)造函數(shù)的顯式原型Person.prototype，此時找到了drink()方法并執(zhí)行，這就是原型鏈。

注：

（1）通過__proto__形成原型鏈而非protrotype。

（2）__proto__屬性是對象所獨(dú)有的。

（3）prototype屬性是函數(shù)所獨(dú)有的。但是由于JS中函數(shù)也是一種對象，所以函數(shù)也擁有__proto__屬性。

三、判斷對象自身是否有某屬性或方法

hasOwnProperty()方法會返回一個布爾值，用于判斷對象自身是否有某屬性或方法。返回true，代表是該對象自身的屬性或方法；返回false，代表是該對象原型上的屬性或方法。

由于Person類繼承自O(shè)bject類，那么執(zhí)行teacher.hasOwnProperty()方法時，實際會找到Object.prototype中的hasOwnProperty()方法并執(zhí)行。

因此，所有繼承了Object的對象都會繼承到hasOwnProperty方法。

同時可以看到，Object.prototype.__proto__ 的值為 null ，即 Object.prototype 沒有原型，所以可以想象在原型鏈中，當(dāng)找到頂層原型還沒有屬性時，那就是沒有這個屬性，返回返回undefined。

instanceof 運(yùn)算符：用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上。

看一個例子，使用typeof判斷array的數(shù)據(jù)類型時，返回的是object，因此無法使用typeof判斷array的類型。

const object = {};
const array = [];
// 使用typeof判斷數(shù)據(jù)類型，array返回的是object 
console.log(typeof object); // object
console.log(typeof array); // object

下面使用instanceof運(yùn)算符判斷array的數(shù)據(jù)類型：

// 使用instanceof判斷數(shù)據(jù)類型
const flagObject = object instanceof Array;
const flagArray = array instanceof Array;
console.log(flagObject); // false
console.log(flagArray); // true

object instanceof Array返回false，表示Array.prototype不在object的原型鏈上；array instanceof Array返回true，表示Array.prototype在array的原型鏈上，由此可以區(qū)分object和array的數(shù)據(jù)類型。

也可通過控制臺查看object和array的原型。

注：[] instanceof Object 為 true

以上是js原型和原型鍊是什麼的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！