2019独角兽企业重金招聘Python工程师标准>>>

译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype),值得一读。

  • 原文: JavaScript For Beginners: the ‘new’ operator

  • 译者: Fundebug

为了保证可读性,本文采用意译而非直译。

<div style="text-align: center;"> <img style="width:81.8%;" src="javascript-new-for-beginner/new.jpeg" /> </div>

当你使用new的时候,会:

  1. 创建一个新的空对象;
  2. this绑定到该对象;
  3. 添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype);
  4. 返回该this对象。

如果你没有特别理解,那么我们接下来用例子来详细解释。首先定义一个构造函数Student,该函数接收两个参数nameage

function Student(name, age){this.name = name;this.age = age;
}

现在我们使用new来创建一个新的对象:

var first = new Student('John', 26);

到底发生了什么呢?

  1. 一个新的对象创建,我们叫它obj
  2. this绑定到obj,任何对this的引用就是对obj的引用;
  3. __proto__属性被添加到obj对象。obj.__proto__会指向Student.prototype
  4. obj对象被赋值给first变量。

我们可以通过打印测试:

console.log(first.name);
// Johnconsole.log(first.age);
// 26

接下来深入看看__proto__是怎么回事。

原型(Prototype)

每一个JavaScript对象都有一个原型。所有的对象都从它的原型中继承对象和属性。

打开浏览器开发者控制面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J),输入之前定义的Student函数:

function Student(name, age) {this.name = name;this.age = age;
}

为了证实每一个对象都有原型,输入:

Student.prototype;
// Object {...}

你会看到返回了一个对象。现在我们来尝试定义一个新的对象:

var second = new Student('Jeff', 50);

根据之前的解释,second指向的对象会有一个__proto__属性,并且应该指向父亲的prototype,我们来测试一下:

second.__proto__ === Student.prototype
// true

Student.prototype.constructor会指向Student的构造函数,我们打印出来看看:

Student.prototype.constructor;
//  function Student(name, age) {
//    this.name = name;
//    this.age = age;
//  }

好像事情越来越复杂了,我们用图来形象描述一下:

<div style="text-align: center;"> <img style="width:61.8%;" src="javascript-new-for-beginner/proto.png" /> </div>

Student的构造函数有一个叫.prototype的属性,该属性又有一个.constructor的属性反过来指向Student构造。它们构成了一个环。当我们使用new去创建一个新的对象,每一个对象都有.__proto__属性反过来指向Student.prototype

这个设计对于继承来说很重要。因为原型对象被所有由该构造函数创建的对象共享。当我们添加函数和属性到原型对象中,其它所有的对象都可以使用。

在本文我们只创建了两个Student对象,如果我们创建20,000个,那么将属性和函数放到prototype而不是每一个对象将会节省非常很多的存储和计算资源。

我们来看一个例子:

Student.prototype.sayInfo = function(){console.log(this.name + ' is ' + this.age + ' years old');
}

我们为Student的原型添加了一个新的函数sayInfo -- 所以使用Student创建的学生对象都可以访问该函数。

second.sayInfo();
// Jeff is 50 years old

创建一个新的学生对象,再次测试:

var third = new Student('Tracy', 15);
// 如果我们现在打印third, 虽然只会看到年龄和名字这两个属性,
// 仍然可以访问sayInfo函数。
third;
// Student {name: "Tracy", age: 15}
third.sayInfo();
// Tracy is 15 years old

在JavaScript中,首先查看当前对象是否拥有该属性;如果没有,看原型中是否有该属性。这个规则会一直持续,直到成功找到该属性或则到最顶层全局对象也没找到而返回失败。

继承让你平时不需要去定义toString()函数而可以直接使用。因为toString()这个函数内置在Object的原型上。每一个我们创建的对象最终都指向Object.prototype,所以可以调用toString()。当然, 我们也可以重写这个函数:

var name = {toString: function(){console.log('Not a good idea');}
};
name.toString();
// Not a good idea

创建的name对象首先查看是否拥有toString,如果有就不会去原型中查找。

总结

也许这些概念对你来说有点多,但是当你理解了,使用原型可以让你写出更加高效的代码。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

版权声明

转载时请注明作者Fundebug以及本文地址: https://blog.fundebug.com/2017/05/25/javascript-new-for-beginner/

转载于:https://my.oschina.net/u/3375885/blog/2878505

