原文

new关键字做了什么

在JavaScript中,使用new关键字后,意味着做了如下四件事情:

  • 创建一个新的对象,这个对象的类型是object
  • 设置这个新的对象的内部、可访问性和[[prototype]]属性为构造函数(指prototype.construtor所指向的构造函数)中设置的;
  • 执行构造函数,当this关键字被提及的时候,使用新创建的对象的属性;
  • 返回新创建的对象(除非构造方法中返回的是‘无原型’)。

在创建新对象成功之后,如果调用一个新对象没有的属性的时候,JavaScript会延原型链向止逐层查找对应的内容。这类似于传统的‘类继承’。

注意:在第二点中所说的有关[[prototype]]属性,只有在一个对象被创建的时候起作用,比如使用new关键字、使用Object.create、基于字面意义的(函数默认为Function.prototype,数字默认为Number.prototype等)。它只能被Object.getPrototypeOf(someObject)所读取。没有其他任何方式来设置或读取这个值。

样例说明

ObjMaker = function() {this.a = 'first';};

ObjMaker只是一个用于作为构造器的方法,没有其他意义。

ObjMaker.prototype.b = 'second';

与其他函数类似, ObjMaker拥有一个可被我们修改的prototype属性. 我们添加一个属性b给它。与所有对象一样,ObjMaker也拥有一个不可访问的[[prototype]]属性,我们无法对其进行改变。

obj1 = new ObjMaker();

这里发生了三件事情:

  • 一个叫obj1的空对象被创建,首先obj1与{}一致;
  • obj1的[[prototype]]属性被设置为ObjMaker的原型属性的拷贝;
  • ObjMaker方法被执行,所以obj1.a被设置为‘first‘。

    obj1.a;

返回'first'。

obj1.b;

obj1没有'b'属性,所以JavaScript在它的[[prototype]]中查找。它的[[prototype]]与ObjMaker.prototype属性一致。而ObjMaker.prototype属性有一个叫'b'的属性,其值为'second',所以返回'second'。

模仿继承

你可以使用如下的方式实例化ObjMaker类的子类:

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker();

由于这里使用了new关键字,所以SubObjMaker的[[prototype]]属性被设置为ObjMaker.prototype的一个拷贝。

SubObjMaker.prototype.c = 'third';
obj2 = new SubObjMaker();

obj2的[[prototype]]属性被设置为SubObjMaker的prototype属性的一个拷贝。

obj2.c;

返回'third'。来自SubObjMaker.prototype

obj2.b;

返回‘second’。来自ObjMaker.prototype

obj2.a;

返回‘first’。来自SubObjMaker.prototype,这是因为SubObjMaker是使用ObjMaker的构造方法创建的,这个构造方法赋值给a。

『JavaScript』new关键字的更多相关文章

  1. 『JavaScript』核心

    弱类型语言 JavaScript是一种弱类型的语言.变量可以根据所赋的值改变类型.原始类型之间也可以进行类型转换.其弱类型的物质为其带来了极大的灵活性. 注意:原始类型使用值传递,复合类型使用引用传递 ...

  2. 『JavaScript』封装

    封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏.通过封装可以强制实施信息隐藏. 在JavaScript中,并没有显示的声明私有成员的关键字等.所以要想实现封装/信息隐藏就需要从另外的思路出 ...

  3. 『JavaScript』模仿接口

    JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...

  4. 『设计』Laura.Compute 设计思路

    前言: 前一篇文章 <『开源』也顺手写一个 科学计算器:重磅开源> ,继 Laura.Compute 算法开源之后,有 博客园 园友 希望公开一下 Laura.Compute算法 的 设计 ...

  5. 『cs231n』通过代码理解风格迁移

    『cs231n』卷积神经网络的可视化应用 文件目录 vgg16.py import os import numpy as np import tensorflow as tf from downloa ...

  6. 『Matplotlib』数据可视化专项

    一.相关知识 官网介绍 matplotlib API 相关博客 matplotlib绘图基础 漂亮插图demo 使用seaborn绘制漂亮的热度图 fig, ax = plt.subplots(2,2 ...

  7. 『AngularJS』理解$Scope

    理解$Scope 执行概要 在AngularJS,一个子scope通常原型继承于它的父scope.应用于这个规则的表达式是一个使用scope:{...}的指令,这将创建一个『孤岛』scope(非原型继 ...

  8. 『StabilityGuide』| 10+位阿里技术专家共同发起稳定性知识库开源项目

    我们穿过山和大海,也见过人山人海.我们见过各类故障,也排过千雷万险.这一次,不如我们一起,开启稳定性的探索之旅.让无法解决的问题少一点点,让世界的确定性多一点点. 无论是前端业务的开发者,还是后端架构 ...

  9. 『AngularJS』$location 服务

    项目中关于 $location的用法 简介 $location服务解析在浏览器地址栏中的URL(基于window.location)并且让URL在你的应用中可用.改变在地址栏中的URL会作用到$loc ...

随机推荐

  1. apache 配置跨域访问

    在httpd.conf找到  去掉# LoadModule headers_module modules/mod_headers.so 然后在 独立域名配置 加入 Header set Access- ...

  2. HTML5标签应用

    <!doctype html> <html> <head> <style> /* *{border:1px solid red;height:20px} ...

  3. MR中使用sequnceFIle输入文件

    转换原始数据为块压缩的SequenceFIle import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.conf.C ...

  4. 制作npm插件vue-toast-m实例练习

    制作npm插件vue-toast-m实例练习(消息弹窗) 一.使用npm插件 import VueToast from 'vue-toast-demo-cc' Vue.use(VueToast) th ...

  5. 菜鸟笔记 -- Chapter 6.2.2 标识符

    6.2.2  标识符 Java中使用标识符来作为类.方法.字段的名称,在Java基础中我们已经简单了解过标识符的定义方法和驼峰命名.本节我们来研究一下标识符的长度问题,难道类名.方法名都可以无限长吗? ...

  6. 转载:/etc/security/limits.conf 控制文件描述符,进程数,栈大小

    原文地址:http://ilikedo.iteye.com/blog/1554822 linux下安装Oracle 一般都会修改/etc/security/limits.conf这个文件,但是这里面的 ...

  7. Vue组件通讯黑科技

    Vue组件通讯 组件可谓是 Vue框架的最有特色之一, 可以将一大块拆分为小零件最后组装起来.这样的好处易于维护.扩展和复用等. 提到 Vue的组件, 相必大家对Vue组件之间的数据流并不陌生.最常规 ...

  8. Linux 服务器之间文件传输

    linux的scp命令: scp就是secure copy的简写,用于在linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器. 有时我们需要获得远程服务器上 ...

  9. Mybatis中多个参数的问题&&动态SQL&&查询结果与类的对应

    ### 1. 抽象方法中多个参数的问题 在使用MyBatis时,接口中的抽象方法只允许有1个参数,如果有多个参数,例如: Integer updatePassword( Integer id, Str ...

  10. visio studio code 用chrom启动打开本地html

    { // 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述. // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linki ...