完全搞懂Function,Object,__proto__,prototype之间的关系

写在开篇以前:记录学习点滴,若有错误与补充,但愿你们积极指正。javascript

有4个规则必定要记住,以下java

  • javascript中一切皆对象,函数也属于对象。
  • 全部对象都含有__proto__。
  • 只有函数才有prototype。
  • 全部函数的默认原型都是Object的实例。

咱们来看一下demobash

var o = {};
    o.__proto__ === Object.prototype  //true
    o instanceof Object      //true
    o instanceof Function    //false
    
    var o = Object();
    o.__proto__ === Object.prototype  //true
    o instanceof Object      //true
    o instanceof Function    //false
    
    var o = new Object();
    o.__proto__ === Object.prototype  //true
    o instanceof Object      //true
    o instanceof Function    //false
    
    function Fn(){}
    var fn = new Fn();
    fn.__proto__ === Fn.prototype;
    
    fn instanceof Fn        //true
    fn instanceof Object    //true
    fn instanceof Function  //false

复制代码

js中一切皆对象,函数也是对象的一种,姑且叫作函数对象。那么FunctionObject是什么关系呢。函数

  • 函数对象都是由Function函数生成的,看下例
function fn(){}
    
    fn.__proto__ === Function.prototype  //true
    fn instanceof Function  //true
    fn instanceof Object    //true
    
复制代码

能够看出当把函数当成对象的时候,函数也有__proto__属性,而且生成它的函数就是Function,那么Function本身呢,由于Function自己也是函数,函数是由Function生成的,那么看下例。学习

Function.__proto__ === Function.prototype  //true
复制代码
  • Object函数也是一个函数对象,也是由Function生成的,那么看下例
Object.__proto__ === Function.prototype  //true
复制代码
  • 对通常函数来讲,prototype是什么呢?以function fn(){}为例子
    看看 fn.prototype的属性等于什么呢
fn.prototype.__proto__ === Object.prototype  //true
    fn.prototype.constructor === fn  //true
复制代码

fn.prototype含有__proto__constructor两个属性,__proto__属性指向Object.prototype,那么通常函数的prototype是由Object函数生成的spa

  • 特殊函数 ObjectFunction

先看看Object.prototypeprototype

能够看出Objectprototype的也是一个object类型的对象,可是和通常函数不同的对方是,他的prototype多出了不少其余的方法,这些是Javascript系统默认的方法。可是好像没有__proto__属性啊,咱们把Object.prototype.__proto__打出来看看3d

这就是Object函数不同的地方了,Object.prototype.__proto__ === null,这就是Javescript原型链的终点了。那为何是这个样子呢?code

typeof Object.prototye === 'object',说明他是一个object类型的对象,若是他是由Object函数生成的,那么Object.prototype.__proto__ === Object.prototype。那么Object.prototype.__proto__指向自身,那么以__proto__属性构成的原型链将没有终点了,因此为了让原型链有终点。Javascript规定,Object.prototype.__proto__ === nullcdn

那么Function又是什么状况呢。

能够看出Function属性的prototype是一个 "function"类型的对象,而不像其余的对象是 "object"对象,那么既然是对象,那也是有__proto__属性的,那么 Function.prototype.__proto__是什么呢

哇哦,看起来和Object.prototype好像啊,那么试一下

那么这又是为何呢?

通常而言,一个"function"类型的对象,应该是由Function函数生成的,也就是Function.prototype.__proto__ === Function.prototype才对,若是是这样的话,也就出现了跟Object同样的问题,一直循环利用,没有尽头。因此Javascript规定,Function.prototype.__proto__ === Object.prototype,Object.prototype.__proto__ === null,是原型链有终点。也就是在原型链的终点处有2个特殊状况。

总结如下

  • 函数含有__proto__prototype属性,__proto__指向Function.prototype,prototype指向Object.prototype,以Array函数为例

  • 全部的类型的[[Prototype]]特性,即 __proto__属性均指向的是 Function.prototype,同时 Function.prototype[[Prototype]]特性,即 __proto__属性又指向了 Object.prototypeObject.prototype__proto__又指向null,即原型链的终点。

下面一些题目,你们分析看看

function fn(){}
 var o = {}
 var o1 = new Object();
 
 typeof fn     //"function"
 typeof fn.prototype   //"object"
 typeof fn.__proto__   //"function"  
 fn.prototype.__proto__ === Object.prototype  //true   全部函数的默认原型都是Object的实例
 fn.__proto__ === Function.prototype          //true   全部函数都是Function生成的
 
 fn instanceof Function  //true  fn是Function的实例
 fn instanceof Object    //true  fn也是Object的实例

 
 typeof o  //"object"
 typeof o.prototype  // "undefined"  由于只有函数才有prototype
 typeof o.__proto__  // "object"
 o.__proto__.__proto__ === null   //true
 
 o instanceof Object   // true o是Object的实例
复制代码

这篇文章写的有些乱,后面再调整吧

相关文章
相关标签/搜索