JS 原型和原型链

230 阅读1分钟

一、对应名称

1、prototype

原型

2、__ proto ___

隐式原型 或 原型链 或 链接点

二、从属关系

示例函数

  function Test() {
     this.a = 1
   }

1、prototype

它属于函数,是函数的 prototype (原型)属性,它就是一个对象;只有类型为 function 才有 .prototype

 console.log(typeof Test);//function
 console.log(Test.prototype instanceof Object); // True
 console.log(Test.prototype); // 它是函数的原型(prototype)的一个属性

2、__ proto ___

它属于 Object (对象)的一个属性,它就是一个对象;只有类型为 Object 才有 .__ proto__

let t = new Test()
   console.log(t instanceof Object); //True
   console.log(t.__proto__); // 对象 Object 的一个属性
   console.log(t.__proto__ instanceof Object,); //True

3、Object (对象)的 __ proto __ 保存着该对象的构造函数的 prototype

 console.log(Test.prototype === t.__proto__);//true;对象的 __proto__ 保存着该对象的构造函数的 prototype
 console.log(Test.prototype.__proto__ === Object.prototype);//true
 console.log(t.__proto__.__proto__ === Object.prototype); //true
 
 let f = new Object
     console.log(f instanceof Object); //True
     console.log(f.__proto__); // Object.prototype 是这个原型链的顶端

得出 Object.prototype 是原型链的顶端

4、原型链

1、原型链是 一个对象为基准 以 __ proto __ 为连接的这条链条 一直到 Object.prototype 为止的这个链 叫 原型链

2、以对象原型为节点连接起来的一个链条 叫原型链

console.log(t.__proto__.__proto__ === Object.prototype); //true

三、Function 和 Object 的关系

 console.log(Test.__proto__ === Function.prototype);//true
 console.log(Function.__proto__ === Function.prototype);//true 底层规定好的
 console.log(typeof Object);//function
 console.log(Object.__proto__ === Function.prototype);//true
 console.log(Object.__proto__ === Function.__proto__);//true 结论

四、constoructor

console.log(t.constructor === Test);//true constructor指向可以被改变

总结:只有函数才有 prototype;只有 object 才有 __ proto __

总结:
 let t1 = new Test()
 console.log(t1.__proto__ === Test.prototype)//true 实例.__proto__ === 原型
 console.log(t1.__proto__.constructor === Test)//true 实例.constructor === 构造函数
 console.log(Test.prototype.constructor === Test)//true 原型.constructor === 构造函数
 

本文来自B站 前端小野森森-1老师的讲解 以及自己的理解 希望路过的大佬指点指点 2A19EF0F.png