JavaScript原型学习笔记

￡神魔★判官ぃ 2022-06-02 01:05 190阅读 0赞

# JavaScript原型学习笔记 #

## 原型 ##

原型，是JavaScript中用来实现继承的东西。JavaScript中每个对象都会有一个\[\[prototype\]\]属性，而所有的对象都是由函数创造的，每个函数都拥有一个prototype属性，使用函数创造出来的实例中的\[\[prototype\]\]属性都会指向创造它的构造函数的prototype属性所指向的对象，而指向的这个对象就叫做原型对象。

描述起来好复杂的样子，还很绕。

拿一个具体代码来看看：

function Girl(age, name) { 
        this.age = age;
        this.name = name;
    }
    var jane = new Girl(18, "Jane");

其中Girl是构造函数，jane是使用构造函数Girl创建的实例对象。

那么按照前面的概念，Girl必然有一个prototype属性了：

![01][]

这个prototype指向的对象中只有一个constructor属性。而创建的实例jane，按照概念拥有一个属性\[\[prototype\]\]，然而这个属性被解释器隐藏起来，不允许用户访问。由于经常有访问这个属性的需求，所以大多数浏览器中都添加了一个\_\_proto\_\_属性来代替\[\[prototype\]\]属性。

因此使用\_\_proto\_\_访问以下试试：

![02][]

和前面Girl的prototype属性是相同的。很显然他们指向了同一个对象。

到这里，基本上了解了什么是原型。其实原型的概念并不复杂，其中最重要的是要搞明白构造函数中的prototype以及对象中的\_\_proto\_\_。

## 作用 ##

JavaScript刚刚诞生的时候，没有类这个东西，其中的继承关系的实现的重担就落到了原型身上。

前面我们也介绍了，每个对象都是由构造函数创造出来的。所以在我看来，JavaScript中的构造函数有那么一丢丢类的意味。在其他的面向对象的语言中，继承关系，是通过类来实现的。在JavaScript中想要实现继承，也是要通过构造函数这个拥有类的味道的构造函数来实现。

使用构造函数创造出来的对象拥有一个共性，就是都拥有`__proto__`属性。而继承的作用不就是改变同一个类创造出来的对象的共性么。因此我们可以通过改变`__proto__`来达到这个效果。`__proto__`指向的对象和构造函数中的prototype是相同的，因此，我们改变构造函数的prototype属性，就可以改变所有的实例的性质，这不就是所谓的继承。

好像有点跑偏，拉回来。

function Girl(age, name) { 
        this.age = age;
        this.name = name;
    }
    var jane = new Girl(18, "Jane");
    Girl.prototype.gender = "female";
    console.log(jane.gender);//female

在jane身上并没有gender这个属性，然而却可以访问，这就是使用原型的效果了。在解释器解释时，如果在某个对象身上没有找到要访问的属性，那么会顺着原型链向上访问，直至找到这个对象，如果最终也没有找到，那么将会输出undefined。

这里出现了一个新的定义，原型链。每个对象都有自己的原型\_\_proto\_\_，原型对象也不例外，所以原型对象也有原型对象，那么原型对象的原型对象也有原型对象，这就形成了一个链式结构，原型链。

既然原型也是个对象，那么我们直接赋一个对象上去，也是可以的。

但是直接赋一个对象上去相当于直接改变了圆形的引用，会导致原来的属性丢失。在刚刚创建完构造函数的情况下，只会导致constructor属性的丢失。但是在其他情况下丢失的可能就不只是constructor了。

上面都还只是修改原型，还算不得真正的继承，继承是要继承自另一个类的。

function Human(gender) { 
        this.gender = gender;
    }
    function Girl(age, name) { 
        this.age = age;
        this.name = name;
    }
    var female = new Human("female");//Human的一个实例
    Girl.prototype = female;//修改Girl的原型指向这个Human的实例Female
    Girl.prototype.constructor = Girl;//修正constructor属性的指向
    var jane = new Girl(18, "Jane");
    console.log(jane.gender);//"female"

这就实现了Girl继承Human，所有Girl的实例都会拥有一个属性gender，并且属性的值是“female”。这感觉，就像是为Girl专门定制了一个父类。因此，Girl其实并不是继承自Human，而是继承自Human的实例female。

## 总结 ##

其实这篇笔记只是总结了原型的最基础的应用以及原型链的实现原理，没有介绍太多的应用。主要是感觉现在理论学习的太多，而实践太少，导致对于其中的精妙之处没有太多的理解。以后如果在工作学习中有了新的心得还会继续更新。如果文章中有错误或者表达不当之处，欢迎指出。

[01]: /images/20220602/af1fbd60962444449474e1bb4505be1b.png
[02]: /images/20220602/e135d72e43044610bb6ef00c409f96e3.png