JavaScript初学者必看“new”相关推荐

  1. JavaScript 初学者必看“箭头函数”

    译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 本文采用意 ...

  2. arma模型_Eviews经典案例 | 初学者必看!ARMA模型精讲

    [本期分析师介绍]希音老师,<数据分析学堂>金牌分析师,对eviews的时间序列.ARMA.VAR.VECM.ARCH.GARCH等操作有深入的研究和实战经验,累计服务客户1000+.今天 ...

  3. 简单的CreateRemoteThread例程-初学者必看

    简单的CreateRemoteThread例程-初学者必看 // _remotethreaddemo.cpp : Defines the entry point for the console app ...

  4. myeclipse文档链接oracle,[数据库]MyEclipse 连接Oracle数据库(初学者必看)

    [数据库]MyEclipse 连接Oracle数据库(初学者必看) 0 2015-05-06 22:03:18 前言:刚接触Oracle数据库,便有一个需求,编写控制台程序,实现主人登录.数据库为Or ...

  5. led驱动电源初学者必看_初学者:如何在Windows 8中查看Metro应用程序的已用驱动器空间...

    led驱动电源初学者必看 In Windows 8 there is no obvious way of checking how much space each Metro app is takin ...

  6. lua菜鸟教程_初学者必看:Lua入门学习教程

    Lua入门学习教程是本文要介绍的内容,主要是来对Lua入门的一个学习,Lua是一个被设计成用于扩展C/C++编程的轻量级脚本语言.不幸的是,网上很少有关于这个语言的在线教程.我主要通过阅读其源代码来了 ...

  7. Qt Designer入门教程 初学者必看

    在Linux下,一个非常流行的RAD工具就是Qt Designer.它是嵌入式公司 Trolltech的Qt软件包的一个组成部分. Qt Designer入门教程 初学者必看是本文要介绍的内容,不说这 ...

  8. 计算机键盘分区,电脑初学者必看键盘五个分区功能知识.doc

    文档介绍: 电脑初学者必看键盘五个分区功能知识,电脑初学者必看键盘基本分区,初学者熟悉键盘,初学者熟悉键盘图片,美发初学者分区要多久,初学者熟悉键盘视频,电脑键盘功能介绍,钢琴键盘示意图简谱,键盘26 ...

  9. 初学者必看篇之国产数据库---达梦

    初学者必看篇之国产数据库-达梦 需要了解的可以点进去看看----达梦官网 首先,写这篇文章的目的是为了把学到的新知识做个总结梳理,同时我也希望在学习的过程中把一些需要注意的细节和大家分享,正所谓,共同 ...

最新文章

  1. windows7 ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
  2. 科大星云诗社动态20220103
  3. # JavaScript中的执行上下文和队列(栈)的关系?
  4. 一千个哈姆雷特,一千个手游开发者
  5. 如何恢复Mac上已删除的文件?
  6. JVisualVM监控
  7. 自动化 夏令营 保研
  8. 阿里云0元注册域名 云服务有了免费入口
  9. 获取素材列表返回40004 invalid media type !(大坑)解决办法
  10. 2021级天狮学院经济管理学院市场营销专升本专业辅导员及新生群
  11. 获取Android_Studio模拟器root权限的方法
  12. 如何专业查看视频/音频/图片信息
  13. influxDB自定义查询时区
  14. 混合多云时代下的传统灾备VS云灾备
  15. R语言ggplot2可视化:patchwork包将一个ggplot2可视化结果和一个plot函数可视化结果横向组合起来形成最终结果图、两个可视化的组合结果对齐、并为组合图像的每个子图添加标题
  16. Discuz如何开发移动端访客功能
  17. [贪心] 奶牛叠罗汉
  18. vce数学考试能用计算机,VCE课程的数学学科
  19. 通过lutris在linux上玩桌面版阴阳师
  20. Anaconda安装及配置(详细版)

热门文章

  1. jQuery之过滤选择器
  2. at org.apache.coyote.http11.AbstractOutputBuffer.checkLengthBeforeWrite
  3. Python继承类的方式实现多线程及控制线程数
  4. C与CPP 在线手册查找
  5. MapReduce原理及其主要实现平台分析
  6. 基于HTML5技术的电力3D监控应用(二)
  7. SQL SERVER 2008中用C#定义压缩与解压缩函数
  8. Visual Studio 2010 重构XAML的一个bug
  9. python文件管理
  10. 第三篇 12306自动刷票下单-下单