关于javascript:2022年元旦我终于搞懂了原型和原型链

前言

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

之前尽管也常常刷原型方面的面试题，然而总是停留在一个很浅的、对知识点不置可否的阶段，而且常常遗记（这点置信大伙也是这样，哈哈哈），趁着元旦假期的最初一天（终于摸起了键盘），跟着 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 对象的构造函数 Test
console.log(test.constructor===Test) //true

// 这里集体了解为永无止境的本身调用本身，求解，没找到相干文章。console.log(test.constructor.prototype.constructor===Test) //true
console.log(test.constructor.prototype.constructor.prototype.constructor===Test) //true
//constructor 容许更改
function Test2() {this.a=123}
test.constructor=Test2
console.log(test)

原型

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

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

// 对象的__proto__保留着对象的构造函数的 prototype
console.log(Test.__proto__===Function.prototype) //true 这里是不是和关系表对应上了，能失常了解

const obj={}
const obj2=new Object()

console.log(Object) //function
console.log(typeof Object) //'function'

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

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

// 失常来说函数的 Test.prototype 应该是个 object，//Function.prototype 是个 function, 这也是一个非凡的点
typeof Test.prototype==='object' //true

console.log(Function.__proto__) // 一个 function
console.log(Function.prototype) // 一个 function
//Function 既然是函数对象_，那么他的_proto__就指向他的构造函数的 prototype，也就是
//Function.__proto__===Function.prototype，本人调本人，这样了解是不是也没故障。console.log(Function.__proto__===Function.prototype) //true

//Object 既然是个构造方法，那么底层也是 new Function
console.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=3
console.log(test.hasOwnProperty('a')) //true
console.log(test.hasOwnProperty('b')) //true
console.log(test.hasOwnProperty('c')) //false

in

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

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

援用

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