当我们在JavaScript中new一个对象的时候，我们到底在做什么

woshicixide 发布于2019-08-26 11:39 / 1906人阅读

摘要：当构造函数没有显式地返回一个值的时候，对其执行操作之后，会返回这个构造函数实例化之后的对象。

JavaScript里实例化一个对象的时候，我们常用的方法就是使用new操作符。

var Foo = function(x, y) {
    this.x = x
    this.y = y
}

var foo = new Foo(1, 2) // Foo {x: 1, y: 2}

那么new操作符到底做了哪些工作？我们可以看一下foo这个对象到底是一个怎样的对象。

首先，foo本身是一个对象，然后，他本身有两个属性，x跟y。同时，在大多数浏览器的控制台上，我们还能看到一个颜色稍浅的属性，叫__proto__，他有两个属性，constructor跟__proto__。

__proto__是一个访问器属性。他指向的是当前对象本身的[[Prototype]]，这个[[Prototype]]并不是一个属性，他只是一个符号，代表的是构造函数Foo的原型对象Foo.prototype的，具体可以参考一下MDN上的描述。

foo.__proto__ === Foo.prototype // true

所以，我们大致描述一下

var Foo = function(x, y) {
    this.x = x
    this.y = y
}

// 1. 创建一个空对象
var foo = {}

// 2. 调用构造函数，并且将构造函数的`this`指向foo
Foo.call(foo, 1, 2)

// 3. foo继承Foo的原型对象
foo.__proto__ = Foo.prototype

等等，虽然我们上面这么写最后foo的确跟new Foo()出来的对象是一样的，但是情况并不仅仅这么简单。

我们知道，new操作符操作的是一个函数，在上面的栗子里，函数Foo并没有显式地返回任何值，所以执行这个函数之后，返回值是undefined。当构造函数没有显式地返回一个值的时候，对其执行new操作之后，会返回这个构造函数实例化之后的对象。

那如果我返回了某个值呢？

var Foo = function(x, y) {
    this.x = x
    this.y = y

    return {
        a: this.x
    }
}

var foo = new Foo(1, 2) // {a: 1}

foo就是执行这个函数之后的返回值，那么这个时候new Foo()跟Foo()就没有任何区别了，所以通常情况下，我们并不会选择在一个构造函数里返回某个值。

特别要注意的是，如果你在构造函数里返回的不是一个对象，而是一个普通的值，比如说一个Number类型或者String类型的值，那么new之后返回的还是实例化之后的对象。

GPU云服务器云服务器云主机在我们工作中的应用我们的服务器在日本我们的服务器在韩国我们的服务器在印尼

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107297.html

继承与原型

摘要：既然构造函数有属于自己的原型对象，那么我们应该能让另一个构造函数来继承他的原型对象咯我们在构造函数内部执行了函数并改变了函数内部的指向其实这个指向的是实例化之后的对象。我们在讨（mian）论（shi）JavaScript这门语言时，总是绕不过的一个话题就是继承与原型链。那么继承与原型链到底是什么呢？我很喜欢的一个聊天模式是：我不能说XX是什么，我只能说XX像什么。也就是说我不直接跟...

My_Oh_My 2019-08-26 11:40 评论0 收藏0
使用 new 操作符内部到底在做什么

摘要：把方法移动到构造函数外部把方法移至外面，这样每次实例化内部的只是全局的引用，这样避免了重复。构造函数什么体内什么都没有，如果有叫做实例方法，实力属性缺点重复敲，造成大量的重复输入。从对象声明开始一步步介绍 1.普通对象声明首先创建自定义对象的最简单方式就是创建一个Object的实例，然后在为他们添加属性和方法，如下所示： var person = new Object(); ...

curlyCheng 2019-08-22 16:39 评论0 收藏0
用愚公移山说明Javascript创建对象的各种姿势

摘要：北山愚公者年且九十面山而居。工厂模式愚小公北山愚小小公北山工厂模式比较明显的一个缺点就是由于生成并返回了一个中间对象，所以不能判断对象的类型。太行、王屋二山,方七百里,高万仞。本在冀州之南,河阳之北....... 嗯，按照惯例，第一句话就是骗你们点进来的。在读本文之前，希望你对Javascript的原型和原型链有一定了解，这有助于你更好的理解本文，之前有写过一篇相关文章，点此...

cartoon 2019-08-26 11:59 评论0 收藏0
What's New in JavaScript

摘要：在和中都保留了数组的强引用，所以在中简单的清除变量内存并没有得到释放，因为还存在引用计数。而在中，它的键是弱引用，不计入引用计数中，所以当被清除之后，数组会因为引用计数为而被回收掉。其实我们主要注意的引用是不计引用计数的，就好理解了。 showImg(https://segmentfault.com/img/remote/1460000019147368?w=900&h=383); 前...

cgh1999520 2019-08-26 13:44 评论0 收藏0
JavaScript 中的 new 到底干了什么，跟原型链又有一些什么联系？

摘要：原文如果按面向对象的思路去讲的，还是很难去理解，我们可以从另一个方向去理解一下它。原文：https://legacy.ofcrab.com/press/javascript-new.html 如果按面向对象的思路去讲 JavaScript 的 new，还是很难去理解，我们可以从另一个方向去理解一下它。你这些人类我是一名程序员，也是一个人，我可能：有一个响亮亮的名称在某一天出...

Cympros 2019-08-23 17:00 评论0 收藏0