文将分三部分分析 JavaScript 中的错误,首先我们将了解错误的一般情况,之后,我们将关注后端(Node.js + Express.js),最后,我们将重点看下如何处理 React.js 中的错误。选择这些框架,是因为它们是目前最流行的,但是,你应该也能够将这些新发现应用到其他框架中吧!
我们害怕错误,因为错误往往会涉及到在公共场合受到伤害或羞辱。通过犯错误,我们实际上学会了如何不去做某事,以及下次如何做得更好。
显然,这是关于从现实生活的错误中学习。编程中的错误有点不同。它们为我们提供了很好的特征来改进我们的代码,并告诉用户什么地方出了问题(也可能是教他们如何修复它)。
GitHub(https://github.com/gisderdube/graceful-error-handling) 上提供了一个完整的样例项目。
throw new Error(’something went wrong’)?会在 JavaScript 中创建一个错误实例,并停止脚本的执行,除非你对错误做了一些处理。当你作为 JavaScript 开发者开启自己的职业生涯时,你自己很可能不会这样做,但是,你已经从其他库(或运行时)那里看到了,例如,类似“ReferenceError: fs 未定义”这样的错误。
Error 对象
Error 对象有两个内置属性供我们使用。第一个是消息,作为参数传递给 Error 构造函数,例如 new Error(“这是错误消息”)。你可以通过 message 属性访问消息:
const myError=new Error(‘请改进代码’) console.log(myError.message) // 请改进代码
第二个是错误堆栈跟踪,这个属性非常重要。你可以通过 stack 属性访问它。错误堆栈将为你提供历史记录(调用堆栈),从中可以查看哪个文件导致了错误。堆栈的上部也包括消息,然后是实际的堆栈,从距离错误发生最近的点开始,一直到最外层“需要为错误负责”的文件:
Error: 请改进代码 at Object.<anonymous> (/Users/gisderdube/Documents/_projects/hacking.nosync/error-handling/src/general.js:1:79) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Function.Module.runMain (internal/modules/cjs/loader.js:742:12) at startup (internal/bootstrap/node.js:266:19) at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)
抛出和处理错误
现在,Error 实例本身不会导致任何结果,例如,new Error(’…’) 不会做任何事情。当错误被抛出时,就会变得更有趣。然后,如前所述,脚本将停止执行,除非你在流程中以某种方式对它进行了处理。记住,是手动抛出错误,还是由库抛出错误,甚至由运行时本身(Node 或浏览器),都没有关系。让我们看看如何在不同的场景中处理这些错误。
try …. catch
这是最简单但经常被遗忘的错误处理方法——多亏 async / await,它的使用现在又多了起来。它可以用来捕获任何类型的同步错误,例如,如果我们不把 console.log(b) 放在一个 try … catch 块中,脚本会停止执行。
… finally
有时候,不管是否有错误,代码都需要执行。你可以使用第三个可选块 finally。通常,这与在 try…catch 语句后面加一行代码是一样的,但它有时很有用。
异步性——回调
异步性,这是在使用 JavaScript 时必须考虑的一个主题。当你有一个异步函数,并且该函数内部发生错误时,你的脚本将继续执行,因此,不会立即出现任何错误。当使用回调函数处理异步函数时(不推荐),你通常会在回调函数中收到两个参数,如下所示:
如果有错误,err 参数就等同于那个错误。如果没有,参数将是 undefined 或 null。要么在 if(err) 块中返回某项内容,要么将其他指令封装在 else 块中,这一点很重要,否则你可能会得到另一个错误,例如,result 可能未定义,而你试图访问 result.data,类似这样的情况。
异步性——Promises
处理异步性的更好方法是使用 Promises。在这一点上,除了代码可读性更强之外,我们还改进了错误处理。只要有一个 catch 块,我们就不再需要太关注具体的错误捕获。在链接 Promises 时,catch 块捕获会自 Promises 执行或上一个 catch 块以来的所有错误。注意,没有 catch 块的 Promises 不会终止脚本,但会给你一条可读性较差的消息,比如:
(node:7741) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: something went wrong (node:7741) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. */
因此,务必要在 Promises 中加入 catch 块。
回到 try … catch
随着 JavaScript 引入 async / await,我们回到了最初的错误处理方法,借助 try … catch … finally,错误处理变得非常简单。
因为这和我们处理“普通”同步错误的方法是一样的,所以如果需要的话,更容易使用作用域更大的 catch 语句。
现在,我们已经有了处理错误的工具,让我们看下,我们在实际情况下能用它们做什么。后端错误的产生和处理是应用程序至关重要的组成部分。对于错误处理,有不同的方法。我将向你展示一个自定义 Error 构造函数和错误代码的方法,我们可以轻松地传递到前端或任何 API 消费者。构建后端的细节并不重要,基本思路不变。
我们将使用 Express.js 作为路由框架。让我们考虑下最有效的错误处理结构。我们希望:
构建一个自定义 Error 构造函数
我们将使用已有的 Error 构造函数并扩展它。继承在 JavaScript 中是一件危险的事情,但根据我的经验,在这种情况下,它非常有用。我们为什么需要它?我们仍然希望堆栈跟踪给我们一个很好的调试体验。扩展 JavaScript 原生 Error 构造函数可以让我们方便地获得堆栈跟踪。我们唯一要做的是添加代码(我们稍后可以通过错误代码访问)和要传递给前端的状态(http 状态代码)。
如何处理路由
在完成 Error 的自定义之后,我们需要设置路由结构。正如我指出的那样,我们想要一个单点真错误处理,就是说,对于每一个路由,我们要有相同的错误处理行为。在默认情况下,由于路由都是封装的,所以 Express 并不真正支持那种方式。
为了解决这个问题,我们可以实现一个路由处理程序,并把实际的路由逻辑定义为普通的函数。这样,如果路由功能(或任何内部函数)抛出一个错误,它将返回到路由处理程序,然后可以传给前端。当后端发生错误时,我们可以用以下格式传递一个响应给前端——比如一个 JSON API:
{ error: 'SOME_ERROR_CODE', description: 'Something bad happened. Please try again or contact support.' }
准备好不知所措。当我说下面的话时,我的学生总是生我的气:
如果你咋看之下并不是什么都懂,那没问题。只要使用一段时间,你就会发现为什么要那样。
顺便说一下,这可以称为自上而下的学习,我非常喜欢。
路由处理程序就是这个样子:
我希望你能读下代码中的注释,我认为那比我在这里解释更有意义。现在,让我们看下实际的路由文件是什么样子:
在这些例子中,我没有做任何有实际要求的事情,我只是假设不同的错误场景。例如,GET /city 在第 3 行结束,POST /city 在第 8 号结束等等。这也适用于查询参数,例如,GET /city?startsWith=R。本质上,你会有一个未处理的错误,前端会收到:
{ error: 'GENERIC', description: 'Something went wrong. Please try again or contact support.' }
或者你将手动抛出 CustomError,例如:
throw new CustomError('MY_CODE', 400, 'Error description')
上述代码会转换成:
{ error: 'MY_CODE', description: 'Error description' }
既然我们有了这个漂亮的后端设置,我们就不会再把错误日志泄漏到前端,而总是返回有用的信息,说明出现了什么问题。
确保你已经在 GitHub(https://github.com/gisderdube/graceful-error-handling) 上看过完整的库。你可以把它用在任何项目中,并根据自己的需要来修改它!
下一个也是最后一个步骤是管理前端的错误。这里,你要使用第一部分描述的工具处理由前端逻辑产生的错误。不过,后端的错误也要显示。首先,让我们看看如何显示错误。如前所述,我们将使用 React 进行演练。
把错误保存在 React 状态中
和其他数据一样,错误和错误消息会变化,因此,你想把它们放在组件状态中。在默认情况下,你想要在加载时重置错误,以便用户第一次看到页面时,不会看到错误。
接下来我们必须澄清的是不同错误类型及与其匹配的可视化表示。就像在后端一样,有 3 种类型:
2 和 3 非常类似,虽然源头不一样,但如果你愿意,就可以在同样的 state 中处理。我们将从代码中看下如何实现。
我将使用 React 的原生 state 实现,但是,你还可以使用类似 MobX 或 Redux 这样的状态管理系统。
全局错误
通常,我将把这些错误保存在最外层的有状态组件中,并渲染一个静态 UI 元素,这可能是屏幕顶部的一个红色横幅、模态或其他什么东西,设计实现由你决定。
让我们看下代码:
正如你看到的那样,Application.js 中的状态存在错误。我们也有方法可以重置并改变错误的值。我们把值和重置方法传递给 GlobalError 组件,在点击’x’时,该组件会显示错误并重置它。让我们看看 GlobalError 组件:
你可以看到,在第 5 行,如果没有错误,我们就不做任何渲染。这可以防止我们的页面上出现一个空的红框。当然,你可以改变这个组件的外观和行为。例如,你可以将“x”替换为 Timeout,几秒钟后重置错误状态。
现在,你已经准备好在任何地方使用全局错误状态了,只是从 Application.js 把 _setError 向下传递,而且,你可以设置全局错误,例如,当一个请求从后端返回了字段 error: ‘GENERIC’。例如:
如果你比较懒,到这里就可以结束了。即使你有具体的错误,你总是可以改变全局错误状态,并把错误提示框显示在页面顶部。不过,我将向你展示如何处理和显示具体的错误。为什么?首先,这是关于错误处理的权威指南,所以我不能停在这里。其次,如果你只是把所有的错误都作为全局错误来显示,那么体验人员会疯掉。
处理具体的请求错误
和全局错误类似,我们也有位于其他组件内部的局部错误状态,过程相同:
有件事要记住,清除错误通常有一个不同的触发器。用’ x ’删除错误是没有意义的。关于这一点,在发出新请求时清除错误会更有意义。你还可以在用户进行更改时清除错误,例如当修改输入值时。
源于前端的错误
如前所述,这些错误可以使用与处理后端具体错误相同的方式(状态)进行处理。这次,我们将使用一个有输入字段的示例,只允许用户在实际提供以下输入时删除一个城市:
使用错误代码实现错误国际化
也许你一直想知道为什么我们有这些错误代码,例如 GENERIC ,我们只是显示从后端传递过来的错误描述。现在,随着你的应用越来越大,你就会希望征服新的市场,并在某个时候面临多种语言支持的问题。如果你到了这个时候,你就可以使用前面提到的错误代码使用用户的语言来显示恰当的描述。
我希望你对如何处理错误有了一些了解。忘掉 console.error(err),它现在已经是过去时了。可以使用它进行调试,但它不应该出现在最终的产品构建中。为了防止这种情况,我建议你使用日志库,我过去一直使用 loglevel,我对它非常满意。
1.专门在浏览器编译与执行的编程语言
2.帮助浏览器解决用户提出简单需求
3.基于面向对象采用弱类型语法风格实现
老杜讲解的JavaScript教程,内容涵盖了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点。
接下来说的JavaScript学习内容均与下边的javaweb学习教程相结合
http://www.bjpowernode.com/?chaijavaweb
1.在HTML文件中<script>内部进行命令书写
2. 在js文件中书写命令格式【推荐】
1.变量声明方式: JavaScript弱类型编程语言,因此禁止使用具体数据类型修饰变量
2.变量赋值方式
3.变量名命名规则
1)变量名只能存在字母,数字,下划线, 美元符号($)
2) 变量名不能以数字为开始
3) 不能使用JavaScript关键字作为变量名 var var=10; error
1.分类:
1)基本数据类型
2) 高级引用数据类型
2. 基本数据类型
1) number类型:数字类型,整数,单精度,双精度都是number类型
2) string类型: 字符串类型,字符串既可以包裹在一对双引号中也可以包裹在一对单引号 "abc" 'abc'
3) boolean类型: 布尔类型 值true/false
3.高级引用数据类型
1) function类型:函数类型.相当于Java中Method类型。一个function类型对象用于管理一个函数
2) object类型: 在JavaScript中所有通过构造函数生成的对象都是object
4. 变量与数据类型之间关系:
JavaScript中根据变量赋值内容判断变量的数据类型
1. undefined:javascript中变量没有赋值时,其默认值都是undefined。
此时变量数据类型也是undefined
2.NaN: 表示非法数字。此时变量数据类型是number
3.Infinity:表示一个无穷大数字.此时变量数据类型是number
4.null:表示当前对象指向一个空内存,但是空内存不能存储数据
此时对象数据类型是object
1.与Java控制语句和循环语句语法完全一致
2.控制语句 if ,switch
3.循环语句 for while,do..while
1.JavaScript中数组相当于Java中List集合
2.JavaScript中数组一次可以存放任意类型数据
3.JavaScript中数组控制内存个数可以随意改变
1.函数声明格式
function 函数名(形参名,形参名){
命令行;
命令行;
eturn 返回值
}
1) 函数声明时,必须使用function修饰进行修饰
2) 函数声明时,禁止指定返回数据类型
3)函数声明时, 形参只能指定名称,但是不能指定数据类型,也不能使用var进行修饰
4)函数声明时,可以通过return指定返回数据。
2.函数调用:
对象.函数(实参)
***window对象中属性和函数在调用时,可以不写window
1.dom对象
1) dom对象:document Object model;文档模型对象
2) 一个dom对象用于管理一个HTML标签
3)浏览器每加载一个HTML标签时,自动为这个HTML标签生成一个DOM对象
2.document
1)document对象 文档对象
2) 浏览器根据html标签声明顺序在内存中以树形结构方式存储DOM对象.
3) document对象由浏览器生成 。一个浏览器只有一个document对象
4)document对象负责根据定位条件定位dom对象
1.根据标签Id属性定位关联的DOM对象
var domObj=document.getElementById("id属性")
2.根据标签name属性定位关联的DOM对象
var domArray=document.getElementsByName("name属性")
3.根据标签类型定位关联的DOM对象
var domArray=document.getElementsByTagName("标签类型")
1.dom对象作用:用于对管理的标签中属性进行赋值与取值操作
2.dom对象管理标签中value属性:
var num=dom.value; //读取
dom.value=num; //赋值
3.dom对象管理标签状态属性
checked是boolean checked=true 表示被选中,checked=false 表示未被选中
4.dom对象管理双目标签提示信息
dom.innerText=值;
var num=dom.innerText;
5.dom对象管理标签的样式属性
dom.style.样式属性名=值
var num=dom.style.样式属性名
1. 介绍:
1)HTML标签中一组属性
2)监听用户在何时以何种方式来操作当前标签。当监听行为发生时。
监听事件通知浏览器调用javascript函数进行处理
2.分类:
1)监听用户使用鼠标操作标签---鼠标监听事件
2) 监听用户使用键盘操作标签---键盘监听事件
3.键盘监听事件
1)onkeydown: 监听用户在何时在当前标签上按下键盘
2)onkeyup:监听用户在何时在当前标签上弹起键盘
3)onkeypress:监听用户在何时在当前标签按下一次键盘
4.键盘监听事件
1)onclick:监听用户何时使用鼠标单击当前的HTML标签
2) onblur:监听用户何时使用鼠标让当前标签丢失光标
3)onfocus:监听用户何时使用鼠标让当前标签获得光标
4) onmouseover:监听用户何时使用鼠标悬停在标签上方
5) onmouseout:监听用户何时使用鼠标从标签上方移开
6)onchange:监听用户何时使用鼠标改变下拉列表中选中项
his是JavaScript中的一个关键字,但是又一个相对比较特别的关键字,不像function、var、for、if这些关键字一样,可以很清楚的搞清楚它到底是如何使用的。
this会在执行上下文中绑定一个对象,但是是根据什么条件绑定的呢?在不同的执行条件下会绑定不同的对象,这也是让人捉摸不定的地方。
这一次,我们一起来彻底搞定this到底是如何绑定的吧!
在常见的编程语言中,几乎都有this这个关键字(Objective-C中使用的是self),但是JavaScript中的this和常见的面向对象语言中的this不太一样:
使用this有什么意义呢?下面的代码中,我们通过对象字面量创建出来一个对象,当我们调用对象的方法时,希望将对象的名称一起进行打印。
如果没有this,那么我们的代码会是下面的写法:
var obj={
name: "why",
running: function() {
console.log(obj.name + " running");
},
eating: function() {
console.log(obj.name + " eating");
},
studying: function() {
console.log(obj.name + " studying");
}
}
事实上,上面的代码,在实际开发中,我们都会使用this来进行优化:
var obj={
name: "why",
running: function() {
console.log(this.name + " running");
},
eating: function() {
console.log(this.name + " eating");
},
studying: function() {
console.log(this.name + " studying");
}
}
所以我们会发现,在某些函数或者方法的编写中,this可以让我们更加便捷的方式来引用对象,在进行一些API设计时,代码更加的简洁和易于复用。
当然,上面只是应用this的一个场景而已,开发中使用到this的场景到处都是,这也是为什么它不容易理解的原因。
我们先说一个最简单的,this在全局作用域下指向什么?
console.log(this); // window
var name="why";
console.log(this.name); // why
console.log(window.name); // why
但是,开发中很少直接在全局作用域下去使用this,通常都是在函数中使用。
所有的函数在被调用时,都会创建一个执行上下文:
我们先来看一个让人困惑的问题:
// 定义一个函数
function foo() {
console.log(this);
}
// 1.调用方式一: 直接调用
foo(); // window
// 2.调用方式二: 将foo放到一个对象中,再调用
var obj={
name: "why",
foo: foo
}
obj.foo() // obj对象
// 3.调用方式三: 通过call/apply调用
foo.call("abc"); // String {"abc"}对象
上面的案例可以给我们什么样的启示呢?
那么this到底是怎么样的绑定规则呢?一起来学习一下吧
我们现在已经知道this无非就是在函数调用时被绑定的一个对象,我们就需要知道它在不同的场景下的绑定规则即可。
什么情况下使用默认绑定呢?独立函数调用。
案例一:普通函数调用
function foo() {
console.log(this); // window
}
foo();
案例二:函数调用链(一个函数调用另外一个函数)
// 2.案例二:
function test1() {
console.log(this); // window
test2();
}
function test2() {
console.log(this); // window
test3()
}
function test3() {
console.log(this); // window
}
test1();
案例三:将函数作为参数,传入到另一个函数中
function foo(func) {
func()
}
function bar() {
console.log(this); // window
}
foo(bar);
我们对案例进行一些修改,考虑一下打印结果是否会发生变化:
function foo(func) {
func()
}
var obj={
name: "why",
bar: function() {
console.log(this); // window
}
}
foo(obj.bar);
另外一种比较常见的调用方式是通过某个对象进行调用的:
案例一:通过对象调用函数
function foo() {
console.log(this); // obj对象
}
var obj={
name: "why",
foo: foo
}
obj.foo();
案例二:案例一的变化
function foo() {
console.log(this); // obj对象
}
var obj1={
name: "obj1",
foo: foo
}
var obj2={
name: "obj2",
obj1: obj1
}
obj2.obj1.foo();
案例三:隐式丢失
function foo() {
console.log(this);
}
var obj1={
name: "obj1",
foo: foo
}
// 讲obj1的foo赋值给bar
var bar=obj1.foo;
bar();
隐式绑定有一个前提条件:
如果我们不希望在 对象内部 包含这个函数的引用,同时又希望在这个对象上进行强制调用,该怎么做呢?
因为上面的过程,我们明确地绑定了this指向的对象,所以称之为 显示绑定。
通过call或者apply绑定this对象
function foo() {
console.log(this);
}
foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123
如果我们希望一个函数总是显示的绑定到一个对象上,可以怎么做呢?
方案一:自己手写一个辅助函数(了解)
function foo() {
console.log(this);
}
var obj={
name: "why"
}
function bind(func, obj) {
return function() {
return func.apply(obj, arguments);
}
}
var bar=bind(foo, obj);
bar(); // obj对象
bar(); // obj对象
bar(); // obj对象
方案二:使用Function.prototype.bind
function foo() {
console.log(this);
}
var obj={
name: "why"
}
var bar=foo.bind(obj);
bar(); // obj对象
bar(); // obj对象
bar(); // obj对象
有些时候,我们会调用一些JavaScript的内置函数,或者一些第三方库中的内置函数。
案例一:setTimeout
setTimeout(function() {
console.log(this); // window
}, 1000);
为什么这里是window呢?
案例二:数组的forEach
数组有一个高阶函数forEach,用于函数的遍历:
var names=["abc", "cba", "nba"];
names.forEach(function(item) {
console.log(this); // 三次window
});
我们是否可以改变该函数的this指向呢?
forEach参数
var names=["abc", "cba", "nba"];
var obj={name: "why"};
names.forEach(function(item) {
console.log(this); // 三次obj对象
}, obj);
案例三:div的点击
如果我们有一个div元素:
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box"></div>
获取元素节点,并且监听点击:
var box=document.querySelector(".box");
box.onclick=function() {
console.log(this); // box对象
}
所以传入到内置函数的回调函数this如何确定呢?
JavaScript中的函数可以当做一个类的构造函数来使用,也就是使用new关键字。
使用new关键字来调用函数时,会执行如下的操作:
// 创建Person
function Person(name) {
console.log(this); // Person {}
this.name=name; // Person {name: "why"}
}
var p=new Person("why");
console.log(p);
学习了四条规则,接下来开发中我们只需要去查找函数的调用应用了哪条规则即可,但是如果一个函数调用位置应用了多条规则,优先级谁更高呢?
1.默认规则的优先级最低
毫无疑问,默认规则的优先级是最低的,因为存在其他规则时,就会通过其他规则的方式来绑定this
2.显示绑定优先级高于隐式绑定
显示绑定和隐式绑定哪一个优先级更高呢?这个我们可以测试一下:
function foo() {
console.log(this);
}
var obj1={
name: "obj1",
foo: foo
}
var obj2={
name: "obj2",
foo: foo
}
// 隐式绑定
obj1.foo(); // obj1
obj2.foo(); // obj2
// 隐式绑定和显示绑定同时存在
obj1.foo.call(obj2); // obj2, 说明显式绑定优先级更高
3.new绑定优先级高于隐式绑定
function foo() {
console.log(this);
}
var obj={
name: "why",
foo: foo
}
new obj.foo(); // foo对象, 说明new绑定优先级更高
4.new绑定优先级高于bind
new绑定和call、apply是不允许同时使用的,所以不存在谁的优先级更高
function foo() {
console.log(this);
}
var obj={
name: "obj"
}
var foo=new foo.call(obj);
new和call同时使用
但是new绑定是否可以和bind后的函数同时使用呢?可以
function foo() {
console.log(this);
}
var obj={
name: "obj"
}
// var foo=new foo.call(obj);
var bar=foo.bind(obj);
var foo=new bar(); // 打印foo, 说明使用的是new绑定
优先级总结:
我们讲到的规则已经足以应付平时的开发,但是总有一些语法,超出了我们的规则之外。(神话故事和动漫中总是有类似这样的人物)
如果在显示绑定中,我们传入一个null或者undefined,那么这个显示绑定会被忽略,使用默认规则:
function foo() {
console.log(this);
}
var obj={
name: "why"
}
foo.call(obj); // obj对象
foo.call(null); // window
foo.call(undefined); // window
var bar=foo.bind(null);
bar(); // window
另外一种情况,创建一个函数的 间接引用,这种情况使用默认绑定规则。
我们先来看下面的案例结果是什么?
var num1=100;
var num2=0;
var result=(num2=num1);
console.log(result); // 100
我们来下面的函数赋值结果:
function foo() {
console.log(this);
}
var obj1={
name: "obj1",
foo: foo
};
var obj2={
name: "obj2"
}
obj1.foo(); // obj1对象
(obj2.foo=obj1.foo)(); // window
在ES6中新增一个非常好用的函数类型:箭头函数
箭头函数不使用this的四种标准规则(也就是不绑定this),而是根据外层作用域来决定this。
我们来看一个模拟网络请求的案例:
var obj={
data: [],
getData: function() {
var _this=this;
setTimeout(function() {
// 模拟获取到的数据
var res=["abc", "cba", "nba"];
_this.data.push(...res);
}, 1000);
}
}
obj.getData();
上面的代码在ES6之前是我们最常用的方式,从ES6开始,我们会使用箭头函数:
var obj={
data: [],
getData: function() {
setTimeout(()=> {
// 模拟获取到的数据
var res=["abc", "cba", "nba"];
this.data.push(...res);
}, 1000);
}
}
obj.getData();
思考:如果getData也是一个箭头函数,那么setTimeout中的回调函数中的this指向谁呢?
var obj={
data: [],
getData: ()=> {
setTimeout(()=> {
console.log(this); // window
}, 1000);
}
}
obj.getData();
var name="window";
var person={
name: "person",
sayName: function () {
console.log(this.name);
}
};
function sayName() {
var sss=person.sayName;
sss();
person.sayName();
(person.sayName)();
(b=person.sayName)();
}
sayName();
这道面试题非常简单,无非就是绕一下,希望把面试者绕晕:
function sayName() {
var sss=person.sayName;
// 独立函数调用,没有和任何对象关联
sss(); // window
// 关联
person.sayName(); // person
(person.sayName)(); // person
(b=person.sayName)(); // window
}
var name='window'
var person1={
name: 'person1',
foo1: function () {
console.log(this.name)
},
foo2: ()=> console.log(this.name),
foo3: function () {
return function () {
console.log(this.name)
}
},
foo4: function () {
return ()=> {
console.log(this.name)
}
}
}
var person2={ name: 'person2' }
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
下面是代码解析:
*请认真填写需求信息,我们会在24小时内与您取得联系。