js 原型链继承__proto__、prototype简析

js中的继承关键是靠__proto__属性实现的
prototype属性的职责是将原型链中的数据放入__proto__中的中介，即我们在new 一个对象的时候

js中有两种对象，即函数对象和普通对象

• 函数对象： 凡是通过new Function()创建的都是函数对象
  函数对象属性包含__proto__和prototype两个属性；而普通对象有__proto__没有prototype属性，
  像 Number;Object;Array都是函数对象

//例如 var a = function(){};  function a(){}; var a = new Function(); var a = Function();

• 普通对象： 不是通过new Function()创建的对象

//例如
 var a = 1 即(a = new Number(1)); var a = 'hello'即(a = new String(1));var a = []即(a = new Array());

• __proto__
  主要用来回溯对象，即用来继承的，即当执行a.b的时候，如果当前对象没有定义b属性，则会通过a.__proto__到父对象中查找，以此类推

• prototype
  *其值是函数创建的时候创建了一个它的实例对象，并赋值给prototype，其作用是将值传递给实例对象的__proto__，以实现继承

• 实例代码  Function
  主要演示函数对象Function的__proto__属性以及prototype属性的值

   console.log('--------------------------------函数对象Function--------------------------------------'); //函数对象Function   Function.prototype === Function.__proto__  (true)
 //此例比如 var temp = new Function();Function.prototype = temp;//所以Function.prototype 为function
 console.log('Function.prototype:',Function.prototype); console.log('Function.__proto__:',Function.__proto__); //原始对象Object
 console.log('Function.prototype.__proto__:',Function.prototype.__proto__); console.log('Function.__proto__.__proto__:',Function.__proto__.__proto__); //一切的起点null 所有对象通过__proto__回溯都会找到null
 console.log('Function.prototype.__proto__.__proto__:',Function.prototype.__proto__.__proto__); console.log('Function.__proto__.__proto__.__proto__:',Function.__proto__.__proto__.__proto__); //会抱错，null是起点 null没有__proto__属性 不能在回溯console.log('Function.prototype.__proto__.__proto__.__proto__:',Function.__proto__.__proto__.__proto__.__proto__);console.log('Function.__proto__.__proto__.__proto__.__proto__:',Function.__proto__.__proto__.__proto__.__proto__);

• chrome下输出

  
  

  

  1.png

• 实例代码  Number
  主要演示函数对象Number的__proto__属性以及prototype属性的值

   console.log('--------------------------------函数对象Number--------------------------------------'); //函数对象Number  其实可以理解为var Number = new Function();
 //原型对象prototype的值实际是函数创建的时候创建了一个它的实例对象，并赋值给prototype//此例比如  var temp = new Number();Number.prototype = temp;Number.prototype 为Number的实例对象，是普通对象,继承自Object//所以typeof Number.prototype 为 Object//Number为Function的实例对象，而Function.__proto__为function ,//所以typeof Number.__proto__ 为 functionconsole.log('Number.prototype:',Number.prototype);console.log('Number.__proto__:',Number.__proto__);console.log('typeof Number.prototype:',typeof Number.prototype);console.log('typeof Number.__proto__:',typeof Number.__proto__);//原始对象Objectconsole.log('Number.prototype.__proto__:',Number.prototype.__proto__);console.log('Number.__proto__.__proto__:',Number.__proto__.__proto__);//原始对象 无中生有的无 即null，console.log('Number.prototype.__proto__.__proto__:',Number.prototype.__proto__.__proto__);console.log('Number.__proto__.__proto__.__proto__:',Number.__proto__.__proto__.__proto__);//会抱错，因为null没有__proto__属性console.log('Number.prototype.__proto__.__proto__.__proto__:',Number.__proto__.__proto__.__proto__.__proto__);console.log('Number.__proto__.__proto__.__proto__.__proto__:',Number.__proto__.__proto__.__proto__.__proto__);

• chrome下输出

  
  

  

  2.png

• 实例代码  Object
  主要演示函数对象Object的__proto__属性以及prototype属性的值

console.log('--------------------------------函数对象Object--------------------------------------');console.log('Object.prototype:',Object.prototype);console.log('Object.__proto__:',Object.__proto__);console.log('typeof Object.prototype:',typeof Object.prototype);console.log('typeof Object.__proto__:',typeof Object.__proto__);//原始对象 无中生有的无 即null，console.log('Object.prototype.__proto__:',Object.prototype.__proto__);//Objectconsole.log('Object.__proto__.__proto__:',Object.__proto__.__proto__);//nullconsole.log('Object.__proto__.__proto__.__proto__:',Object.__proto__.__proto__.__proto__); 
//抱错//console.log('Object.prototype.__proto__.__proto__:',Object.prototype.__proto__.__proto__);

• chrome下输出

  
  

  

  3.png

• 实例代码
  主要演示普通对象的__proto__属性以及prototype属性的值

console.log('--------------------------------普通对象--------------------------------------'); //例如 var a = 1 即(a = new Number(1)); var a = 'hello'即(a = new String(1));var a = []即(a = new Array());
   function obj(){    this.a = 1;this.b = 2; }
    obj.prototype.pMethod=function(){    console.log('ddd');
   }   var c = new obj();//普通对象c 没有prototype属性，所以typeof c.prototype 为 Object//c为Function的实例对象，而Function.__proto__为function //所以typeof c.__proto__ 为 functionconsole.log('c.prototype:',c.prototype);  //undefined//我们再来看看__proto__的定义：他的值是创建实例对象的时候对应的函数对象的原型对象//即obj.prototype = new obj();//obj.prototype.pMethod=function(){console.log('ddd');}//c.__proto__ = obj.prototype;//此时__proto__中有obj实例对象以及pMethod函数、__prototype__ 属性
   console.log('c.__proto__:',c.__proto__);//如果我们这样定义原型链函数
   obj.prototype = {    pMethod:function(){     console.log('ddd');
    }
   }   var c = new obj();   //__proto__的定义：他的值是创建实例对象的时候对应的函数对象的原型对象
   //即obj.prototype = new obj();
   //obj.prototype= {pMethod:function(){console.log('ddd');}}
   //c.__proto__ = obj.prototype
   //此时__proto__中有pMethod函数、__prototype__ 属性
   console.log('c.__proto__:',c.__proto__);   //原始对象Object
   console.log('c.__proto__.__proto__:',c.__proto__.__proto__);   //原始对象 无中生有的无 即null，
 console.log('c.__proto__.__proto__.__proto__:',c.__proto__.__proto__.__proto__);//会抱错，因为null没有__proto__属性 //console.log('c.prototype.__proto__.__proto__.__proto__:',c.__proto__.__proto__.__proto__.__proto__);

• chrome下输出

  
  

  

  4.png

总结

一个对象的proto记录着自己的原型链，决定了自身的数据类型，改变proto就等于改变对象的数据类型。
函数的prototype不属于自身的原型链，其值是创建函数对象的实例，它是子类创建的核心，决定了子类的数据类型，是连接子类原型链的桥梁。
在原型对象上定义方法和属性的目的是为了被子类继承和使用

作者：zhifeichuan
链接：https://www.jianshu.com/p/2e0e9fe717d6