大家好，今天小编来为大家解答react谷歌浏览器工具这个问题，react谷歌插件很多人还不知道，现在让我们一起来看看吧！

本文目录

1. 2021年的前端框架选择 Angular vs React vs Vue
2. React基础
3. 前端经典面试题(包含JS、CSS、React、浏览器等)

一、2021年的前端框架选择 Angular vs React vs Vue

每个前端开发人员都听说过三个用于构建 Web应用程序的框架：React、Vue.js和Angular。

React是一个 UI库，Angular是一个成熟的前端框架，而 Vue.js是一个渐进式框架。

它们几乎可以互换使用来构建前端应用程序，但它们并非 100%相同，因此比较它们并了解它们的差异是有意义的。

每个框架都是基于组件的，并允许快速创建 UI功能。

然而，它们都有不同的结构和架构——所以首先，我们将研究它们的架构差异以了解它们背后的哲学。

React不强制执行特定的项目结构，正如您从下面的官方“Hello World”示例中看到的那样，您只需几行代码即可开始使用 React。

React可以用作 UI库来渲染元素，而无需强制执行特定的项目结构，这就是它不是严格意义上的框架的原因。

React Elements是 React应用程序的最小构建块。它们比 DOM元素更强大，因为 React DOM确保在发生变化时有效地更新它们。

组件是更大的构建块，定义了在整个应用程序中使用的独立且可重用的部分。它们接受称为 props的输入并生成元素，然后显示给用户。

React基于 JavaScript，但它主要与JSX(JavaScript XML)结合，这是一种语法扩展，允许您创建同时包含 HTML和 JavaScript的元素。

您使用 JSX创建的任何内容也可以使用 React JavaScript API创建，但大多数开发人员更喜欢 JSX，因为它更直观。

Vue.js核心库只关注视图层。之所以称为渐进式框架，是因为您可以使用官方和第三方包（例如Vue Router或Vuex）扩展其功能，将其转变为实际框架。

虽然 Vue与 MVVM（Model-View-ViewModel）模式没有严格关联，但它的设计部分受到了它的启发。使用 Vue，您将主要在 ViewModel层上工作，以确保以允许框架呈现最新视图的方式处理应用程序数据。

Vue的模板语法让您可以创建 View组件，并将熟悉的 HTML与特殊指令和功能相结合。这种模板语法是首选，即使原始 JavaScript和 JSX也受支持。

Vue中的组件很小，是自包含的，并且可以在整个应用程序中重复使用。带有扩展名的单文件组件(SFC).vue包含 HTML、CSS和 JavaScript，因此所有相关代码都位于一个文件中。

SFC是在 Vue.js项目中组织代码的推荐方式，尤其是大型项目。需要使用 Webpack或 Browserify等工具将 SFC转换为可用的 JavaScript代码。

在本文中，我讨论的是 Angular 2，而不是现在称为 AngularJS的框架的第一个版本。

AngularJS，原始框架，是一个MVC（模型-视图-控制器）框架。但是在Angular 2中，与 MV*-patterns没有严格的关联，因为它也是基于组件的。

Angular中的项目被组织成模块、组件和服务。每个 Angular应用程序至少有一个根组件和一个根模块。

Angular中的每个组件都包含一个模板、一个定义应用程序逻辑的类和元数据（装饰器）。组件的元数据告诉 Angular在哪里可以找到创建和呈现其视图所需的构建块。

Angular模板是用 HTML编写的，但也可以包含带有特殊指令的Angular模板语法，以输出反应性数据和呈现多个元素等。

组件使用 Angular中的服务来委托业务逻辑任务，例如获取数据或验证输入。它们是 Angular应用程序的独特部分。虽然 Angular不强制使用它们，但强烈建议将应用程序构建为一组可以重用的不同服务。

Angular内置于 TypeScript中，因此建议使用它以获得最无缝的体验，但也支持纯 JavaScript。

React是最受欢迎的 JavaScript项目之一，在 GitHub上拥有 16万颗星。它由 Facebook开发和维护，并在他们的许多项目内部使用。此外，根据BuiltWith的使用统计数据，它为超过 200万个网站提供支持。

