整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript错误处理指南

JavaScript错误处理指南

文将分三部分分析 JavaScript 中的错误,首先我们将了解错误的一般情况,之后,我们将关注后端(Node.js + Express.js),最后,我们将重点看下如何处理 React.js 中的错误。选择这些框架,是因为它们是目前最流行的,但是,你应该也能够将这些新发现应用到其他框架中吧!

我们害怕错误,因为错误往往会涉及到在公共场合受到伤害或羞辱。通过犯错误,我们实际上学会了如何不去做某事,以及下次如何做得更好。

显然,这是关于从现实生活的错误中学习。编程中的错误有点不同。它们为我们提供了很好的特征来改进我们的代码,并告诉用户什么地方出了问题(也可能是教他们如何修复它)。

GitHub(https://github.com/gisderdube/graceful-error-handling) 上提供了一个完整的样例项目。

JavaScript 错误和一般处理

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 作为路由框架。让我们考虑下最有效的错误处理结构。我们希望:

  1. 一般错误处理,如某种回退,基本上只是说:“有错误,请再试一次或联系我们”。这并不是特别聪明,但至少通知用户,有地方错了——而不是无限加载或进行类似地处理。
  2. 特殊错误处理为用户提供详细信息,让用户了解有什么问题以及如何解决它,例如,有信息丢失,数据库中的条目已经存在等等。

构建一个自定义 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 种类型:

  1. 全局错误,例如,其中一个常见的错误是来自后端,或者用户没有登录等。
  2. 来自后端的具体错误,例如,用户向后端发送登录凭证。后端答复密码不匹配。前端无法进行此项验证,所以这样的信息只能来自后端。
  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,我对它非常满意。

avaScript编程语言:

1.专门在浏览器编译与执行的编程语言

2.帮助浏览器解决用户提出简单需求

3.基于面向对象采用弱类型语法风格实现

JavaScript学习教程

老杜讲解的JavaScript教程,内容涵盖了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点。

接下来说的JavaScript学习内容均与下边的javaweb学习教程相结合

http://www.bjpowernode.com/?chaijavaweb

基础语法

一、JavaScript命令书写方式

1.在HTML文件中<script>内部进行命令书写

2. 在js文件中书写命令格式【推荐】

二、JavaScript中变量

1.变量声明方式: JavaScript弱类型编程语言,因此禁止使用具体数据类型修饰变量

  • var 变量名;
  • var 变量名1,变量名2;

2.变量赋值方式

  • var 变量名=值
  • var 变量名;
  • 变量名=值;

3.变量名命名规则

1)变量名只能存在字母,数字,下划线, 美元符号($)

2) 变量名不能以数字为开始

3) 不能使用JavaScript关键字作为变量名 var var=10; error

三、JavaScript中数据类型

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中根据变量赋值内容判断变量的数据类型

四、JavaScript中特殊值

1. undefined:javascript中变量没有赋值时,其默认值都是undefined。

此时变量数据类型也是undefined

2.NaN: 表示非法数字。此时变量数据类型是number

3.Infinity:表示一个无穷大数字.此时变量数据类型是number

4.null:表示当前对象指向一个空内存,但是空内存不能存储数据

此时对象数据类型是object

五、JavaScript中控制语句和循环语句

1.与Java控制语句和循环语句语法完全一致

2.控制语句 if ,switch

3.循环语句 for while,do..while

六、JavaScript中数组

1.JavaScript中数组相当于Java中List集合

2.JavaScript中数组一次可以存放任意类型数据

3.JavaScript中数组控制内存个数可以随意改变

七、JavaScript中函数

1.函数声明格式

function 函数名(形参名,形参名){


命令行;


命令行;


eturn 返回值


}

1) 函数声明时,必须使用function修饰进行修饰

2) 函数声明时,禁止指定返回数据类型

3)函数声明时, 形参只能指定名称,但是不能指定数据类型,也不能使用var进行修饰

4)函数声明时,可以通过return指定返回数据。

