JavaScript 学者必看“new”

当你使用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);

// John

console.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;

//  }

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

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,如果有就不会去原型中查找。

原文:https://hackernoon.com/javascript-for-beginners-the-new-operator-cee35beb669e

时间: 2024-10-06 15:36:43

JavaScript 学者必看“new”的相关文章

JavaScript初学者必看“this”

译者按: JavaScript的this和Java等面向对象语言中的this大不一样,bind().call()和apply()函数更是将this的灵活度进一步延伸. 原文: JavaScript: The Keyword 'This' for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 如果对JavaScript的关键字this理解不够深刻,有时候会掉入意想不到的坑.在这里我们总结了5条通用规则来帮助你判断t

JavaScript初学者必看“new”

译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype),值得一读. 原文: JavaScript For Beginners: the 'new' operator 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 当你使用new的时候,会: 创建一个新的空对象: 将this绑定到该对象: 添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype): 返回该this对象. 如果你没有特别理解,那么我们接下来用例子来详细解释.首先定义一

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

译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 本文我们介绍箭头(arrow)函数的优点. 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2); // 4 该函

经典SQL语句大全 学者必看

一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份数据的 device USE master EXEC sp_addumpdevice 'disk', 'testBack', 'c:\mssql7backup\MyNwind_1.dat' --- 开始 备份 BACKUP DATABASE pubs TO testBack 4.说明:创建

15条初学者必看的JavaScript快速小贴士

(本图为:15条初学者必看的JavaScript快速小贴士) 今天小编为了我们的初学JavaScript的小伙伴们简单介绍下这门编程语言,更好的帮助你们来深入的学习它,使用它: JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript 是因特网上最流行的脚本语言. JavaScript 很容易使用!你一定会喜欢它的! 为了能够帮助那些刚开始接触 JavaScript 的人,我

一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容.这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格.本文列举了20个必看的jQuery的导航插件和教程,演示通过jQuery实现一些导航效果,教您如何做一个有创造性和易于使用的导航. 美丽滑出导航 在本教程中,展示了如何创建一个惊人的滑出式菜单或导航.这给出了一个漂亮的效果,使用这种技术可以节省您在网站上一些空间. Search Box with Filte

一个合格的前端工程师必看的书籍

以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列 实践,结合实际中经常遇到的情景环境,来描述如何设计和解决问题,如cookbook系列 深入,讲解一些文化,思路,甚至于哲学上的东西,真正做到深入一种语言去编程,如unix编程艺术,程序员修炼之道等等 那么,目前为止我认为最好的书是: c

人生必看的100部好电影

人生必看的100部好电影 1.<肖申克的救赎> 人人都知道体制的弊端,但是绝大多数人被体制折磨得离不开体制: 也有极个别人坚定自己的信念,他们相信坚持就能达到自由的彼岸. 2.<勇敢的心>经典中的经典,一段荡气回肠的铁血柔情,为正义,为自由而战,男人必看! 3.<阿甘正传>很激励人的电影,让人充满希望.阿甘的精神值得人们永远学习. 4.<指环王>三部曲:<魔戒现身>.<双塔奇兵>.<王者归来>!无法超越的经典!! 友情.正

一生必看的100本书

1<诗经> "所谓伊人 在水一方" ......任何时候,请都不要怀疑,人类文明的光辉顶峰在东方! 2<易经>天行健,君子以自强不息 这本书偶就能读懂这句 易经其实是比天书还天书的天书 建议把这块硬骨头留在最后看 避实就虚嘛 排在第二是因为他确实经典中的经典. “天行健,君子以自强不息”.“地势坤,君子以厚德载物”.意谓:天(即自然)的运动刚强劲健,相应于此,君子应刚毅坚卓,发愤图强:大地的气势厚实和顺,君子应增厚美德,容载万物.译为:君子应该像天宇一样运行不息