JavaScript 进阶营技术干货程序猿阵线联盟-汇总各类技术干货

粗暴理解__proto__ 与prototype 的指向

2018-03-01  本文已影响0人  会会会会

一、准备代码:


function  Fun(){this.say ="hello"};

var obj = {name:"piter"};

var fun = new Fun();

构造函数:Object,Function,Fun;

对象:obj,fun,Object,Function,Fun;

__proto__:指针,指向(其构造函数的)prototype

prototype:方法,有__proto_属性

二、首先把几个要点总结起来,第4点圈起来


划重点来了

1.每个对象(包括函数,构造函数都是对象,js里面一切皆对象),都有个__proto__属性;prototype(作为方法,也是对象)有__proto__;

以上都有__proto__

2.每个构造函数(包括js内置对象如Function,Obeject),都有一个prototype方法;(Object,Function,Fun等)

3.实例出来的对象没有prototype属性;       (obj,fun没有,为undefined)

4.每个对象的__proto__都指向其构造函数的prototype方法;

实例出来的fun,obj在整个链子的最后

  fun.__proto__ ===  Fun.prototype     //(true)

 Fun.__proto__ === Function.prototype     //(true)

 Function.__proto__ === Function.prototype  //(true)

 Function.prototype.__proto__ === Object.prototype    //(true)

  Object.prototype.__proto__  ===  null;

  Object.prototype.__proto__在整个链子的最初

5.一切的终端 最后指向 Object.prototype.__proto__ 指向 null;

6.构造函数同时有__proto__和prototype;意思就是构造函数是承上启下的纽扣

7.obj是被Object构造出来的;

obj.__proto__=== Object.prototype  //(true)

最后记住 __proto__(对象的) 指向 prototype ,   prototype(构造函数的) 有__proto属性,顺序很重要  

思考问题:

1.为什么没有__proto__是null,没有prototype是undefined?

2.var hi = new Fun() 和 var hi = new Fun有什么区别?

3.为什么__proto__和 prototype 在控制台是灰的?和不是灰的属性有什么区别?

4.把 fun.prototype = Fun.__proto__  ,这样可以不可以看成fun也是一个具有prototype的构造函数? 但是实验错误,显性和prototype 和隐性的prototype有什么区别?

报错?

5.隐性的constructor 是干嘛用,为什么是个无底洞?

以下是有趣实验,帮助加深理解


  1️⃣  fun.constructor.prototype.constructor.prototype   ...为什么可以一直这样下去?

  2️⃣fun.constructor.prototype.__proto__ === Object.prototype   //(true),不难理解,

  3️⃣  var con = new Fun.constructor; con有prototype,意味着con也是个构造函数

        var cnn = new con; //cnn是个空实例对象,也就是说其实这里,con与Fun是同级构造函数了

        cnn.__proto__ === Fun.constructor.prototype //true

1.每个对象都有 constructor

2.Fun.constructor.__proto__ ===  Function.prototype    //true

3.constructor是一个构造函数,可以实例对象

6.最后一点,这个三个属性,在具体实操中有什么常用的应用?可以达到什么目标?(比如性能提速,精简代码)

上一篇下一篇

猜你喜欢

热点阅读