原型和原型链的理解

不念不忘少年蓝@ 2024-04-18 15:39 5阅读 0赞

[原型链][Link 1]

[原型链][Link 2]

**原型和原型链的理解:(面试题)**

*  原型：每个函数都有 prototype 属性，该属性指向原型对象；使用原型对象的好处是所有对象实例共享它所包含的属性和方法。
 *  原型链：主要解决了继承的问题；每个对象都拥有一个原型对象，通过\_\_proto\_\_ 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null。

原型的作用：  
1.数据共享 节约内存内存空间  
2.实现继承  
注意：函数也是一个对象，对象不一定是函数。(对象有\_\_proto\_\_属性，函数有prototype属性)此处说明，方便大家理解下文。  
下面我将举例说明为什么要使用原型  
例1：

![执行结果图][70]

每次使用构造函数Person()实例化出对象的时候，就会给每个实例对象的eat()方法和sleep()方法开辟空间。可是当实例化许多对象的时候，就会浪费大量的空间，因为每个实例对象的eat()方法和sleep()的功能都是一样的，所以我们没必要为每个实例对象添加eat()方法和sleep()方法。

这时原型就派上用场了，看下面经过改造的例子：

![执行结果][70 1]

eat()方法和sleep()被添加到了Person()构造函数的原型（prototype）上了。因此只有一份eat()方法和sleep()方法。当实例对象需要使用这些方法的时候就在自己的\_\_proto\_\_属性中找到并调用这些方法实现相应的功能。

现在我们来捋一下构造函数，实例对象，原型对象之间的关系。

如以下代码和图所示：

Person()构造函数的prototype属性是一个对象，实例对象p1的\_\_proto\_\_属性也是一个对象，并且prototype对象和\_\_proto\_\_对象的指向相同。那么我们再回过头来理解一下为什么添加到原型的方法可以是共享的。因为prototype对象和\_\_proto\_\_对象的指向相同，所以将eat()方法和sleep()添加到Person()构造函数的prototype属性上之后，实例对象就可以通过自己\_\_proto\_\_属性去访问eat()方法和sleep()了。

console.dir(Person);
    console.dir(p1);
    console.log(typeof p1.__proto__);//object
    console.log(typeof Person.prototype);//object
    console.log(p1.__proto__ === Person.prototype);//true

![执行效果][70 2]

![关系图][70 3]

\_\_proto\_\_指向该对象所在的构造函数的原型对象。

实例对象和构造函数之间没用直接的关系。原型对象与实例对象之间用原型(\_\_proto\_\_)关联，这种关系叫做原型链。

我是这样理解原型链的(可能不是很准确)我向我爸要零花钱，我爸也没有钱，那么我就向我奶奶要，奶奶要是也没有，就继续找别人要。

那么原型的指向可以改变吗？答案是可以的。

举个例子：

![执行结果][70 4]

![代码图解][70 5]

