原型&原型链【JavaScript基础面试题】

╰半夏微凉° 2024-03-22 13:24 38阅读 0赞

### 一张图理解原型链 ###

![在这里插入图片描述][72742a14f7a74f25b59de29636e03724.png]  
在上图中，`Parent()` 是构造函数，p1是由 `Parent()` 创建的对象。

### 前置知识 ###

任何函数都可以作为 **构造函数**。当该函数通过 `new` 关键字调用的时候，我们就称之为 **构造函数**。

看下图例子：

var Parent = function(){
        
    
    }
    //定义一个函数，那它只是一个普通的函数，我们不能称它为构造函数
    
    var instance = new Parent();
    //这时这个Parent就不是普通的函数了，它现在是一个构造函数。因为通过new关键字调用了它
    //创建了一个Parent构造函数的实例 instance

理解了上文之后，我们再来理解三个概念：`__proto__`、`prototype`、 `constructor`。

### prototype属性 ###

![在这里插入图片描述][3ffe533011884c70adf735192d8b132d.png]  
`prototype` 是函数特有的属性（有人可能有会疑问，函数为什么有属性？因为在JS中函数也是一个对象，所以它有属性。）。`prototype`设计的目的是为了**实现继承**。

一句话概括`prototype`的作用：让某一个构造函数实例化的**所有对象**可以找到公共的方法和属性。

例如上图中的`Parent()`构造函数，我如果给它的**prototype**属性设置一个`name`。那么所有通过`Parent()`构造出来的实例，比如`p1、p2`，都会有`name` 属性。

Parent.prototype.name = "所有Parent的实例都可以读取到我";
    
    let p1 = new Parent();
    let p2 = new Parent();
    
    p1.name //"所有Parent的实例都可以读取到我";
    p2.name //"所有Parent的实例都可以读取到我";

你可能会有疑问，我并没有给`p1、p2`这两个对象设置 **name** 属性，为什么它会有 **name** 属性？请看下节 **proto** 讲解

### proto属性 ###

![在这里插入图片描述][7652e77e9dd54f2aad3709496613882a.png]  
`__proto__` 属性是对象特有的属性。它表示当前对象的**原型对象**是谁。

对象的`__proto__` 属性就是它的构造函数的 `prototype` 属性。可以看如下代码，其中Parent是构造函数，`p1` 是由 `parent()` 实例化得到的对象。

p1.__proto__ === Parent.prototype; // true

所以我们可以解答刚刚的问题了：为什么我们可以调用很多我们**没有定义**的方法和属性？这些方法和属性是哪来的呢？

答案是，在**原型链**上找到的。当我们调用`p1.toString()`的时候，先在 **p1** 对象本身寻找，没有找到则通过`p1.__proto__`找到了原型对象`Parent.prototype`，也没有找到，又通过`Parent.prototype.__proto__`找到了上一层原型对象`Object.prototype`。在这一层找到了`toString`方法。于是 **p1** 可以调用该`toString`方法。

如果追问：`Object.prototype`上也没找到怎么办？那么继续寻找`Object.prototype.__proto__`。但是`Object.prototype.__proto__ === null`，所以最终会返回 `null`。

### constructor属性 ###

`constructor` 是对象特有的属性。它表示当前对象的 **构造函数**。在刚刚的例子中，我们使用构造函数 `Parent()` 创建了实例对象 `p1`。因此 p1的`constructor` 就是 `Parent()`。可以 console.log() 试试。

console.log(p1.constructor); // ƒ Parent(){}

我们知道，JS中**函数也是对象**。那么函数是否也有`constructor` 属性？我们发现构造函数 `Parent()`也有`constructor` 属性。可以 console.log() 试试。

console.log(Parent.constructor); // ƒ Function() { [native code] }

如果继续追问：`Function()` 是否也有`constructor` 属性？可以 console.log() 试试。我们发现，Function函数的构造函数就是本身了。

console.log(Function.constructor); // ƒ Function() { [native code] }

[72742a14f7a74f25b59de29636e03724.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/394373651d59418eb47ea47a7a701396.png
[3ffe533011884c70adf735192d8b132d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9bc0ed967ab34bea8dd28b300e06a203.png
[7652e77e9dd54f2aad3709496613882a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bae7787018704eccafa8990da2265405.png