2.函数调用:

对象.函数(实参)

***window对象中属性和函数在调用时,可以不写window

JavaScript应用篇(面试)

一、JavaScript中dom对象与document对象

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对象

二、dom对象定位方式:

1.根据标签Id属性定位关联的DOM对象

var domObj=document.getElementById("id属性")

2.根据标签name属性定位关联的DOM对象

var domArray=document.getElementsByName("name属性")

3.根据标签类型定位关联的DOM对象

var domArray=document.getElementsByTagName("标签类型")

三、dom对象对标签管理:

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

1.1. 为什么使用this

在常见的编程语言中,几乎都有this这个关键字(Objective-C中使用的是self),但是JavaScript中的this和常见的面向对象语言中的this不太一样:

  • 常见面向对象的编程语言中,比如Java、C++、Swift、Dart等等一系列语言中,this通常只会出现在类的方法中。
  • 也就是你需要有一个类,类中的方法(特别是实例方法)中,this代表的是当前调用对象。
  • 但是JavaScript中的this更加灵活,无论是它出现的位置还是它代表的含义。

使用this有什么意义呢?下面的代码中,我们通过对象字面量创建出来一个对象,当我们调用对象的方法时,希望将对象的名称一起进行打印。

如果没有this,那么我们的代码会是下面的写法:

  • 在方法中,为了能够获取到name名称,必须通过obj的引用(变量名称)来获取。
  • 但是这样做有一个很大的弊端:如果我将obj的名称换成了info,那么所有的方法中的obj都需要换成info。
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来进行优化:

  • 当我们通过obj去调用running、eating、studying这些方法时,this就是指向的obj对象
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的场景到处都是,这也是为什么它不容易理解的原因。

1.2. this指向什么

我们先说一个最简单的,this在全局作用域下指向什么?

  • 这个问题非常容易回答,在浏览器中测试就是指向window
  • 所以,在全局作用域下,我们可以认为this就是指向的window
console.log(this); // window

var name="why";
console.log(this.name); // why
console.log(window.name); // why

但是,开发中很少直接在全局作用域下去使用this,通常都是在函数中使用

所有的函数在被调用时,都会创建一个执行上下文:

  • 这个上下文中记录着函数的调用栈、函数的调用方式、传入的参数信息等;
  • 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"}对象

上面的案例可以给我们什么样的启示呢?

  • 1.函数在调用时,JavaScript会默认给this绑定一个值;
  • 2.this的绑定和定义的位置(编写的位置)没有关系;
  • 3.this的绑定和调用方式以及调用的位置有关系;
  • 4.this是在运行时被绑定的;

那么this到底是怎么样的绑定规则呢?一起来学习一下吧

二. this绑定规则

我们现在已经知道this无非就是在函数调用时被绑定的一个对象,我们就需要知道它在不同的场景下的绑定规则即可。

2.1. 默认绑定

什么情况下使用默认绑定呢?独立函数调用。

  • 独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用;

案例一:普通函数调用

  • 该函数直接被调用,并没有进行任何的对象关联;
  • 这种独立的函数调用会使用默认绑定,通常默认绑定时,函数中的this指向全局对象(window);
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);

我们对案例进行一些修改,考虑一下打印结果是否会发生变化:

  • 这里的结果依然是window,为什么呢?
  • 原因非常简单,在真正函数调用的位置,并没有进行任何的对象绑定,只是一个独立函数的调用;
function foo(func) {
  func()
}