在三个框架中，Vue在 GitHub上的 star数最多，有 176k。该项目由前 Google员工 Evan You开发和领导。据BuiltWith称，这是开源社区中一个非常强大的独立项目，被超过 100万个网站使用。

Angular是由 Google开发的，但令人惊讶的是它并没有用于他们的一些旗舰产品，例如搜索或 Youtube。它经常用于企业项目，并基于BuiltWith的数据为超过 97,000个网站提供支持。

它是三个框架中星数最少的，在 GitHub上有 68k星。然而，当从 Angular 1切换到 Angular 2时，他们创建了一个全新的代码库，而不是继续AngularJS项目，该项目也有 59k星。

在开发应用程序时，开源包可以为您节省宝贵的时间。不仅如此，它们通常比定制组件和封装更好，因为它们经过了实战测试。

查看可帮助您更轻松地创建新功能的现成组件、主题和其他工具的可用性非常重要。

许多前端应用程序依赖全局状态管理来存储信息，例如谁登录和其他用户设置。

最流行的 JavaScript状态管理项目是Redux。大多数开发人员使用Redux的官方 React绑定，这些绑定由 Redux团队维护。

由于 React的流行，查找输入组件和现成的元素非常容易。它们都只是在 Google或 GitHub上搜索即可。

React生态系统还包括React Native，它允许您从用 React编写的单个代码库构建原生 iOS和 Android应用程序。因此，React也可以成为使用 Web技术构建移动应用程序的绝佳选择。

React是 MERN堆栈的一部分，其中包含 MongoDB、ExpressJS、React和 NodeJS。这种组合的伟大之处在于，单一语言——JavaScript——为整个应用程序提供动力。

尽管 Redux可以在 Vue中使用，但没有官方绑定。但这不应该让您担心，因为Vuex是专门为 Vue应用程序制作的官方状态管理库。除了与 Vue很好地集成之外，使用 Vue的开发人员工具进行调试也很容易。

在 Vue的早期，很难找到现成的组件。随着社区的发展，您可以使用各种输入组件和高级元素来加快开发速度。

对于移动应用程序开发，有一个名为Weex的新兴项目。Weex由阿里巴巴开发和使用，但不如 React Native成熟和强大。更重要的是，由于该项目在中国开发和使用较多，因此很难找到英文文档和解决问题的方法。

Vue与 Laravel集成得很好，这就是为什么它们经常一起使用。Laravel提供完整的JavaScript和 CSS脚手架，以支持在新项目中使用 Vue。

对于 Angular中的状态管理，您可以使用NgRx项目。它的灵感来自 Redux，但它是专门为 Angular创建的。

与 Vue和 React的情况一样，您可以将许多现成的组件导入到您的项目中。与 Angular略有不同的是，Angular Material项目中有许多官方组件。这是 Google的一个官方项目，为 Angular应用程序提供 Material Design组件。

您可以使用NativeScript在 Angular中构建跨平台移动应用程序。它也支持 Vue，但 Angular支持更成熟。

Angular是著名的 MEAN堆栈的一部分，它将 Angular与 MongoDB、ExpressJS和 NodeJS相结合。与 MERN堆栈类似，它的前端和后端都完全依赖 JavaScript。

Angular、React和 Vue都可用于开发渐进式 Web应用程序，也称为 PWA。

PWA不是移动应用程序，而是 Web应用程序，智能手机用户可以将其添加为主屏幕的快捷方式，并提供类似于原生移动应用程序的外观和感觉。

您还可以为每个框架找到高级模板和预制应用程序，但 Angular和 React比 Vue提供更多高级选项。

在选择框架或库时，您还需要考虑性能。

在许多情况下，您不必担心性能，尤其是在构建小型项目时。然而，项目的范围和复杂性越大，性能就会（并且将会）成为一个问题。

重要的是要注意，在 Web性能方面，开发质量和遵循最佳实践比框架的选择更重要。

但由于存在一些性能指标和差异，我将研究它们并解释每个指标如何影响您的开发工作。