\_\_proto\_\_指向该对象所在的构造函数的原型对象。如上图所示：Studend()构造函数的原型(prototype)指向了Person()的实例对象（new Person("小华")），所以Studend()的实例对象s1的\_\_proto\_\_也指向了Person()的实例对象((new Person("小华")）。而实例对象((new Person("小华")）的\_\_proto\_\_指向了其所在的构造函数Person()的原型对象在这个原型对象中，找到了eat()方法和sleep()方法。

从这个例子中，可以发现，利用原型可以实现继承。面向对象的编程语言中有（class）类的概念，但是JavaScript不是面向对象的语言，所以js中没有类（class）（ES6中实现了class）,但是js可以模拟面向对象的思想编程，js中通过构造函数来模拟类的概念。

改变原型的指向可以实现方法的继承。借用构造函数继承，主要解决属性的问题

组合继承就是指：将改变原型的指向和借用构造函数两者结合在一起实现继承。

一、原型模式

我们创建的每一个函数都有一个`prototype`(原型)属性，这个属性指向的是通过调用构造函数来创建出来的**对象实例**的**原型对象**，这个原型对象可以让所有对象实例**共享**它所包含的属性和方法。

function Person () {
        
    }
    Person.prototype.name = "xiao";
    Person.prototype.sayName = function () {
        alert('this.name')
    }
    var person1 = new Person();
    var person2 = new Person();
    person1.sayName()  
    console.log(person1.name == person2.name)   // "true"

上面的例子当中我们创建了一个构造函数`Person`，并通过它的`prototype`属性在它的**原型对象**中定义了`name`属性并赋值，然后通过调用构造函数`Person`实例化出来两个对象实例，通过打印出来的值我们可以得知，`person1`和`person2`共享了原型对象中的属性和方法。

构造函数，原型对象和对象实例的关系

我们知道每个函数都有一个`prototype`属性指向函数的原型对象。在默认情况下，所有原型对象都有一个`constructor`(构造函数)属性，这个属性指向了`prototype`属性所在的函数，比如前面的例子中,`Person.prototype.constructor`就指向`Person`。  
另外，当调用构造函数创建一个新实例后，该实例的内部将包含一个`__porto__`属性（仅在Firefox、Safari、Chrome中支持）,这个属性指向的就是构造函数的原型对象。由此我们可以得出以下图示的结论：

通过代码来验证：

# 实例和原型对象之间的关系
    console.log(person.__proto__ == Person.prototype) // true
    
    # 也可以通过isPrototypeOf()和ES5中的Object.getPrototypeOf()方法来判断
    console.log(Person.prototype.isPrototypeOf(person1)) // true
    console.log(Object.getPrototypeOf(person) === Person.prototype) // true
    
    # 原型对象和构造函数的关系
    console.log(Person.prototype.constructor == Person) // true

二、原型链

通过前面我们对构造函数，对象实例和原型对象三者关系的描述可知，实例都包含了指向原型对象的内部指针。  
那么假如现在我们有两个构造函数**A**跟**B**，我们让构造函数**A**的原型对象等于构造函数**B**的实例，根据前面的推论，这个时候**A**的原型对象就包含指向B的原型对象的指针，再假如又有一个构造函数**C**，让**A**的原型对象等于**C**的实例，上述关系依旧成立，以此类推便形成了实例与原型的链条，即原型链，它主要作为JS中实现继承的主要方法。

原型链的基本实现

在上面的代码中，我们没有使用`SubType`默认的原型，而是将`SuperType`的实例赋给它，重写了`SubType`的原型对象；这样一来`SubType.prototype`的内部便具有一个指向`SuperType`原型的指针，原来存在于`SuperType`的实例中的所有属性和方法，现在也存在于`SubType.prototype`中了。  
`instance`同理，还要注意的是由于`SubType`的原型指向了`SuperType`的原型，而`SuperType`的原型的`constructor`属性指向的是`SuperType`构造函数，那么`instance.constructor`也就指向了`SuperType`

原型搜索机制：

当访问一个实例属性或方法时，在通过原型链实现继承的情况下，首先会在实例中搜索该属性，在没有找到属性或方法时，便会沿着原型链继续往上搜索，直到原型链末端才会停下来。  
这里还有一个重要的点，事实上所有引用类型默认都继承了`Object`，而这个继承也是通过原型链实现的，也就是说，所有函数的默认原型都是`Object`的实例，这也是所有自定义类型都会继承`toString()`、`valueOf()`等默认方法的根本原因。

**Object.prototype的原型**

既然所有类型默认都继承了`Object`，那么`Object.prototype`又指向哪里呢，答案是`null`，我们可以通过下面的代码打印试试看:

console.log(Object.prototype.__proto__ === null) // true

`null`即没有值，也就是说属性或方法的查找到`Object.prototype`就结束了。

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
[Link 2]: https://www.cnblogs.com/loveyaxin/p/11151586.html
[70]: https://img-blog.csdn.net/20180815110729917?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzeW1jeHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180815111143318?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzeW1jeHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180815111915664?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzeW1jeHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/2018081511443314?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzeW1jeHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180815144408680?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzeW1jeHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20180815150235472?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzeW1jeHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70