JavaScript 系列之一：浅析JavaScript的原型链

最新推荐文章于 2024-09-16 08:47:17 发布

Franklin_hemm_2012

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量461

点赞数

分类专栏： javascript 文章标签： javascript 技术

本文链接：https://blog.csdn.net/Franklin_hemm_2012/article/details/71336685

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

好多的技能和知识只要在选择恰当的方式进行输出，才能够掌握，踌躇良久，决定将自己所看所学的js相关的知识写出来和大家分享，是一系列的内容，后面会持续更新，其中有出错的地方，谢谢大家指正，我会及时的更正。

浅析JavaScript的原型链

会从如下几个方面介绍js的原型链技术

1. 原型链的定义和作用;
2. 原型链和原型的关系。

一、原型链的定义和作用

  字面意思理解原型链是有原型形成的一个链，一环扣一环，之间通过某种关系形成的一条链子。 
实际上原型链是指：我们在js中创造对象实例a的时候，a的原型指向一个另一个原型对像b,b的原型指向  
另一个原型对象c,c指向顶级的对象Object,如此通过原型形成的关系就是原型链。  

上面涉及到很多的新名词，初学者肯定晕了，下面慢慢解释。  
先明白几个概念：  
               1、原型是什么东西？
               2、原型是怎样产生的？
               2、原型的作用？  
1、 原型也是一个对象,js的每个对象都有一个原型(protoType)的属性,这个属性是一个指针，指向的是一个对象，这个对象就是这个对象的原型。  
原型是对象的内部的属性，一般的浏览器是不能通过代码进行直接访问。主流的浏览器(FF和chrome)提供了"__proto__"这个属性能够进行访问。  
会有对象的实例的 __proto__属性指向这个对象的protoType(原型)属性。  
2、js中生成每一个对象的时候，会按照一定的规则生成Prototype这个属性，这个属性所指向的对象，就是原型。  
3.1、基于1和2得知，每个对象都会有一个protoType指向的原型(对象)，这个对象提供了生成对象的基本属性和方法，比如：toString(),valueOf()等。  
3.2、在使用原型模式实现继承时，原型定义的属性和方法，是被多所有的对象所共有的。
3.3、能够构成原型链，将对象串联和顶级对象Object连起来

二、原型链和原型的关系

  有了原型才会有原型链，那么原型链的产生过程是怎样？  
  我们先明白几个概念：  
  1、对象成员;
    1.1、对象是由属性和方法构成，对象是{key:"value"}的形式，如果value是函数，这个对象成员是  
         方法，如果value不是函数，那么这个对象成员是属性。
    1.2、每一个对象都有prototype,指向原型对象。所以，对象的实例除了有自己定义的对象成员外，  
         还有通过prototype从原型对象继承过来的成员，成为原型成员。
  2、构造函数和原型的关系。  
    2.1、由构造函数模式生成的对象时，每个实例通过prototype指向对象原型，对象原型有constructor属性，指向这个构造函数如下所示：  

//对象的混合模式
functiion Book(bookName,price) {
    this.bookName = "123",
    this.price = 123;
}

Book.prototype.hello = function (){
    console.log("it's a book");
}

var book1 = new Book();
var book2 = new Book();
构造函数，原型，实例对象的关系如下所示：

![原型关系图](http://img.blog.csdn.net/20170507170515717?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRnJhbmtsaW5faGVtbV8yMDEy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)