JS框架基准测试的结果表明，它们在大多数基准测试中都表现得相当好，例如在表中创建或附加行。

正如你在上面看到的，Vue在选择行时比 Angular和 React慢得多。另一方面，Angular和 React在交换行方面效率不高。

这些是渲染基准中唯一的实质性差异-在大多数情况下，不会产生明显的结果。由于选择行是比交换行更常见的功能，我想说这个基准测试将 Vue排在第三位，仅次于 Angular和 React并列第一。

在内存和启动时间方面，React和 Vue得分很好，但 Angular稍慢。Angular启动一个基本脚本可能需要 150毫秒，并且需要更多内存才能运行。

谷歌 Chrome实验室的Perf Track显示了来自数千个网站的生产数据。这些统计数据受许多其他因素的影响，而不仅仅是选择的框架，让我们看看数字。

与 Angular相比，Vue和 React网站在这个指标上的排名更高，Angular需要更多时间来启动并向用户呈现内容。

在渲染完整页面的三个框架中，Angular也是最慢的，只有 27%的 Angular网站得分在可接受的范围内。

对于所有三个框架，超过 80%的网站都在第一次输入延迟的可接受范围内，这显示了用户可以与页面交互所需的时间。

迄今为止，最轻量级的应用程序是使用 Vue开发的应用程序，68%的 Vue应用程序加载的 JavaScript不到 1MB。另一方面，Angular和 React应用程序往往具有更大的代码大小。

您可以从这些数字中看到趋势，但您不应该太快得出结论。例如，对于最后一张图，可以解释为 Vue用于开发更轻量级的应用程序，而 Angular用于更大的项目。

统计数据可以帮助指导您做出正确的决定，但您不能使用它们来证明一个框架比另一个更快或更好。

对于更高级的应用程序，使用的前端框架应该能够执行一些提高性能并且可以更好地扩展的任务。

两项关键技术是服务器端渲染(SSR)和虚拟化。

React支持使用官方ReactDOMServer包进行服务器端渲染。对于虚拟化，您可以使用名为React Virtualized的流行第三方工具。

Vue中也支持服务器端渲染以及官方的SSR包。此外，您还可以使用基于 Vue构建并支持 SSR的Nuxt.js框架。

不幸的是，Vue中的虚拟化选项并不是那么强大。在我看来，Vue Virtual Scroll List是虚拟滚动的最佳解决方案，但它有点问题，不如 React和 Angular的选项稳定。

Angular拥有SSR的官方Angular Universal包，以及用于虚拟滚动和高效渲染大型列表的官方组件。

要回答这个问题，我们需要查看每个框架的复杂性及其引入的概念。

在最基本的用例中，React是三个框架中最不复杂的。那是因为你只需要导入库，然后你就可以用几行代码开始编写你的 React应用程序。

但是除了 Hello World示例之外，大多数 React应用程序都是基于组件的，而不仅仅是在页面上呈现一些元素。

一些开发人员对 React感到奇怪或困难的一件事是，学习 JSX是一条单行道。您也可以使用原始 JavaScript，但由于大多数 React开发人员使用 JSX，学习它几乎是不可避免的。

这是使 React的学习曲线变得更陡峭的主要因素，但除此之外，对于了解 JavaScript并理解 Web开发概念的开发人员来说，它是一个易于学习的库。

Vue的设置比 React稍微复杂一些。你可以将它用作一个库来定义你可以在整个 HTML中使用的组件——但与 React类似，这不是大多数项目的构建方式。

大多数 Vue项目都有一个命名的根组件App.vue和一些用于显示各种内容的子组件。

说到语法，你唯一需要学习的新东西就是 Vue的模板语法，如果你了解 HTML，这很容易掌握。基本的指令，如v-if和v-for有条件的渲染和列表的渲染，很容易理解即使是初学者。

此外，Vue的单文件组件将所有前端代码保存在一个地方，便于组织新项目。

在我看来，Vue是最容易学习的，因为它的简单和直观的语法。

