前言

如果你对原型和原型链的理解还停留在一个很浅的、不置可否的阶段，无妨来看看我的这篇文章，它应该能对你能有所帮忙，如果对你有那么一丢丢帮忙的话，欢送点赞评论加转发。有问题和纳闷的话也能够在评论区留言，我会第一工夫回复大家，如果感觉我的文章哪里有知识点谬误的话，也恳请可能告知，把错的货色了解成对的，对咱们这个行业来说，是致命的。

之前尽管也常常刷原型方面的面试题，然而总是停留在一个很浅的、对知识点不置可否的阶段，而且常常遗记（这点置信大伙也是这样，哈哈哈），趁着元旦假期的最初一天（终于摸起了键盘），跟着b站一个视频过了下相干方面的常识，对此终于有了一个整体的了解。这里对其进行了一个整顿和演绎。

呜呜呜，本猿在这里立誓，将来一周，不论多忙，都须要回顾一遍本文，
否则
否则
掘金永远抽bug 。

先晓得对应关系

prototype：原型
__proto__：原型链（链接点）

  1. 从属关系

    • prototype ： 函数的一个属性 -> 不要想的太简单，其实就是一个一般对象{}
    • __proto__ ： 对象上的一个属性 -> 不要想的太简单，其实就是一个一般对象{}
  2. 对象的__proto__保留着对象的构造函数的prototype
  3. 函数是非凡对象 所以__proto__在函数上也是存在的，且是个function

大家常常疏忽遗记的一点：Object是个办法（构造函数），new Object是个实例对象！！！

console.log(Object) //typeof Object ==='function'console.log(new Object) //typeof new Object ==='object'

constructor

constructor就是实例化对象的构造函数

//test.constructor -> 实例化test对象的构造函数 Testconsole.log(test.constructor===Test) //true//这里集体了解为永无止境的本身调用本身，求解，没找到相干文章。console.log(test.constructor.prototype.constructor===Test) //trueconsole.log(test.constructor.prototype.constructor.prototype.constructor===Test) //true//constructor容许更改function Test2() {    this.a=123}test.constructor=Test2console.log(test)

原型

function Test(){}let test=new Test() //new完之后 test是个实例对象了console.log(test.__proto__===Test.prototype) //依据下面的对应关系表 能够晓得后果为true//Test.prototype也是一个对象，所以他必须也得有__proto__//Test.prototype.__proto__曾经达到起点了,起点是什么，起点就是Object构造函数，所以上面后果为tureconsole.log(Test.prototype.__proto__.constructor===Object)//且 依照下面对应关系中的规定和上条的后果，下条后果也是tureconsole.log(Test.prototype.__proto__===Object.prototype) // //起点为nullconsole.log(Object.prototype.__proto__) //null

能不能形容一下原型链

对象的__proto__保留着对象的构造函数的prototype，prototype又是个对象，所以也有本人的__proto__，这样往返到起点Object.__proto__，这样就造成了一个以__proto__为链接点（为key）值为构造方法的prototype对象的一根链条, 即为原型链。

//__proto__test{      b:333,      a:1,      __proto__:Test.prototype={          c:222,          b:2,          __proto__:Object.prototype={              c:3,              __proto__:null          }      } }

非凡的函数对象

重点：JS中,函数是一种非凡的对象！！！

记住文章结尾的对应关系表

//函数是非凡对象 所以__proto__是存在的，且是个functionconsole.log(Test.__proto__) //functionconsole.log(Test.prototype) //object

Test既然是个函数，那么底层必然也是new Function实现的，那么

//对象的__proto__保留着对象的构造函数的prototypeconsole.log(Test.__proto__===Function.prototype) //true 这里是不是和关系表对应上了，能失常了解const obj={}const obj2=new Object()console.log(Object) //functionconsole.log(typeof Object) //'function'

Function既然是个构造函数，那么他是不是也应该有__proto__和prototype，是的，然而这里有一个非凡的点须要记住。

底层规定规定 ：Function.__proto__===Function.prototype是相等的,且两者返回的都是一个function，我的了解是Function本人结构了本人。

//失常来说函数的Test.prototype应该是个object，//Function.prototype是个function,这也是一个非凡的点typeof Test.prototype==='object' //trueconsole.log(Function.__proto__) // 一个functionconsole.log(Function.prototype) // 一个function//Function既然是函数对象_，那么他的_proto__就指向他的构造函数的prototype，也就是//Function.__proto__===Function.prototype，本人调本人，这样了解是不是也没故障。console.log(Function.__proto__===Function.prototype) //true//Object既然是个构造方法，那么底层也是new Functionconsole.log(Object.__proto__===Function.prototype) //true// 因为Function.__proto__===Function.prototype 所以上面代码是成立的(Object.__proto__===Function.__proto__)===true

hasOwnProperty和in

hasOwnProperty

hasOwnProperty用来判断是否是对象本身的属性（非原型链继承过去的）

let test={    a:1,    b:2}Object.prototype.c=3console.log(test.hasOwnProperty('a')) //trueconsole.log(test.hasOwnProperty('b')) //trueconsole.log(test.hasOwnProperty('c')) //false

in

in用来查看对象是是否蕴含某个属性（蕴含原型链上的属性）

console.log('a' in test) //trueconsole.log('b' in test) //trueconsole.log('c' in test) //trueconsole.log('toString' in test) //trueconsole.log('d' in test) //false

援用

疾速搞懂『原型、原型链』
MDN
首发于istao