深入原型链与构造器

关于原型和对象

众所周知,一个函数被创建时,会自动分配一个属性叫原型(prototype),而原型中有一个属性叫做构造器(constructor)。constructor指向这个函数本身。

prototype和__ proto __的区别(注:这边的proto其实是两边带下划线的proto,由于简书markdown会自动将两边的下划线转义成强调格式)

  • prototype是函数才有的属性
  • __ proto __是每个对象都有的属性
  • __ proto __ 不是一个规范的属性,只是部分浏览器实现了此属性,对应的标准属性是[[Prototype]]

注:大多数情况下,__ proto __可以理解为 “构造器的原型”,即:

__ proto __ === constructor.prototype

1.所有构造器的constructor都指向Function(构造器有Function Array Object)

2.Function的prototype指向一个特殊匿名函数,而这个特殊匿名函数的__ proto __指向Object.prototype

//函数
var a = function() {};
cosnole.log(a.__proto__); //function() {}
cosnole.log(a.constructor) //function Function() {...} 这里的Function就是构造器
console.log(a.constructor.prototype) //function() {}
// a.__proto__ = a.constructor.prototype


//数组
var b = [];
console.log(b.__proto__); //[Symbol(Symbol.unscopables): Object]
console.log(b.__proto__.__proto__); //Object{} 这才是顶层
console.log(b.constructor); //function Array() {...} 这里的Array就是构造器
console.log(b.constructor.prototype)//[Symbol(Symbol.unscopables): Object]
console.log(b.constructor.prototype.__proto__) //Object {}这才是顶层
//b.__proto__ = b.constructor.prototype

//对象
var c = {};
console.log(c.__proto__); //Object{}
console.log(c.constructor);//function Object() {...} 这里的Object就是构造器
console.log(c.constructor.prototype) //Object{}
//c.__proto__ = c.constructor.prototype

//造物主是__proto__
Array.constructor.prototype  = Array.__proto__//function () {}
Object.constructor.prototype === Object.__proto__//function () {}
Function.constructor.prototype === Function.__proto__//function () {}

//万物之源皆是Object
Function.constructor.prototype.__proto__ === Function.__proto__.__proto__ //Object {}
Object.constructor.prototype.__proto__ === Object.__proto__.__proto__ //Object {}
Array.constructor.prototype.__proto__ === Array.__proto__.__proto__//Object {}



Paste_Image.png

以上这图解释了Object与Function之间的关系,真是变态。

参照:

js原型链图解教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容