Angular拥有三者中最复杂的项目结构，而且由于它是一个成熟的前端框架，因此它依赖的概念更多。

除了组件，Angular还支持模块和服务。它希望您以特定的方式编写和设计代码库，从而使您的项目在扩展时更易于维护。

至于语法，由于 Angular最适合与 TypeScript配合使用，因此在构建 Angular项目时了解 TypeScript非常重要。

与 Vue一样，您还必须熟悉类似 HTML的语法，以便您可以开始使用 Angular编写新的 UI功能。

在我看来，Angular对于普通开发者来说是最难学的，因为它更复杂并且依赖于 TypeScript。

许多开源项目和框架逐渐被遗忘并无人维护。您是否应该担心我们在这里讨论的任何框架？

尽管我们无法完全预测会发生什么，但正在进行的开发工作是这些项目健康状况的良好指标。人气和增长也是预测项目寿命的重要指标，所以让我们来看看每个框架。

React v17.0已经发布，但令人惊讶的是，它没有为开发人员提供任何新功能。

主要的变化是这个新版本可以更容易地升级 React本身。您可以将 React的某些部分从旧版本升级到新版本，而无需升级整个项目。

如果您的应用程序依赖于随新版本更改或弃用的功能，您可以保留旧版本以保持此功能有效。此更新使 React成为一个很好的长期选择，因为它可以更轻松地与新版本保持同步。

React的每周 npm下载量自去年以来增长了 44%。从绝对数量来看，它仍然是三个项目中下载量最大的。

Vue 3已于2020年 9月发布，它解决了 Vue 2在大型项目中存在的许多严重问题。它引入了受React Hooks启发的Composition API，可以更轻松地跨组件重用逻辑。

整个项目用 TypeScript重写，提高了新 Vue项目对 TypeScript的支持，同时也使项目更易于维护。

Vue 3是一个急需的升级，使 Vue更适合大型项目。

Vue的每周下载量自去年以来增长了 87%，使 Vue成为相对而言增长最快的框架。如果 Vue能够保持这种增长速度，那么它肯定会很快超过 Angular。

Angular最近推出了Ivy编译器。它减少了构建时间，优化了资产，允许更快的测试，并总体上改善了开发人员的体验。

Angular团队每年发布两次重大更新，其中可能包含新功能，或者只是让框架跟上新浏览器版本的速度。

自去年以来，Angular的每周下载量增长了约 50%，因此它仍然是一个受欢迎的项目。

Angular、React和 Vue都处于非常活跃的开发阶段。他们定期发布新版本并维护现有版本。由于在每种情况下当前的支持水平都很高，因此您可以安全地使用这些框架中的任何一个。

需要注意的是，Angular的增长没有以前那么快，而 Vue——尽管它是最近开始的——似乎增长了很多。

如前所述，我们无法预测哪些框架会长期保持相关性，但每个项目背后都有一个伟大的社区，并且在不断发展。

我这篇文章的目标是解释架构差异，分解每个框架的优点和缺点，并在适用的地方进行比较。

在进入一个新框架之前，有几件事情需要考虑。

首先，在选择新技术时，您团队的经验可能是一个决定性因素。

同样，您必须考虑您所在地区可用的人才，以便您可以为您的项目聘请开发人员。

最后，当涉及到项目本身时，复杂性和范围也会影响您对框架的选择。

通过考虑所有关键差异，我希望您可以决定哪个是最适合您的目标和需求的前端框架。

(本文由闻数起舞翻译自Aris Pattakos的文章《Angular vs React vs Vue 2021》，转载请注明出处，原文链接：)

二、React基础

React主要是用于构建用户界面的 JavaScript库，实现单页面应用。

react中文网：

谷歌react调试工具：react develpoer tools，用于调试react

redux调试工具：redux devTools，用于调试redux

markdown文本，创建的文件后缀是.md结尾的，是在github，npm,码云等代码托管平台上使用一种文本格式，在这种网站上会自动展示.md文件的内容，主要是说明功能

通过这个指令一键搭建react环境，基于webpack的

复制已经下载好的空白环境到目标位置

