原型和原型链的理解

分手后的思念是犯贱 2022-05-15 03:17 229阅读 0赞

因为这个概念的理解，总是让我绕进去，有点怀疑智商……  
今天好好理解一下这个概念！

先看一个例子：

function Person(){ 
        this.name = 'Mike';
    }
    var person = new Person();
    Person.prototype.say = function(){ 
        console.log('Hello,'+this.name);
    };
    person.say();  //Hello,Mike

上述代码非常简单，**Person原型对象**定义了公共的say方法，虽然此举在构造实例之后出现，但因为原型方法在调用之前已经声明，因此之后的每个实例将都拥有该方法。从这个简单的例子里，我们可以得出：

**原型对象的用途：是为每个实例对象存储共享的方法和属性，它仅仅是一个普通的对象而已。并且所有的实例是共享同一个原型对象，因此有区别于实例方法或属性，原型对象仅有一份。**

所以就会有如下等式成立：`person.say == new Person().say`

亦或者我们也可以这样写

很不幸，person.say方法没有找到，所以报错了。其实这样写的初衷是好的：因为如果想在原型对象上添加更多的属性和方法，我们不得不每次都要写一行Person.prototype,还不如提炼成一个Object来的直接。但是此例子巧就巧在构造实例对象操作是在添加原型方法之前，这样就会造成一个问题：

当`var person = new Person()`时，Person.prototype为：Person \{\}(当然了，内部还有constructor属性),即`Person.prototype`指向一个空的对象\{\}。而对于实例person而言，其内部有一个原型链指针`__proto__`,该指针指向了Person.prototype指向的对象，即\{\}。接下来重置了Person的原型对象，使其指向了另外一个对象,即

Object { say: function}

这时person.proto的指向还是没有变，它指向的\{\}对象里面是没有say方法的，因为报错。 从这个现象我们可以得出：

**在js中，对象在调用一个方法时会首先在自身里寻找是否有该方法，若没有，则去原型链上去寻找，依次层层递进，这里的原型链就是实例对象的`_proto_`属性。**

![这里写图片描述][70]

其实，只需要明白原型对象的结构即可：

Function.prototype = {
            constructor : Function,
            __proto__ : parent prototype,
            some prototype properties: ...
        };

总结：**函数的原型对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针*proto*，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用*proto*一直指向Object的原型对象上，而Object的原型对象用Object.prototype.*proto* = null表示原型链的最顶端，如此变形成了javascript的原型链继承，同时也解释了为什么所有的javascript对象都具有Object的基本方法。**

--------------------

**与原型有关的几个方法和属性总结：**

*  **prototype属性**  
    prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。
 *  **constructor属性**  
    constructor属性存在于原型对象中，他指向了构造函数

*  ***\_proto\_*** 属性(注意：左右各是2个下划线)  
    用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 \[`[prototype]`\] , 这个属性就指向了构造方法的原型对象。

但是在个别浏览器中，也提供了对这个属性\[\[prototype\]\]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：`p1.__proto__`

*  **hasOwnProperty() 方法**  
    大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的\[\[prototype\]\]属性指向的原型。

那么如何判断这个对象的来源呢？

`hasOwnProperty`方法，可以判断一个属性是否来自对象本身。

**注意：**通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。  
也即是说，在原型中的属性和不存在的属性都会返回fasle。

*  in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

[70]: /images/20220515/4bf4ae805434426381a6570349ad2601.png