深入理解构造函数和原型链

使用构造函数初始化对象的过程

function Base(){} //函数声明

var base=new Base() //对象初始化

执行Base()的过程：
- 创建一个名为Base的function对象：
- - 执行function Base(){函数体}本质上相当于var Base=new Function("函数体")；
  - 所以Base对象的构造函数的是Function();
- 为Base对象添加属性：
- - 添加_proto_属性，其属性值Function.prototype,也就说Base对象的原型是其构造函数的prototype属性；
  - - 在任意类似var x=new X()的过程中，都会设置x._proto_=X.prptotype;
  - 添加prototype属性：先用new Object()创建新对象，并为新对象创建constructor属性，属性值设置为Base;最后将该对象赋值给prototype属性；
  - - 因为Base.prototype=new Object()所以Base.prototype._proto_==Object.prototype;
  - 为Base对象添加其他属性，如call,construct,scope,length等属性；
执行var base=new Base()
- 调用Base的construct属性引用的函数，创建一个新object, 假设为x；
- 将Base.prototype赋值给x._proto_属性；
- - 如果Base.prototype不是object,将Object.prototype赋值x._proto_；
- 调用Base.call(x),对x进行初始化；
- 返回x,x就是base;
- 如果Base()使用return返回其他对象，base就是其他对象；

原型链

因为base._proto_==Base.prototype，且Base.prototype._proto_==Object.prototype;

所以base._proto_._proto_==Object.prtotype; //原型链

- 即base继承自Base.prototype,Base.prototype继承自Object.prototype;
原型继承
- 以上原型继承是通过将Base.prototype设置为由Obejct()创建的对象实现的；
- 可以通过将任意的构造函数的prototype属性指定为一个对象，实现继承；

function Case(){};

Case.prototype=base;

var case=new Case();

case.的原型链是Case.prototype(base),Base.prototype,Object.prototype;

对象的constructor属性

由自定义构造函数创建的对象默认没有自己的constructor属性的，只有由Object()创建的对象真正拥有constructor属性；
所以base对象的constructor属性继承自Base.prototype,指向Base();
同样case对象的constructor属性也继承自Base.prototype,指向Base();

红色

对象f的原型是构造函数的prototype属性：F.prototype;
- F.prototype的constructor属性指向f的构造函数F；
F.prototype作为对象其原型是Object.prototype;

青色

构造函数F作为一个对象，其原型是Function.prototype；
- Function.prototype的constructor属性指向F的构造函数Function;

蓝色

Function作为对象其原型是Function.prototype;

黄色

Function.prototype的原型是Object.prototype;
- Object.prototype的constructor属性指向Function.prototype对象的构造函数Object;

紫色

Object作为一个函数，其原型是Function.prototype;

橙色

Object.prototype的原型是null

转载于:https://www.cnblogs.com/qinghe/p/5391558.html

深入理解构造函数和原型链相关推荐

原型 / 构造函数 / 实例/原型链
原型 / 构造函数 / 实例/原型链原型( prototype ): ⼀个简单的对象,⽤于实现对象的属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个 JavaS ...
JS中对象的四种继承方式：class继承、原型链继承、构造函数继承、组合继承（构造函数和原型链继承的结合）
前言才发现之前没有对JavaScript中的继承做过总结,不过看得到是不少,接下来就对这几种继承方式做一下总结. class继承 class继承是ES6引入的标准的继承方式. ES6引入了class ...
原型、原型对象、构造函数、原型链理解
1. 基本概念: "原型属性"也可以叫做"原型"(prototype):所有函数都有prototype,我觉得可以理解为python中的类属性,不需要通过实例, ...
新手理解的JS原型链
一直以来对于JavaScript 的原型链的概念,始终有些东西有一种模糊感,最近刚好有时间就塌下心认真的把<JavaScript高级程序设计>中相关内容认真读了一遍,也查看了很多网上很多资 ...
新手理解的JS原型链 1
一直以来对于JavaScript 的原型链的概念,始终有些东西有一种模糊感,最近刚好有时间就塌下心认真的把<JavaScript高级程序设计>中相关内容认真读了一遍,也查看了很多网上很多资 ...
js深入理解构造函数和原型对象
1.在典型的oop的语言中,如java,都存在类的概念,类就是对象的模板,对象就是类的实例.但在js中不存在类的概念,js不是基于类,而是通过构造函数(constructor)和原型链(prototy ...
JS中关于构造函数、原型链、prototype、constructor、instanceof、__proto__属性
在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中引入 ...
Javascript深入理解构造函数和原型对象
1.在典型的oop的语言中,如java,都存在类的概念,类就是对象的模板,对象就是类的实例.但在js中不存在类的概念,js不是基于类,而是通过构造函数(constructor)和原型链(propoty ...
js构造函数的原型链
年初前端面试,总会遇到面试官询问js的原型链问题,借用一张图片能帮助我们去复习这个问题: 1.每个构造函数都有一个prototype的原型对象,他的作用是为了共享构造方法,节省内存空间. 2.查找的机 ...

深入理解构造函数和原型链

深入理解构造函数和原型链相关推荐

最新文章

热门文章