1、介绍：HTML语言直接写在 JavaScript语言之中，不加任何引号，这就是 JSX（JavaScript and XML）的语法，JSX是一种 JavaScript的语法扩展，它允许 HTML与 JavaScript的混写。 2、语法是： 1）

2）{str}:遇到{}就按js解析，{}中的js代码不要直接出现{}

3、JSX是一个表达式，可以在 if语句和 map循环的代码块中使用 JSX，将 JSX赋值给变量，把 JSX当作参数传入，以及从函数中返回 JSX

2）使用大括号来定义以 JavaScript表达式为值的属性

3）style样式使用JSX，写法如下：

数组的一个遍历方法,ele是数组元素项，index是下标，return后是返回值

元素描述了你在屏幕上想看到的内容，是构成 React应用的最小砖块，与浏览器的 DOM元素不同，React元素是创建开销极小的普通对象。React DOM会负责更新 DOM来与 React元素保持一致。

说明：1.参数1：element为要显示的元素。可以是双标签形式的，也可以是单标签形式的，如果是单标签必须有结束符号

2.参数2：parentNode为元素要显示在页面的哪个标签中。

3.渲染方法一般一个项目中只有一个。其他页面通过组件引入或者路由访问。

4.更新已渲染的元素:React元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()

从概念上类似于 JavaScript函数。它接受任意的入参（即“props”），并返回用于描述页面展示内容的 React元素。组件允许你将 UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件的导出使用es6模块的导出语法。可以使用 export default组件名，也可以使用 export{组件名}

组件的引入实现es6模块的引入语法。可以使用 import组件名 from‘组件路径’

2、组件的页面结构只能有一个顶层标签,不能出现兄弟关系，页面如果比较复杂，需要使用小括号包裹起来

当 React元素为用户自定义组件时，它会将 JSX所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为“props”。

父组件中：调用子组件时通过属性形式传递

【示例1-5】props父组件向子组件传递数据

1.练习创建组件，导出组件，引入组件

2.练习父级通过props向子集传递数据

componentWillMount：组件将要被渲染

componentDidMount:组件渲染完成(组件进入运行状态)

shouldComponentUpdate:是否允许组件更新(这个函数中必须有返回值，如果返回true，表示允许更新；如果返回false，表示不允许更新)

componentWillUpdate:组件将要开始更新

componentDidUpdate:组件更新完成(重新进入运行状态)

componentWillReceiveProps:组件接收props更新

componentWillUnMount:组件将要卸载

组件有三个生命周期函数一生只触发一次：

1.在react组件的生命周期函数中，this指向当前组件

2.在react class定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。

3.在react组件中，自定义function函数中this默认指向undefined

组件内部的状态，内部状态只能在组件内部使用

1.函数形式的组件如果不使用HOOK新语法，是不能使用state的

2.事件是以“on+事件名称”组成,使用驼峰命名法

3.事件的功能一般定义在外部，事件这里写this.事件函数名称

4.事件定义在组件中，和生命周期函数同级

实参是从bind()的第二个参数算的

在事件中添加参数 e或event，放在形参最后。

同一个事件函数中出现多次state状态修改，react不会立即更新state，而是进行合并。

下面代码会先输出 222，后输出 111

1、给元素绑定事件，让this指向当前组件，并修改state的值

2、定义组件，在app.js中引入组件，把app.js的state值传递给子组件，并在子组件中显示

三、前端经典面试题(包含JS、CSS、React、浏览器等)

误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上HTTP协议从未规定 GET/POST的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

补充补充一个get和post在缓存方面的区别：

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key=> index的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下：

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

用 JavaScript对象结构表示 DOM树的结构；然后用这个树构建一个真正的 DOM树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

结构：display:none:会让元素完全从渲染树中消失，渲染的时候不占据任何空间,不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：displaynone:修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden:修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0：修改元素会造成重绘，性能消耗较少

常用的一般为三种.clearfix, clear:both, overflow:hidden;

比较好是.clearfix,伪元素万金油版本,后两者有局限性.

clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了,比如相邻容器的包裹层元素塌陷

overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷

