美文网首页
深入原型链与构造器

深入原型链与构造器

作者: JohnsonChe | 来源:发表于2017-02-15 19:03 被阅读87次

关于原型和对象

众所周知,一个函数被创建时,会自动分配一个属性叫原型(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原型链图解教程

相关文章

  • 深入原型链与构造器

    关于原型和对象 众所周知,一个函数被创建时,会自动分配一个属性叫原型(prototype),而原型中有一个属性叫做...

  • 2018-01-09 关于javascript原型链的思考 pl

    s 深入理解原型和原型链? 构造函数 理解原型和原型链 new的时候js都干了什么? 一个实现继承的demo 构造...

  • JavaScript深入之从原型到原型链

    JavaScript深入系列的第一篇,从原型与原型链开始讲起,如果你想知道构造函数的实例的原型,原型的原型,原型的...

  • js集成

    原始继承模式--原型链 2:借用构造函数 3:共享构造原型 4:圣杯模式原型链; 构造函数; 共享原型; 圣杯模式...

  • JavaScript之深入多种继承方式

    一、前言 上一篇文章讲解了JavaScript之深入原型与原型链,继承本质就是在构造函数和原型上进行一系列的操作,...

  • 原型链以及方法执行顺序

    前言 快节奏的世界,大家都想要快,因此我把构造函数与原型链分文章说明。想具体了解构造函数与原型、原型链之间的关系可...

  • js 集成模式 07-24

    **原始继承模式--原型链 2:借用构造函数 3:共享构造原型 4:圣杯模式**一:原型链; 二:构造函数; 三:...

  • object.prototype

    Object.prototype:所有原型链的顶端01 constructor:构造器属性,指向的构造函数 - O...

  • 继承大法好

    原型链方法(仿传统) 所属模式: 基于构造器工作模式 使用原型链模式(ECMA标准中的默认继承机制) 提示:我们可...

  • ES5里面的对象和继承

    构造函数和原型链 注意:原型链上面的属性会被多个实例共享,而构造函数不会 web类继承Student类 原型链 ...

网友评论

      本文标题:深入原型链与构造器

      本文链接:https://www.haomeiwen.com/subject/ccoqwttx.html