3-9 原型链

• 一为考察原型链打下基础,一为了解面向对象打下基础

1. 创建对象有几种方法

   通常就三种方法:

   1: 对象字面量的方式

   var obj = {name:'jiangdeng'} // 原型链默认指向Object
   //Object实例方式创建
   var obj2 = new Object({name:'jiangdeng'}) //Object 可以当作是一个构造函数,他可以使用 new 操作符来做
   

   2: 用构造函数来创建对象

   var obj = function(name) {
     this.name = name;
   }
   var obj2 = new obj('jiangdeng')
   

   3:Object.create方法创建

   var obj = {name:'jiangdeng'}
   var obj2 = Object.create(obj)
   

   ​

2. 原型,构造函数,实例,原型链

3-9 原型链（一）.mp4_20171117_170518.344_看图王.jpg

• 实例: 上面例子中的obj,obj2都叫实例,不管它是用哪种方式创建的,只要是new出来的对象它都是实例

• 构造函数: 凡是通过new操作的函数,这个函数就不是一个普通的函数,它是一个构造函数,任何一个函数只要被new操作了,他就可以叫做构造函数

• 构造函数可以使用new运算符来生成一个实例;

• 任何函数都可以当作构造函数,只要你去用new来操作,总之,构造函数也是函数

• 函数都有一个prototype属性,prototype指的就是原型对象

• 声明任何函数的时候,js引擎就会自动创建一个portotype 属性,这个会初始化一个空对象,也就是原型对象

• 原型对象怎么区分自己是被哪一个构造函数引用的呢?这时候constructor就来了,原型对象中有一个constructor(构造器),这个构造器会默认你声明的那个函数

• 实例的_proto_(隐式原型)指向构造函数的原型对象

• 原型链:我从我的一个实例对象往上找构造这个实例相关联的对象,然后这个相关联的对象再往上找,他又有创造他的上一级的原型对象,一直这么找,,直到Object.prototype终止,这个原型链就断掉.也就是说Object.prototype是这个链式结构的顶端.

• 在访问一个实例上的属性或方法时,如果这个实例本身上没有找到这个方法,就就会往他的原型对象上去找,通过_proto_去找它上一级的原型对象上找,如果他上一级的原型对象还是没有这个属性,他会在他原型对象的基础上再通过原型对象的_proto_再往上级查找,依次类推,直到找到Object.prototype

• 原型链是通过什么完成这个向上查找呢?就是通过_proto_属性和prototype(原型)

• 原型链和原型对象他们到底起了一个什么样的作用:构造函数中增加了很多属性和方法,实例就可以公用这些属性和方法,当他们有一些共同的东西我们可以存到原型对象上

• 注意:1: 只有函数才有prototype,对象是没有prototype的; 2: 只有实例对象才有_proto_,函数的_proto_ === Function.prototype,因为函数也是一个对象

• 实例怎么跟原型对象产生关联呢,也就是构造函数的prototype属性

  ​

3. instanceof的原理

3-9 原型链（一）.mp4_20171120_173322.885_看图王.jpg

• 虽然实例对象是由构造函数产生的,但是实例对象的这个_proto_属性和构造函数本身没有什么关联,它关联的是构造函数下面的通过prototype所引用的原型对象

• 原型对象也是一个对象,它也有_proto_属性,它的终端是Object.prototype

   var M = function (name) {this.name = name};
   var o3 = new M('o3');
  
  

  o3 instanceof M < true
  o3 instanceof Object < true
  o3.__proto__ === M.prototype < true
  M.prototype.__proto__ === Object.prototype < true
  o3.__proto__.constructor === M < true
  o3.__proto__.constructor === Object < false
  

     var p = {name: 'p'}
     var o4 = Object.create(p)
     o4 >{};
     o4.__proto__ >{name: "p"}
  

  • 为什么name 属性不直接在o4这个对象上? 在js引擎查找这个对象的属性时,o4它本身是一个空对象,空对象是没有这个name属性的,这个属性是在它的原型对象上的,也就是说Object.create()方法是把参数中的对象作为一个新对象的原型对象赋给o4的,o4本身是不具备这个属性的,是通过原型链来连接它的原型对象的

• 用constructor判断一个实例对象是否属于某个构造函数用instanceof更加严谨

4. new运算符

3-10 原型链（二）.mp4_20171120_184108.243_看图王.jpg

​

• 首先 new 操作符后面跟的是一个构造函数,new运算符的第一个步骤就是一个新对象的创建,你可以理解为一个字面量对象,一个空对象被创建了,它是怎么关联到实例对象中去的呢
• 1. 一个新对象被创建了,它继承自构造函数的原型对象,这个空对象指向这个构造函数的原型对象
• 2. 新创建的对象要和this相关联,不然的话,你没办法把构造函数的上下文转到这个新实例上,就没办法与这个新实例对象相关联