概念：将多个小图片拼接到一个图片中。通过 background-position和元素尺寸调节需要显示的背景图案。

1.处于常规流中时，如果 width没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align

1.水平方向上根据 direction依次布局

4. margin/padding在竖直方向上无效，水平方向上有效

5. width/height属性对非替换行内元素无效，宽度由元素内容决定

6.非替换行内元素的行框高由 line-height确定，替换行内元素的行框高由 height, margin, padding, border决定 7.浮动或绝对定位时会转换为 block 8. vertical-align属性生效

(ES6之前)其中5种为基本类型: string, number, boolean, null, undefined,

ES6出来的 Symbol也是原始数据类型，表示独一无二的值

Object为引用类型(范围挺大),也包括数组、函数,

简单的工厂模式可以理解为解决多个相似的问题;

只能被实例化(构造函数给实例添加属性与方法)一次

将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值

就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送,

代码实现逻辑是用数组存贮订阅者,发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

addEventListener： addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。

那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。

我们发现Function的原型也是Function。

这里来举个栗子，以 Object为例，我们常用的 Object便是一个构造函数，因此我们可以通过它构建实例。

则此时，实例为instance,构造函数为Object，我们知道，构造函数拥有一个 prototype的属性指向原型，因此原型为:

在 JS中，继承通常指的便是原型链继承，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。

在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？

函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。

函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。

在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数预置通用参数，供多次重复调用。

call和 apply都是为了解决改变 this的指向。作用都是相同的，只是传参的方式不同。

除了第一个参数外， call可以接收一个参数列表， apply只接受一个参数数组。

bind和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind实现柯里化。

对于实现以下几个函数，可以从几个方面思考

箭头函数其实是没有 this的，这个函数中的 this只取决于他外面的第一个不是箭头函数的函数的 this。在这个例子中，因为调用 a符合前面代码中的第一个情况，所以 this是 window。并且 this一旦绑定了上下文，就不会被任何代码改变。

在函数中，我们首先使用 var关键字声明了 name变量。这意味着变量在创建阶段会被提升（ JavaScript会在创建变量创建阶段为其分配内存空间），默认值为 undefined，直到我们实际执行到使用该变量的行。我们还没有为 name变量赋值，所以它仍然保持 undefined的值。

使用 let关键字（和 const）声明的变量也会存在变量提升，但与 var不同，初始化没有被提升。在我们声明（初始化）它们之前，它们是不可访问的。这被称为“暂时死区”。当我们在声明变量之前尝试访问变量时， JavaScript会抛出一个 ReferenceError。

关于 let的是否存在变量提升，我们何以用下面的例子来验证：

let变量如果不存在变量提升， console.log(name)就会输出 ConardLi，结果却抛出了 ReferenceError，那么这很好的说明了， let也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。

colorChange方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie是一个子级对象，函数不会传递，所以在 freddie实例上不存在 freddie方法：抛出 TypeError。

1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length属性和 splice方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1处的值，故打印为empty，主动 obj[0]获取为 undefined

首先，a和b同时引用了{n:2}对象，接着执行到a.x= a={n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x={n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为{n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。

在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript检查对象是否具有对内存中相同位置的引用。

我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。

这就是为什么{ age: 18}==={ age: 18}和{ age: 18}=={ age: 18}返回 false的原因。

所有对象键（不包括 Symbols）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（'1'）也返回 true。

上面的说法不适用于 Set。在我们的 Set中没有“1”： set.has（'1'）返回 false。它有数字类型 1， set.has（1）返回 true。

这题考察的是对象的键名的转换。

catch块接收参数 x。当我们传递参数时，这与变量的 x不同。这个变量 x是属于 catch作用域的。

之后，我们将这个块级作用域的变量设置为 1，并设置变量 y的值。现在，我们打印块级作用域的变量 x，它等于 1。

在 catch块之外， x仍然是 undefined，而 y是 2。当我们想在 catch块之外的 console.log(x)时，它返回 undefined，而 y返回 2。

关于本次react谷歌浏览器工具和react谷歌插件的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。