1. prototype/__proto__/constructor

JS原型链和继承网上已经烂大街了,5毛可以买一堆,这里只提一下:

constructor:普通对象和函数对象都有,指向创建它的函数

prototype: 函数对象才有,指向构造函数的原型对象(另一个普通对象)

__proto__: 普通对象和函数对象都有,指向创建它的构造函数的原型对象

function Fun1(){};
Fun1.prototype.constructor == Fun1 //true
var f2 = new Fun1();
f2.__proto__ == Fun1.prototype //true

2. 对象实例的创建过程

当实例化新对象时,JS将使用与来自相同构造函数的先前对象相同的初始隐藏类创建它们。

当添加属性时,对象从一个隐藏类转换为另外一个隐藏类,通常遵循所谓的“转换树”中的先前转换。例如,如果我们有以下构造函数:

function fun1(){
this.a = 1;
this.b = 2;
}

创建过程大致如下(对于普通对象{a:1, b:2}也会有类似的过程):

fun1:  M0  {}

     |

this.a: M1  {a:?}

     |

this.b: M2  {a:?,b:?}

  • 初始化一个对象时(如: var o = new fun1()),会使用一个附加在fun1上的没有任何属性的初始隐藏类M0。
  • 当添加一个属性a时,会从隐藏类M0转变为M1以描述新的属性a。
  • 当再次添加属性b时,会得到M2来体现属性a和b。

在第二次用同样的构造函数创建一个新的对象实例时(如: var o2 = new fun1()),会复用M0,M1和M2。

这种机制有下面几个优点:

  1. 只有第一次创建对象实例时会有比较大的性能开销,接下来如果再次创建实例时,将会复用之前的缓存,速度很快。
  2. 这种方法创建的对象实例通常比采用创建整个属性字典的对象实例要小,仅需要存储值在对象实例中而不必存储属性相关信息。
  3. 使用唯一的位置来存储隐藏类,可以很快的被再次使用。

可以参考如下:

     M0

     {}

     |

     M1

    {a:?}

    /  \

   M2  M3

{a:?,b:?}  {a:?,c:?}

3. prototype的创建过程

与实例的创建过程不同,原型的创建过程并不会使用隐藏类,因为原型prototypes通常情况下是一个唯一的对象,并且不会被其他的不同对象所共享结构。

  • 不同对象将拥有不同的原型,共享原型并不会带来性能上的收益,因此没有必要。
  • 原型通常只会创建一次,为原型创建隐藏类只会带来很多无用的内存碎片。

Prototype创建有二个主要的阶段:

  1. 建立

    原型在建立阶段使用dictionary键值对存储,速度非常快。对比隐藏类的建立过程,使用键值对存储不会切换到底层运行环境。
  2. 使用

    任何对原型的访问,或者通过原型链的访问,都会切换到使用阶段。
function Foo() {}
// Prototype在'建立'模式
var proto = Foo.prototype;
proto.method1 = function() { ... }
proto.method2 = function() { ... } var o = new Foo();
// 从'建立'模式切换到'使用'模式
o.method1(); // 同样切换到'使用'模式
proto.method1.call(o);

4. prototype优化

那么了解上面的原型创建过程有什么用呢?

JS很难在编译阶段进行代码分析,即使某个类被用作原型。当我们发现一个类被当做原型,如:

var o = {x:1};
func.prototype = o;

因为原型是可以改变的,因此以上代码并不能确定O被用作原型,除非直到所有步骤结束。

所以:JS不得不首先进行隐藏类的创建过程,并转化为原型建立过程,这非常消耗性能。

那么应该怎么做呢?如下:

var o = {};
func.prototype = o;
o.x = 1;

如果一个对象要作为原型,那么尽量在给对象添加属性之前就把该对象赋给原型属性。

更好的方式是下面这种:

func.prototype = Object.create(…);
func.prototype.method1 = …
func.prototype.method2 = …

最后,优雅的写法是:

var proto = func.prototype = Object.create(…);
proto.method1 = …
proto.method2 = …

