From 45aa0b82da22ee14daac36879fbe2caf1f0fb497 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= <1849613717@qq.com> Date: Tue, 14 Sep 2021 11:42:58 +0800 Subject: [PATCH 01/15] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e44a64f..65b1eeb 100644 --- a/README.md +++ b/README.md @@ -21,17 +21,37 @@ 成功采纳后，如果你面试遇到其他问题，笔者可以提供免费解答服务。 -### 今日原题 +### 变量提升 -第一题：[以下代码输出什么，为什么？](https://github.com/KieSun/fucking-frontend/issues/1)。 +- 为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 +- JavaScript 只会提升声明，不会提升其初始化。如果一个变量先被使用再被声明和赋值的话，使用时的值是 undefined + ```js +console.log(yck) 输出结果 undefined +var yck='大佬'; + ``` + +- 用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 ```js -try { - (async function() { a().b().c() })() -} catch (e) { - console.log(`执行出错：${e.message}`) -} +console.log(typeof yck) ReferenceError +let yck='大佬'; ``` +```js +console.log(typeof yck) undefined +var yck='大佬'; +``` + +> 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 + +- [ ] 文档 + - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) +- [ ] 推荐文章 + - [ ] [JavaScript：变量提升&&作用域](https://www.huaweicloud.com/articles/716b97a06ee15d04f34b2d24b46e2bfe.html) + - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) + - [ ] [JavaScript的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) + - [ ] [var，let，const和变量提升](https://www.clloz.com/programming/front-end/js/2020/07/01/variable-hoist/) + +> 务必自己总结规则！ ## 前端十五万字面试资料 From a671b66b0e1e09d687e9b0feeb99023d375e59f1 Mon Sep 17 00:00:00 2001 From: w3liangxn Date: Tue, 14 Sep 2021 20:05:04 +0800 Subject: [PATCH 02/15] =?UTF-8?q?feat:=20JS=E7=9A=84=E7=BB=A7=E6=89=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4d21d39..d8f03b2 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,9 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [双等判断](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) - [ ] 推荐文章 - [ ] [You Don't Know JS 书中关于类型转换的一章节](https://github.com/weiqinl/You-Dont-Know-JS-CN/blob/master/types%20%26%20grammar/ch4.md) + - [ ] [几种基本类型简单的类型转换](https://zh.javascript.info/type-conversions) + - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) + - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) ### this @@ -147,10 +150,17 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 的工作原理](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)，需自备梯子，另有 [中文翻译版](https://github.com/Troland/how-javascript-works/blob/master/event-loop.md)。 - [ ] 事件循环可视化 - [ ] [Loupe](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) - - [ ] [几种基本类型简单的类型转换](https://zh.javascript.info/type-conversions) - - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) - - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) +### 继承 + +继承是面向对象语言（Object-Oriented Language）三大特征之一，在JS中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 + +- [ ] 文档 + - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) +- [ ] 推荐文章 + - [ ] [Javascript继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) + - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) + - [ ] [JS原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From f9b97cd45c55febf77365e060afbe5b062870bdd Mon Sep 17 00:00:00 2001 From: W3LiangXN Date: Tue, 14 Sep 2021 12:08:27 +0000 Subject: [PATCH 03/15] Commit from GitHub Actions (markdown-autodocs) --- README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d8f03b2..7c4caa3 100644 --- a/README.md +++ b/README.md @@ -153,14 +153,15 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 继承 -继承是面向对象语言（Object-Oriented Language）三大特征之一，在JS中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 +继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 - [ ] 文档 - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) - [ ] 推荐文章 - - [ ] [Javascript继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) - - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - - [ ] [JS原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) + - [ ] [Javascript 继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) + - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) + - [ ] [JS 原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 1988653ccbd84ad7055100700db34e9c860739fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=B3=BD=E6=9D=B0?= Date: Tue, 14 Sep 2021 20:34:47 +0800 Subject: [PATCH 04/15] =?UTF-8?q?class=20=E8=AF=A6=E8=A7=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index e35fe96..e7a465a 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,15 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 推荐文章 - [ ] [You Don't Know JS 书中关于类型转换的一章节](https://github.com/weiqinl/You-Dont-Know-JS-CN/blob/master/types%20%26%20grammar/ch4.md) +### Class(类) + +ES6提供了更接近面向对象（javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已 + +- [ ] 文档 + - [ ] [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class) +- [ ] 推荐文章 + - [ ] [ECMAScript 6 入门之Class ](https://es6.ruanyifeng.com/#docs/class) + - [ ] [详解Class ](https://juejin.cn/post/6844904086089760775#heading-15) ## 十五万字面试资料 [在线阅读](https://yuchengkai.cn/home/) From 60f74d49bc4fe3afd7e73f01cc6860242f1097b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=B3=BD=E6=9D=B0?= Date: Tue, 14 Sep 2021 21:18:17 +0800 Subject: [PATCH 05/15] JavaScript Class --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e7a465a..92d4dce 100644 --- a/README.md +++ b/README.md @@ -90,8 +90,9 @@ ES6提供了更接近面向对象（javascript本质上是基于对象的语言 - [ ] 文档 - [ ] [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class) - [ ] 推荐文章 - - [ ] [ECMAScript 6 入门之Class ](https://es6.ruanyifeng.com/#docs/class) - - [ ] [详解Class ](https://juejin.cn/post/6844904086089760775#heading-15) + - [ ] [理解JavaScript的类](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript) + - [ ] [Babel 是如何编译 Class 上](https://github.com/mqyqingfeng/Blog/issues/105) + - [ ] [Babel 是如何编译 Class 下](https://github.com/mqyqingfeng/Blog/issues/106) ## 十五万字面试资料 [在线阅读](https://yuchengkai.cn/home/) From b310e275e3d24e37f664efde221b45f0ffa07794 Mon Sep 17 00:00:00 2001 From: Brave-Jason Date: Tue, 14 Sep 2021 13:42:22 +0000 Subject: [PATCH 06/15] Commit from GitHub Actions (markdown-autodocs) --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index d84fce0..978cf99 100644 --- a/README.md +++ b/README.md @@ -89,18 +89,17 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 推荐文章 - [ ] [You Don't Know JS 书中关于类型转换的一章节](https://github.com/weiqinl/You-Dont-Know-JS-CN/blob/master/types%20%26%20grammar/ch4.md) - ### Class(类) -ES6提供了更接近面向对象（javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已 +ES6 提供了更接近面向对象（javascript 本质上是基于对象的语言）语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。 基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已 - [ ] 文档 - [ ] [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class) - [ ] 推荐文章 - - [ ] [理解JavaScript的类](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript) + - [ ] [理解 JavaScript 的类](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript) - [ ] [Babel 是如何编译 Class 上](https://github.com/mqyqingfeng/Blog/issues/105) - [ ] [Babel 是如何编译 Class 下](https://github.com/mqyqingfeng/Blog/issues/106) - + ### this `this` 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。 @@ -205,7 +204,6 @@ ES6提供了更接近面向对象（javascript本质上是基于对象的语言 - [How We Build Micro Frontends](https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc) - [Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit](https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0) - ## 十五万字面试资料 [在线阅读](https://yuchengkai.cn/home/) From 06220db602d11ad899b5c1894c60e7002e73c50a Mon Sep 17 00:00:00 2001 From: W3LiangXN Date: Tue, 14 Sep 2021 21:47:07 +0800 Subject: [PATCH 07/15] =?UTF-8?q?Update=20JS=E7=9A=84=E7=BB=A7=E6=89=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d8f03b2..346e9c0 100644 --- a/README.md +++ b/README.md @@ -158,9 +158,9 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 文档 - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) - [ ] 推荐文章 - - [ ] [Javascript继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - - [ ] [JS原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) + - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 + - [ ] [JS类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 5d54fb1aaa9d74b57e5334c91c07874014922a12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Tue, 14 Sep 2021 21:47:45 +0800 Subject: [PATCH 08/15] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 49 +++++++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 65b1eeb..0869fd8 100644 --- a/README.md +++ b/README.md @@ -23,33 +23,42 @@ ### 变量提升 -- 为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 - -- JavaScript 只会提升声明，不会提升其初始化。如果一个变量先被使用再被声明和赋值的话，使用时的值是 undefined - ```js -console.log(yck) 输出结果 undefined -var yck='大佬'; - ``` - -- 用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 -```js -console.log(typeof yck) ReferenceError -let yck='大佬'; -``` -```js -console.log(typeof yck) undefined -var yck='大佬'; -``` - > 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 +为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 + +我们声明一个函数的时候如果在声明函数的前面调用这个函数也是可以执行的，因为这个函数在解析的时候函数声明会被移至其作用域的顶部 。函数提升只提升函数声明，不会提升函数表达式。 +```js +// 普通函数声明 +console.log(Gangster("yck")) // yck undefined +function Gangster(name) { + console.log(name); +} +``` +```js +// 声明式函数 +console.log(Gangster("yck")) // Gangster is not a function +var Gangster = function (name) { + console.log(name); +} +``` +在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 +```js +function Gangster(){ + console.log("大佬"); +}; +console.log(Gangster); // Function: Gangster +Gangster(); // 大佬 +var Gangster = "我是变量的值"; +console.log(Gangster); // 我是变量的值 +``` + - [ ] 文档 - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) - [ ] 推荐文章 - - [ ] [JavaScript：变量提升&&作用域](https://www.huaweicloud.com/articles/716b97a06ee15d04f34b2d24b46e2bfe.html) - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) - [ ] [JavaScript的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) - - [ ] [var，let，const和变量提升](https://www.clloz.com/programming/front-end/js/2020/07/01/variable-hoist/) + - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) > 务必自己总结规则！ From 62e5a2a615e5008e33346e5392fb3e6ab036bb97 Mon Sep 17 00:00:00 2001 From: W3LiangXN Date: Tue, 14 Sep 2021 13:50:53 +0000 Subject: [PATCH 09/15] Commit from GitHub Actions (markdown-autodocs) --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ef557f6..1c23b5a 100644 --- a/README.md +++ b/README.md @@ -158,9 +158,10 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 文档 - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) - [ ] 推荐文章 - - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) + - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - - [ ] [JS类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) + - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 72507ed77e3f26745a3789f14e4bf564da3ccb4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Tue, 14 Sep 2021 21:53:52 +0800 Subject: [PATCH 10/15] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87&=E5=8F=98=E9=87=8F=E6=8F=90=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0869fd8..3418f6f 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ 成功采纳后，如果你面试遇到其他问题，笔者可以提供免费解答服务。 -### 变量提升 +### 变量提升&变量提升 > 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 From d86bf6267c26b025167d73c38e879e6d35f8a7ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Tue, 14 Sep 2021 22:03:30 +0800 Subject: [PATCH 11/15] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87&=E5=87=BD=E6=95=B0=E6=8F=90=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3418f6f..7a15038 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ 成功采纳后，如果你面试遇到其他问题，笔者可以提供免费解答服务。 -### 变量提升&变量提升 +### 变量提升&函数提升 > 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 @@ -53,6 +53,14 @@ var Gangster = "我是变量的值"; console.log(Gangster); // 我是变量的值 ``` +用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 +```js +console.log(yck) // undefined +var yck='大佬'; + +console.log(typeof yck) //ReferenceError +let yck='大佬'; +``` - [ ] 文档 - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) - [ ] 推荐文章 From 13ef9143cc1d8667ddba8381d4ef7d0f9eea094e Mon Sep 17 00:00:00 2001 From: yck Date: Tue, 14 Sep 2021 22:06:55 +0800 Subject: [PATCH 12/15] Update README.md --- README.md | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 978cf99..dfabf22 100644 --- a/README.md +++ b/README.md @@ -89,17 +89,6 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 推荐文章 - [ ] [You Don't Know JS 书中关于类型转换的一章节](https://github.com/weiqinl/You-Dont-Know-JS-CN/blob/master/types%20%26%20grammar/ch4.md) -### Class(类) - -ES6 提供了更接近面向对象（javascript 本质上是基于对象的语言）语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。 基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已 - -- [ ] 文档 - - [ ] [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class) -- [ ] 推荐文章 - - [ ] [理解 JavaScript 的类](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript) - - [ ] [Babel 是如何编译 Class 上](https://github.com/mqyqingfeng/Blog/issues/105) - - [ ] [Babel 是如何编译 Class 下](https://github.com/mqyqingfeng/Blog/issues/106) - ### this `this` 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。 @@ -146,6 +135,19 @@ ES6 提供了更接近面向对象（javascript 本质上是基于对象的语 - [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456) - [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) +### Class(类) + +`class` 只是原型链的语法糖，与其它语言中的类不是同一样东西。 + +- [ ] 文档 + - [ ] [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class) +- [ ] 推荐文章 + - [ ] [理解 JavaScript 的类](https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript) + - [ ] [Babel 是如何编译 Class 上](https://github.com/mqyqingfeng/Blog/issues/105) + - [ ] [Babel 是如何编译 Class 下](https://github.com/mqyqingfeng/Blog/issues/106) + - [ ] [给 ES6 class 说句公道话](https://juejin.cn/post/6924108426125508616) + - [ ] [应该在JavaScript中使用Class吗？](https://zhuanlan.zhihu.com/p/158956514) + ### 事件循环 大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。 From df16aab2b56801886b0075429fb7d79c52555856 Mon Sep 17 00:00:00 2001 From: KieSun Date: Tue, 14 Sep 2021 14:07:26 +0000 Subject: [PATCH 13/15] Commit from GitHub Actions (markdown-autodocs) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bb20298..c5a2bee 100644 --- a/README.md +++ b/README.md @@ -148,7 +148,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [Babel 是如何编译 Class 上](https://github.com/mqyqingfeng/Blog/issues/105) - [ ] [Babel 是如何编译 Class 下](https://github.com/mqyqingfeng/Blog/issues/106) - [ ] [给 ES6 class 说句公道话](https://juejin.cn/post/6924108426125508616) - - [ ] [应该在JavaScript中使用Class吗？](https://zhuanlan.zhihu.com/p/158956514) + - [ ] [应该在 JavaScript 中使用 Class 吗？](https://zhuanlan.zhihu.com/p/158956514) ### 事件循环 From 1a996aa4121f888d76a0dc01bd119fef2633ac9c Mon Sep 17 00:00:00 2001 From: rudy-lc Date: Tue, 14 Sep 2021 14:38:00 +0000 Subject: [PATCH 14/15] Commit from GitHub Actions (markdown-autodocs) --- README.md | 57 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 8f5a773..3a6bcc8 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 作用域 作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。 + - [ ] 文档 - [ ] [作用域](https://developer.mozilla.org/en-US/docs/Glossary/Scope) - [ ] [块作用域](https://developer.mozilla.org/en-US/docs/Glossary/Block/Scripting) @@ -138,52 +139,58 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 推荐文章 - [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456) - [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) - + ### 变量提升&函数提升 -> 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 +> 变量提升（Hoisting）被认为是， Javascript 中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 -为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 +为什么会出现变量提升？ 因为 JavaScript 在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 我们声明一个函数的时候如果在声明函数的前面调用这个函数也是可以执行的，因为这个函数在解析的时候函数声明会被移至其作用域的顶部 。函数提升只提升函数声明，不会提升函数表达式。 + ```js // 普通函数声明 -console.log(Gangster("yck")) // yck undefined +console.log(Gangster("yck")); // yck undefined function Gangster(name) { - console.log(name); -} -``` -```js -// 声明式函数 -console.log(Gangster("yck")) // Gangster is not a function -var Gangster = function (name) { console.log(name); } ``` -在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 + ```js -function Gangster(){ - console.log("大佬"); +// 声明式函数 +console.log(Gangster("yck")); // Gangster is not a function +var Gangster = function (name) { + console.log(name); }; -console.log(Gangster); // Function: Gangster -Gangster(); // 大佬 -var Gangster = "我是变量的值"; -console.log(Gangster); // 我是变量的值 ``` -用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 +在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 + ```js -console.log(yck) // undefined -var yck='大佬'; - -console.log(typeof yck) //ReferenceError -let yck='大佬'; +function Gangster() { + console.log("大佬"); +} +console.log(Gangster); // Function: Gangster +Gangster(); // 大佬 +var Gangster = "我是变量的值"; +console.log(Gangster); // 我是变量的值 ``` + +用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有 JavaScript 执行到当前变量声明这句语句时，才能使用这个变量。 + +```js +console.log(yck); // undefined +var yck = "大佬"; + +console.log(typeof yck); //ReferenceError +let yck = "大佬"; +``` + - [ ] 文档 - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) - [ ] 推荐文章 - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) - - [ ] [JavaScript的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) + - [ ] [JavaScript 的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) ### Class(类) From a6dd12d3afa4a4cbe085ab33327323d38815c561 Mon Sep 17 00:00:00 2001 From: yck Date: Tue, 14 Sep 2021 23:03:00 +0800 Subject: [PATCH 15/15] Update README.md --- README.md | 50 ++++---------------------------------------------- 1 file changed, 4 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 3a6bcc8..57cb80a 100644 --- a/README.md +++ b/README.md @@ -140,57 +140,15 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456) - [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) -### 变量提升&函数提升 +### 变量提升 -> 变量提升（Hoisting）被认为是， Javascript 中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 - -为什么会出现变量提升？ 因为 JavaScript 在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 - -我们声明一个函数的时候如果在声明函数的前面调用这个函数也是可以执行的，因为这个函数在解析的时候函数声明会被移至其作用域的顶部 。函数提升只提升函数声明，不会提升函数表达式。 - -```js -// 普通函数声明 -console.log(Gangster("yck")); // yck undefined -function Gangster(name) { - console.log(name); -} -``` - -```js -// 声明式函数 -console.log(Gangster("yck")); // Gangster is not a function -var Gangster = function (name) { - console.log(name); -}; -``` - -在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 - -```js -function Gangster() { - console.log("大佬"); -} -console.log(Gangster); // Function: Gangster -Gangster(); // 大佬 -var Gangster = "我是变量的值"; -console.log(Gangster); // 我是变量的值 -``` - -用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有 JavaScript 执行到当前变量声明这句语句时，才能使用这个变量。 - -```js -console.log(yck); // undefined -var yck = "大佬"; - -console.log(typeof yck); //ReferenceError -let yck = "大佬"; -``` +变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。 - [ ] 文档 - - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) + - [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) - [ ] 推荐文章 - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) - - [ ] [JavaScript 的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) + - [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/) - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) ### Class(类)