JS基础(四)-JS中的构造函数

342 阅读3分钟

一、为什么有构造函数?

在JS的世界里,一切数据都是对象,这是JS世界的基石。

这么多的对象,当有一些对象的属性可以重复使用时,总不能每次都创造一个新对象出来。

于是,需要有一种机制来解决这种问题。

其他大部分的面向对象语言,采用的多是“类”这种机制,来实现对象的继承、封装、多态这三大特性。

而JS在设计之初,只是作为在浏览器使用的一门脚本语言,并不希望用完整的“类”体系提高入门的难度,所以JS的创造者采用了另一种方式:构造函数。

也就是说,构造函数也是一种机制,用于实现面向对象的一些基本特性。

二、构造函数到底是什么?

2.1 真的有构造函数吗?

具体来说,JS里并没有“构造函数”这种概念。

函数并没有一种分类是:普通函数,构造函数。

事实上分类的是函数的调用方式

函数的调用方式分为:普通调用和构造函数调用。如:

function Cat(){
	this.color = 'yellow'
}
// 普通调用
Cat()     // undefined
// 构造函数调用
new Cat()   // {color: 'yellow'}

2.2 所以函数的构造函数调用到底有什么不同?

核心是,使用构造函数调用时,处理的事情不同:

  1. 生成一个空对象
  2. 将 this 值指定为这个空对象
  3. 执行代码
  4. 自动返回这个空对象

三、延伸:promise

3.1 new Promise() 是不是异步?

了解完上面的内容就能理解:Promise 是一个普通的函数,而 new Promise 其实是对这个函数进行了 构造函数调用。根本上还是同步

3.2 举个栗子

列出下面代码的输出:

自己对这个题目的理解:

  1. 没有先执行1,很清楚,因为setTimeout是异步函数,要等同步任务执行完才会执行

  2. 没有先执行5而是先执行了2和3。原因是new function() 其实就是正常的函数调用,只是在调用时加了new关键字,只是做的事情不同(创建新对象,绑定this,赋值并返回新对象),但依然是同步任务.

    比较容易混淆的是promise,它是异步,但是是在new Promise() 生成实例后,执行then()方法时才是异步的。 所以先执行同步任务,就是2 3 5

  3. 为什么先执行4最后是1。这个涉及到event loop中对宏任务和微任务的执行顺序。setTimeout属于宏任务,promise属于微任务。执行顺序是 微任务->宏任务。所以打印顺序是4 1

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结,预计会每周至少会更新一篇。

目前我们学习计划是: 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外,工作中用到的一些技术和完成的功能,我们也会及时总结更新在这里

如文章有错误或表述不清晰,欢迎各位留言反馈~~