JavaScript 原型和对象创建底层原理的更多相关文章

  1. JavaScript 对象属性底层原理

    对象属性类型 1. 数据属性 [[Configurable]]:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,特性默认值为true [[Enum ...

  2. JS原型链与instanceof底层原理

    一.问题: instanceof 可以判断一个引用是否属于某构造函数: 另外,还可以在继承关系中用来判断一个实例是否属于它的父类型. 老师说:instanceof的判断逻辑是: 从当前引用的proto ...

  3. 浅谈系列之 javascript原型与对象

    在我学习与使用javascript三个月中,我一直对javascript的继承关系以及prototype理解不清,导致很多时候为什么这么用说不出个所以然来.截止到本周为止,通过之前的学习以及自己的再学 ...

  4. 【JavaScript回顾】对象创建的几种模式

    组合使用构造函数模式和原型模式 创建自定义类型的常见方式,就是组合使用构造函数模式与原型模式.构造函数模式用于定义实 例属性,而原型模式用于定义方法和共享的属性.结果,每个实例都会有自己的一份实例属性 ...

  5. javascript中的对象创建与继承

    js是一门基于原型的面向对象语言,与传统的面向对象如Java,C#相比,它在对象创建及继承上有自己独特的实现方式,本文主要描述js中对象创建及继承的一些实践. 1.对象创建 方式一:工厂模式创建对象 ...

  6. javascript ActiveXObject FileSystemObject 对象,创建、复制、删除、读取文件等

    Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高 ...

  7. 深入 JavaScript 中的对象以及继承原理

    ES6引入了一个很甜的语法糖就是 class, class 可以帮助开发者回归到 Java 时代的面向对象编程而不是 ES5 中被诟病的面向原型编程. 我也在工作的业务代码中大量的使用 class, ...

  8. 【读书笔记】读《JavaScript模式》 - 对象创建模式

    JavaScript是一种简洁明了的语言,其中并没有在其他语言中经常使用的一些特殊语法特征,比如命名空间(namespace).模块(module).包(package).私有属性(private p ...

  9. Javascript属性constructor/prototype的底层原理

    在Javascript语言中,constructor属性是专门为function而设计的,它存在于每个function的prototype属性中. 这个constructor保存了指向function ...

随机推荐

  1. find a lover

    #version_s#1.8#version_e# #update_s#https://files.cnblogs.com/files/dyh221/update_1.zip#update_e#

  2. WEB 设计规范

    WEB端设计规范 一.网页尺寸       一般网站宽为996px:国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤.国内尺寸设置比较保守,这样可以保证 ...

  3. 高性能JavaScript(1)

    ---------------------------------------------------------------------------------------------------- ...

  4. 排序总结(java)

    public class sort { public static void main(String[] args) { int[] arr = {2, 5, 3, 4, 8, 5, 1}; //so ...

  5. 解决虚拟机centos7 无法无法上网问题

    centos无法上网问题 虚拟机设置 网段设置  网关设置 查看本地电脑设置 登录服务器设置  /etc/sysconfig/network-scripts/  下面的 ifcfg-ens33 文件操 ...

  6. Asp.net中时间格式化的几种方法

    1. 数据控件绑定时格式化日期方法:<asp:BoundColumn DataField="AddTime" HeaderText="添加时间" Data ...

  7. Ubuntu如何使用Vscode写C++代码

    (一). 下载Vscode (1). 打开Ubuntu软件 (2). 搜索Vscode,下载并运行. (二). 安装C++ (1). 看到右边的列表,点击最下面的 (2). 然后我们搜索和下载 C++ ...

  8. android获取Context

    如果在Activity方法中,直接使用this. 如果在Activity内部类中,使用Activity.this

  9. centos7.5 时间设置

    # ----- 设置时间同步+时区(上海) ----- rpm -qa ntp || yum -y install ntp systemctl enable ntpd timedatectl set- ...

  10. 《Spring实战》读书笔记——Spring简介

    欢迎大家关注我的微信公众号,共同交流Java相关技术! 使用Spring的目的 Spring是为了解决企业级应用开发的复杂性而创建的,使用Spring可以让简单的JavaBean实现之前只有EJB才能 ...