一、为什么有构造函数?
在JS的世界里,一切数据都是对象,这是JS世界的基石。
这么多的对象,当有一些对象的属性可以重复使用时,总不能每次都创造一个新对象出来。
于是,需要有一种机制来解决这种问题。
其他大部分的面向对象语言,采用的多是“类”这种机制,来实现对象的继承、封装、多态这三大特性。
而JS在设计之初,只是作为在浏览器使用的一门脚本语言,并不希望用完整的“类”体系提高入门的难度,所以JS的创造者采用了另一种方式:构造函数。
也就是说,构造函数也是一种机制,用于实现面向对象的一些基本特性。
二、构造函数到底是什么?
2.1 真的有构造函数吗?
具体来说,JS里并没有“构造函数”这种概念。
函数并没有一种分类是:普通函数,构造函数。
事实上分类的是函数的调用方式。
函数的调用方式分为:普通调用和构造函数调用。如:
function Cat(){
this.color = 'yellow'
}
// 普通调用
Cat() // undefined
// 构造函数调用
new Cat() // {color: 'yellow'}
2.2 所以函数的构造函数调用到底有什么不同?
核心是,使用构造函数调用时,处理的事情不同:
- 生成一个空对象
- 将 this 值指定为这个空对象
- 执行代码
- 自动返回这个空对象
三、延伸:promise
3.1 new Promise() 是不是异步?
了解完上面的内容就能理解:Promise 是一个普通的函数,而 new Promise 其实是对这个函数进行了 构造函数调用。根本上还是同步
3.2 举个栗子
列出下面代码的输出:
自己对这个题目的理解:
-
没有先执行1,很清楚,因为setTimeout是异步函数,要等同步任务执行完才会执行
-
没有先执行5而是先执行了2和3。原因是new function() 其实就是正常的函数调用,只是在调用时加了new关键字,只是做的事情不同(创建新对象,绑定this,赋值并返回新对象),但依然是同步任务.
比较容易混淆的是promise,它是异步,但是是在new Promise() 生成实例后,执行then()方法时才是异步的。 所以先执行同步任务,就是2 3 5
-
为什么先执行4最后是1。这个涉及到event loop中对宏任务和微任务的执行顺序。setTimeout属于宏任务,promise属于微任务。执行顺序是 微任务->宏任务。所以打印顺序是4 1
<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结,预计会每周至少会更新一篇。
目前我们学习计划是: 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外,工作中用到的一些技术和完成的功能,我们也会及时总结更新在这里
如文章有错误或表述不清晰,欢迎各位留言反馈~~