我们可以看到，我们预期这里会输出awesome，结果打印结果显示我们丢失了this的绑定，解决这个问题的办法有很多种，最常见的就是 var self = this
任何情况下，this 都不会默认指向函数自己，除非使用 bind 绑定的方式修改 this 为函数自己。
别担心，不只有你一个人，我也经常遇到这个问题很多次，接下我们一起来看看如何解决这个问题。
所以，JavaScript是ArkTS的基础，本文就来介绍一下JavaScript执行机制的一些核心概念。
使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。
本文首发在我的个人博客：http://muyunyun.cn/ 《你不知道的JavaScript》系列丛书给出了很多颠覆以往对JavaScript认知的点, 读完上卷，受益匪浅，于是对其精华的知识点进行了梳理。 什么是作用域 作用域是一套规则，用于确定在何处以及如何查找变量。 编译原理 JavaScript是一门编译语言。在传统编译语言的流程中，程序中一段源代码在执行之前会经历三个步骤，统称为“编译”。 分词/词法分析 将字符串分解成有意义的代码块，代码块又称词法单元。比如程序var a = 2;
尽管通常将 JavaScript 归类为“动态” 或“解释执行” 语言， 但事实上它是一门编译语言。 程序中的一段源代码在执行之前会经历三个步骤， 统称为“编译”
本书属于基础类书籍，会有比较多的基础知识，所以这里仅记录平常不怎么容易注意到的知识点，不会全记，供大家和自己翻阅；
JavaScript 在运行过程中与其他语言有所不一样，如果不理解 JavaScript 的词法环境、执行上下文等内容，很容易会在开发过程中产生 Bug，比如this指向和预期不一致、某个变量不知道为什么被改了，等等。所以今天我们就来聊一聊 JavaScript 代码的运行过程。
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：
我们可以使用 babel 转译器将 ES6 代码转译为 ES5代码, ES5代码如下
阶段二:浏览器中JavaScript的执行机制 07｜变量提升:JavaScript中的代码是按顺序执行的吗？ 只有理解了JavaScript执行上下文，才能更好的理解JavaScript语言本身：变量提升、作用域、闭包等。 变量提升 变量提升指的是:JS代码在执行过程中，JS引擎会把变量的声明部分和函数的声明部分提升到代码开头的行为，变量提升后，会给变量设置默认值，这个值就是我们熟悉的undefined。 JavaScript的代码执行流程 JavaScript是先编译后执行，在编译阶段变
执行上下文(Execution context)是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的 this、变量、对象以及函数等。
箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/acoolgiser/article/details/89511979
箭头函数是ES6 出现的新语法，比函数更加简洁；随着浏览器的支持或者使用 Babel 进行编译，使用的场景越来越多。我们知道箭头函数与普通函数相比，没有以下特性：
2. 箭头函数不会使用上述四条规则，而是根据当前的词法作用域来决定 this 的，箭头函数会继承外层函数的 this。
在JavaScript中，this 这个特殊的变量是相对比较复杂的，因为this不仅仅用在面向对象环境中，在其他任何地方也是可用的。
JavaScript ES6标准新增了比较重要的一种新的函数：Arrow Function（箭头函数）,但大多数人都不能很好的了解箭头函数的用法，也不能区别箭头函数和function(),所以接下来我们就来介绍一下箭头函数。
函数 foo() 是一个完整的函数声明，没有涉及赋值操作；第二个函数，先声明了变量 bar，再把 function () {} 赋值给 bar。可以理解为：
JavaScript的动态领域中，函数是基本构建块，赋予开发者高效组织和执行代码的能力。理解普通函数、箭头函数以及相对较新的生成器函数之间的微妙差异，对于编写整洁、简明和高效的代码至关重要。本文将深入探讨每种函数类型，探索它们的语法、行为和使用场景。
this可以说是前端开发中比较常见的一个关键字，由于其指向是在运行时才确定，所以大家在开发中判断其方向时也会很模糊，今天就把this的指向问题拆开了，揉碎了，好好讲一讲。
js中的词法作用域是静态的，需要关注的往往是函数的声明位置而不是调用位置—–例如闭包引用自由变量时，应该注意闭包函数的声明位置；而this却在某种程度上类似于动态作用域，this到底绑定的是谁，要看函数的调用位置（或者说调用方法），只有在函数调用的时候this的指向才能被确定。
引用类型包括对象object、数组array、函数function等，统称对象类型：
this关键字是JavaScript中最复杂的机制之一，同时，它也是JavaScript中最重要的机制之一。但是，即使是非常有经验的JavaScript开发者也很难说清楚它到底是什么。
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。
一旦我们将这些作用域嵌套起来，就变成了另外一个重要的知识点「作用域链」，也就是 JS 到底是如何访问需要的变量或者函数的。
箭头函数是函数表达式的替代方法，但在语法上有所不同，不能在所有情况下使用。如果您还没有阅读 JavaScript 中的函数表达式，我建议您在继续阅读之前先阅读这篇文章。
原文地址：https://dev.to/bhagatparwinder/arrow-functions-this-keyword-350j
在JavaScript中，关键字 this 是一个特殊的对象，它在函数被调用时自动创建。通常用来指向当前执行的函数所属的对象。this 的值在函数的每次调用时可能会发生变化，具体取决于函数是如何被调用的。
当你开心地在编程，惊叹于vue的神奇，这时你却遇到这样的情况： 你的vue应用无法正常工作，你收到的报错是：this is undefined
前篇说了this绑定的例外情况，比如当以为是应用的其他绑定规则时，其实应用的可能是默认绑定。
作用域和作用域链是所有JavaScript开发人员每天都要接触和应用的内容。不管是面试中的作用域链的面试考察，还是日常代码研发中变量与作用域链的构建，它的身影几乎无处不在。它就像一顶优秀厨师的厨师帽，只要我们走进厨房，我们就要将它整理好，套在头上。没有它整洁干净的戴在头上，你就不是一名好的JavaScript工程师。
input新增了一些属性：color-调色板、tel-电话、number-数字、date-年月日
URL（Uniform Resource Locator），统一资源定位符，用于定位互联网上资源，俗称网址。
将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树（Abstract Syntax Tree，AST，抽象语法树）。
JavaScript作用域为静态作用域static scope，但是在Js中的this却是一个例外，this的指向问题就类似于动态作用域，其并不关心函数和作用域是如何声明以及在何处声明的，只关心它们从何处调用，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，当然实际上this的最终指向的是那个调用它的对象。
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：
JavaScript是一门解释性动态语言，但同时它也是一门充满神秘感的语言。如果要成为一名优秀的JS开发者，那么对JavaScript程序的内部执行原理要有所了解。
在进行闭包讲解之前，我们需要对一些前置知识点，做一些简单的介绍：何为作用域 和 词法作用域。只有在了解了这些概念，我们才会对闭包的认识有的放矢。
JavaScript 中有两个机制可以“欺骗”词法作用域：eval(..) 和 with。 前者可以对一段包 含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域（在 运行时）。 后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作 用域中的标识符来处理，从而创建了一个新的词法作用域（同样是在运行时）。
JavaScript 几乎已经是所有现代 web 应用程序的核心。虽然将基本的 JavaScript 功能构建到网页中都是一项相当简单的任务，即使他们是JavaScript新手。但是 Javascript 本身的灵活性、微妙性导致开发者（特别是初级开发者）经常会面临一些 Javascript 带来的问题。
因篇幅原因，将分为两篇文字总结。 内容将覆盖防抖节流（完成）、作用域（已复习）笔试题作用域、预编译（已复习）、闭包（完成）、this指向问题（完成）、new 一个对象经历了什么（完成）、深拷贝浅拷贝（完成）、js类型(完成)、js事件流事件处理程序事件委托（已完成）、隐式转换显示转换（完成）、原型链（完成）、继承（完成）、dns预获取（完成）、promise（完成）、js事件执行机制宏任务，微任务（完成）、async await（完成） js事件思维导图
Es6浅析 Babel 是一个 JavaScript编译器，它可以把我们编写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保转换后的语言良好
Babel 是一个 JavaScript编译器，它可以把我们编写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保转换后的语言良好地运行在所有主流 JavaScript引擎中。我们可以把babel简单地理解为从源代码到源代码的编译器。
javascript是一门很有意思的编程语言，融合了很多编程语言的特点。上手特别容易，使用javascript开发项目也是很轻松的一件事。但是当你深入其中，你会遇到很多不太好理解的概念，比如闭包、this指向引用、原型链之类。这些模糊的概念，隐藏着javascript微妙之处；真正搞懂这些知识，对于理解javascript之门语言有很大的帮助。本文不讲javascript如何使用，主要是关于javascript中一些难点的分析和理解。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