var obj={
  name: "why",
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

2.2. 隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的:

  • 也就是说它的调用位置中,是通过某个对象发起的函数调用。

案例一:通过对象调用函数

  • foo的调用位置是obj.foo()方式进行调用的
  • 那么foo调用时this会隐式地被绑定到obj对象上
function foo() {
  console.log(this); // obj对象
}

var obj={
  name: "why",
  foo: foo
}

obj.foo();

案例二:案例一的变化

  • 我们通过obj2又引用了obj1对象,再通过obj1对象调用foo函数;
  • 那么foo调用的位置上其实还是obj1被绑定了this;
function foo() {
  console.log(this); // obj对象
}

var obj1={
  name: "obj1",
  foo: foo
}

var obj2={
  name: "obj2",
  obj1: obj1
}

obj2.obj1.foo();

案例三:隐式丢失

  • 结果最终是window,为什么是window呢?
  • 因为foo最终被调用的位置是bar,而bar在进行调用时没有绑定任何的对象,也就没有形成隐式绑定;
  • 相当于是一种默认绑定;
function foo() {
  console.log(this);
}

var obj1={
  name: "obj1",
  foo: foo
}

// 讲obj1的foo赋值给bar
var bar=obj1.foo;
bar();

2.3. 显示绑定

隐式绑定有一个前提条件:

  • 必须在调用的对象内部有一个对函数的引用(比如一个属性);
  • 如果没有这样的引用,在进行调用时,会报找不到该函数的错误;
  • 正是通过这个引用,间接地将this绑定到了这个对象上;

如果我们不希望在 对象内部 包含这个函数的引用,同时又希望在这个对象上进行强制调用,该怎么做呢?

  • JavaScript所有的函数都可以使用call和apply方法(这个和Prototype有关)。
    • 它们两个的区别这里不再展开;
    • 其实非常简单,第一个参数是相同的,后面的参数,apply为数组,call为参数列表;
  • 这两个函数的第一个参数都要求是一个对象,这个对象的作用是什么呢?就是给this准备的。
  • 在调用这个函数时,会将this绑定到这个传入的对象上。

因为上面的过程,我们明确地绑定了this指向的对象,所以称之为 显示绑定

2.3.1. call、apply

通过call或者apply绑定this对象

  • 显示绑定后,this就会明确地指向绑定的对象
function foo() {
  console.log(this);
}

foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123

2.3.2. bind函数

如果我们希望一个函数总是显示的绑定到一个对象上,可以怎么做呢?

方案一:自己手写一个辅助函数(了解)

  • 我们手动写了一个bind的辅助函数
  • 这个辅助函数的目的是在执行foo时,总是让它的this绑定到obj对象上
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对象

2.3.3. 内置函数

有些时候,我们会调用一些JavaScript的内置函数,或者一些第三方库中的内置函数。

  • 这些内置函数会要求我们传入另外一个函数;
  • 我们自己并不会显示的调用这些函数,而且JavaScript内部或者第三方库内部会帮助我们执行;
  • 这些函数中的this又是如何绑定的呢?

案例一:setTimeout

  • setTimeout中会传入一个函数,这个函数中的this通常是window
setTimeout(function() {
  console.log(this); // window
}, 1000);

为什么这里是window呢?

  • 这个和setTimeout源码的内部调用有关;
  • setTimeout内部是通过apply进行绑定的this对象,并且绑定的是全局对象;

案例二:数组的forEach

数组有一个高阶函数forEach,用于函数的遍历:

  • 在forEach中传入的函数打印的也是Window对象;
  • 这是因为默认情况下传入的函数是自动调用函数(默认绑定);
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>

获取元素节点,并且监听点击:

  • 在点击事件的回调中,this指向谁呢?box对象;
  • 这是因为在发生点击时,执行传入的回调函数被调用时,会将box对象绑定到该函数中;
var box=document.querySelector(".box");
box.onclick=function() {
  console.log(this); // box对象
}

所以传入到内置函数的回调函数this如何确定呢?

  • 某些内置的函数,我们很难确定它内部是如何调用传入的回调函数;
  • 一方面可以通过分析源码来确定,另一方面我们可以通过经验(见多识广)来确定;
  • 但是无论如何,通常都是我们之前讲过的规则来确定的;

2.4. new绑定

JavaScript中的函数可以当做一个类的构造函数来使用,也就是使用new关键字。

使用new关键字来调用函数时,会执行如下的操作:

  • 1.创建一个全新的对象;
  • 2.这个新对象会被执行Prototype连接;
  • 3.这个新对象会绑定到函数调用的this上(this的绑定在这个步骤完成);
  • 4.如果函数没有返回其他对象,表达式会返回这个新对象;
// 创建Person
function Person(name) {
  console.log(this); // Person {}
  this.name=name; // Person {name: "why"}
}

var p=new Person("why");
console.log(p);

2.5. 规则优先级

学习了四条规则,接下来开发中我们只需要去查找函数的调用应用了哪条规则即可,但是如果一个函数调用位置应用了多条规则,优先级谁更高呢?

1.默认规则的优先级最低

毫无疑问,默认规则的优先级是最低的,因为存在其他规则时,就会通过其他规则的方式来绑定this

2.显示绑定优先级高于隐式绑定

显示绑定和隐式绑定哪一个优先级更高呢?这个我们可以测试一下:

  • 结果是obj2,说明是显示绑定生效了
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绑定优先级高于隐式绑定

  • 结果是foo,说明是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后的函数同时使用呢?可以

  • 结果显示为foo,那么说明是new绑定生效了
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绑定

优先级总结:

  • new绑定 > 显示绑定(bind)> 隐式绑定 > 默认绑定

三. this规则之外

我们讲到的规则已经足以应付平时的开发,但是总有一些语法,超出了我们的规则之外。(神话故事和动漫中总是有类似这样的人物)

3.1. 忽略显示绑定

如果在显示绑定中,我们传入一个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

3.2. 间接函数引用

另外一种情况,创建一个函数的 间接引用,这种情况使用默认绑定规则。

我们先来看下面的案例结果是什么?

  • (num2=num1)的结果是num1的值;
var num1=100;
var num2=0;
var result=(num2=num1);
console.log(result); // 100

我们来下面的函数赋值结果:

  • 赋值(obj2.foo=obj1.foo)的结果是foo函数;
  • foo函数被直接调用,那么是默认绑定;
function foo() {
  console.log(this);
}

var obj1={
  name: "obj1",
  foo: foo
}; 

var obj2={
  name: "obj2"
}

obj1.foo(); // obj1对象
(obj2.foo=obj1.foo)();  // window

3.3. ES6箭头函数

在ES6中新增一个非常好用的函数类型:箭头函数

  • 这里不再具体介绍箭头函数的用法,可以自行学习。

箭头函数不使用this的四种标准规则(也就是不绑定this),而是根据外层作用域来决定this。

我们来看一个模拟网络请求的案例:

  • 这里我使用setTimeout来模拟网络请求,请求到数据后如何可以存放到data中呢?
  • 我们需要拿到obj对象,设置data;
  • 但是直接拿到的this是window,我们需要在外层定义:var _this=this
  • 在setTimeout的回调函数中使用_this就代表了obj对象
var obj={
  data: [],
  getData: function() {
    var _this=this;
    setTimeout(function() {
      // 模拟获取到的数据
      var res=["abc", "cba", "nba"];
      _this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

上面的代码在ES6之前是我们最常用的方式,从ES6开始,我们会使用箭头函数:

  • 为什么在setTimeout的回调函数中可以直接使用this呢?
  • 因为箭头函数并不绑定this对象,那么this引用就会从上层作用域中找到对应的this
var obj={
  data: [],
  getData: function() {
    setTimeout(()=> {
      // 模拟获取到的数据
      var res=["abc", "cba", "nba"];
      this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

思考:如果getData也是一个箭头函数,那么setTimeout中的回调函数中的this指向谁呢?

  • 答案是window;
  • 依然是不断的从上层作用域找,那么找到了全局作用域;
  • 在全局作用域内,this代表的就是window
var obj={
  data: [],
  getData: ()=> {
    setTimeout(()=> {
      console.log(this); // window
    }, 1000);
  }
}

obj.getData();

四. this面试题

4.1. 面试题一:

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
}

4.2. 面试题二:

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);

下面是代码解析: