S03-06 JS-高级-进阶语法
[TOC]
箭头函数
箭头函数
箭头函数(arrow function)是 ES6 之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：
特点：
箭头函数不会绑定 this、arguments属性；
箭头函数不能作为构造函数来使用（不能和 new 一起来使用，会抛出错误，因为箭头函数没有原型）；
语法：
箭头函数如何编写呢？
const foo = (name, age) => {};(): 函数的参数
{}: 函数的执行体
箭头函数-缩写
优化一: 如果只有一个参数可以省略()
const foo = (name) => {};优化二: 如果函数执行体中只有一行代码, 那么可以省略大括号，并且这行代码的返回值会作为整个函数的返回值
const foo = (name) => console.log(name);
const foo = (name) => true;优化三: 如果函数执行体只返回一个对象, 那么需要给这个对象加上()
const foo = (name) => ({ name: "tom" });箭头函数-this
之前的代码在 ES6 之前是我们最常用的方式，从 ES6 开始，我们会使用箭头函数：
为什么在 setTimeout 的回调函数中可以直接使用 this 呢？
因为箭头函数并不绑定 this 对象，那么 this 引用就会从上层作用域中找到对应的 this
// 1. ES5中在异步函数中获取this
const obj = {
name: "obj",
data: [],
getData: function () {
+ let _this = this;
setTimeout(function () {
const res = ["tom", "jack", "jerry"];
+ console.log(this) // => window
+ console.log(_this); // => obj
+ _this.data.push(...res);
+ console.log(_this.data);
});
},
};
obj.getData();
// 2. 箭头函数中在异步函数中获取this
const obj2 = {
name: "obj2",
data: [],
getData: function () {
setTimeout(() => {
const res = ["this", "is", "es6"];
+ console.log(this); // => obj2
+ this.data.push(...res);
+ console.log(this.data);
});
},
};
obj2.getData();思考： 如果 getData 也是一个箭头函数，那么 setTimeout 中的回调函数中的 this 指向谁呢？
答案：window
this
API
- fn.apply(thisArg, args?)：
，调用一个具有给定this值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数。- thisArg：
any，要绑定给 this 关键字的值。在函数内部，我们可以通过 this 访问到该值 - args：
any[]，函数的实参，必须是一个数组
- thisArg：
- fn.call(thisArg, arg1?, arg2?,...)：
，使用一个指定的this值和单独给出的一个或多个参数来调用一个函数- thisArg：
any，要绑定给 this 关键字的值。在函数内部，我们可以通过 this 访问到该值 - arg1?, arg2?,...：
any，函数的实参列表
- thisArg：
- fn.bind(thisArg, arg1?, arg2?,...)：
，创建一个新的绑定函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。- thisArg：
any，要绑定给 this 关键字的值。在函数内部，我们可以通过 this 访问到该值 - arg1?, arg2?,...：
any，函数的实参列表
- thisArg：
this 的绑定规则
this 指向
我们先来看一个让人困惑的问题：
- 定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果
这个的案例可以给我们什么样的启示呢？
1、函数在调用时，JavaScript 会默认给 this 绑定一个值；
2、this 的绑定和定义的位置（编写的位置）没有关系；
3、this 的绑定和调用方式以及调用的位置有关系；
4、this 是在运行时被绑定的；
那么 this 到底是怎么样的绑定规则呢？一起来学习一下吧
绑定一：默认绑定；
绑定二：隐式绑定；
绑定三：显示绑定；
绑定四：new 绑定；
绑定规则-默认绑定
什么情况下使用默认绑定呢？独立函数调用。
独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；
我们通过几个案例来看一下，常见的默认绑定
1、普通的函数被独立调用
// 1. 独立函数调用
function foo() {
console.log("foo: ", this);
}
+foo(); // => window2、函数定义在对象中，但是独立调用
// 2. 函数定义在对象中，但是独立调用
const obj = {
name: "obj",
bar: function () {
console.log("bar: ", this);
},
};
+ const baz = obj.bar;
+ baz(); // => window3、严格模式下，独立调用的函数中 this 指向的是 undefined
// 3. 严格函数下，独立函数调用
+"use strict";
function fn() {
console.log("fn: ", this);
}
+fn(); // => undefined4、在其他函数内部独立调用
// 3. 在其他函数内部，独立调用函数
function test1() {
console.log("test1: ", this);
}
function test2() {
+test1(); // => window
}
test2();5、在高阶函数函数中独立调用
// 4. 在高阶函数中独立调用
+ function fn1(fn) {
+ fn();
+ }
const obj1 = {
name: "obj1",
fn: function () {
console.log("fn: ", this);
},
};
+ fn1(obj1.fn); // => window绑定规则-隐式绑定
另外一种比较常见的调用方式是通过某个对象进行调用的：
我们通过几个案例来看一下，常见的隐式绑定
1、通过对象调用函数
// 1. 通过对象调用函数
function foo() {
console.log("foo: ", this);
}
const obj = {
name: "obj",
+ foo: foo,
};
+ obj.foo(); // => obj2、复杂的对象调用函数
// 2. 复杂的对象调用函数
function fn() {
console.log("fn: ", this);
}
const obj1 = {
name: "obj1",
+ fn: fn,
};
const obj2 = {
name: "obj2",
+ obj1: obj1,
};
+ obj2.obj1.fn(); // => obj1绑定规则-new 绑定
JavaScript 中的函数可以当做一个类的构造函数来使用，也就是使用 new 关键字。
使用 new 关键字来调用函数是，会执行如下的操作：
1、创建一个全新的对象；
2、这个新对象会被执行 prototype 连接；
3、这个新对象会绑定到函数调用的 this 上（this 的绑定在这个步骤完成）；
4、如果函数没有返回其他对象，表达式会返回这个新对象；
// new绑定
function Person(name) {
console.log("赋值前：", this); // => Person {}
this.name = name;
+console.log("赋值后：", this); // => Person {name: 'ray'}
}
const p = new Person("ray");绑定规则-显式绑定
隐式绑定前提条件：
必须在调用的对象内部有一个对函数的引用（比如一个属性）。如果没有这样的引用，在进行调用时，会报找不到该函数的错误。正是通过这个引用，间接的将 this 绑定到了这个对象上；
如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？
JavaScript 所有的函数都可以使用call和apply方法。
语法
fn.apply(thisArg, [argsArr])
fn.call(thisArg, arg1, arg2, ...)参数
第一个参数是相同的，要求传入一个对象；
这个对象的作用是什么呢？就是给 this 准备的。
在调用这个函数时，会将 this 绑定到这个传入的对象上。
后面的参数，apply 为数组，call 为参数列表；
因为上面的过程，我们明确的绑定了 this 指向的对象，所以称之为 显式绑定。
// 2. 显式绑定-call-携带参数
function fn(arg1, arg2) {
console.log("call: ", this, arg1, arg2);
}
+fn.call({ name: "fn" }, 18, 1.88); // => {name: 'fn'} 18 1.88
// 3. 显式绑定-apply-携带参数
function fn2(arg1, arg2) {
console.log("apply: ", this, arg1, arg2);
}
+fn2.apply({ name: "apply" }, ["China", "Anhui"]); // => {name: 'fn'} 18 1.88注意： fn2函数的形参是通过参数列表的方式接收传递的数组参数的
bind
通过 call 或者 apply 绑定 this 对象
- 显示绑定后，this 就会明确的指向绑定的对象
// 1. 显式绑定-call-绑定不同的对象
function foo() {
console.log("foo: ", this);
}
+foo.call(window); // => window
+foo.call({ name: "ray" }); // => { name: "ray" }
+foo.call(123); // => Number {123}如果我们希望一个函数总是显式的绑定到一个对象上，可以怎么做呢？
使用 bind 方法，bind() 方法创建一个新的绑定函数（bound function，BF）；
绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语）
在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
语法：
fn.bind(thisArg, arg1?, arg2?,...)示例： bind-基本使用
// 4. 显式绑定-bind
function foo2() {
console.log("bind: ", this);
}
const obj = { name: "bind" };
+ const bar = foo2.bind(obj);
+ bar(); // => {name: 'bind'}示例： bind-传递参数
说明：前 2 个参数在 bind 时传递，后 1 个参数在调用 baz 时传递
// 5. 显式绑定-bind-携带参数
function foo3(arg1, arg2, date) {
console.log("bind2: ", this, arg1, arg2, date);
}
const obj2 = { name: "bind2" };
+ const baz = foo3.bind(obj2, "SiChuan", "Chengdu");
+ baz("2023-6-30"); // => {name: 'bind2'} SiChuan Chengdu内置函数的 this 绑定
有些时候，我们会调用一些 JavaScript 的内置函数，或者一些第三方库中的内置函数。
这些内置函数会要求我们传入另外一个函数；
我们自己并不会显示的调用这些函数，而是 JavaScript 内部或者第三方库内部会帮助我们执行；
这些函数中的 this 又是如何绑定的呢？
setTimeout、数组的 forEach、div 的点击
setTimeout
结论：this 指向 window
// 1. 内置函数-setTimeout
setTimeout(function () {
console.log("setTimeout: ", this); // => window
});forEach
结论：this 指向 window 或者参数 2 指定对象
1、forEach-基本使用
// 3. 内置函数-forEach-基本使用
const arr = ["tom", "jack", "jerry", "mike"];
arr.forEach(function (item, index) {
+console.log("forEach: ", this); // => window
});2、forEach-绑定对象
// 4. 内置函数-forEach-绑定对象
const arr2 = ["tom", "jack", "jerry", "mike"];
const obj2 = { name: "obj2" };
arr.forEach(function (item, index) {
+ console.log("forEach2: ", this); // => obj2
+ }, obj2);事件函数
结论：this 指向发起事件的对象
// 2. 内置函数-事件处理函数
const eBtn = document.querySelector(".btn");
eBtn.addEventListener("click", function () {
+console.log("hdlClick", this); // => button
});绑定优先级
学习了四条规则，接下来开发中我们只需要去查找函数的调用应用了哪条规则即可，但是如果一个函数调用位置应用了多条规则，优先级谁更高呢？
总结： new > bind > call、apply > 隐式绑定 > 默认绑定
1、默认规则的优先级最低
- 毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定 this
2、显示绑定优先级高于隐式绑定
// 2. 隐式绑定 < 显式绑定
function foo() {
console.log("foo: ", this);
}
const obj = { name: "obj", foo };
+ obj.foo.call("call"); // => String {'call'}
+ obj.foo.apply("apply"); // => String {'apply'}
+ const bar = obj.foo.bind("bind");
+ bar(); // => String {'bind'}3、new 绑定优先级高于隐式绑定
说明： 通过new obj2.fn() 调用函数时，this 指向的是 fn 构造函数而不是它的调用对象 obj2
// 3. 隐式绑定 < new绑定
const obj2 = {
name: "obj2",
fn: function () {
console.log("fn: ", this); // => fn {}
console.log(obj2 === this); // false
},
};
new obj2.fn();4、new 绑定优先级高于 bind
- new 绑定和 call、apply 是不允许同时使用的，所以不存在谁的优先级更高
- new 绑定可以和 bind 一起使用，new 绑定优先级更高
// 4. 显式绑定(bind) < new绑定
const obj3 = {
name: "obj3",
fn: function () {
+ console.log("fn3: ", this); // => fn {}
},
};
+ const baz = obj3.fn.bind("bind");
+ new baz();5、bind 绑定优先级高于 call、apply
// 5. call、apply < bind
function foo2() {
console.log("foo2: ", this);
}
+ const fnBind = foo2.bind("bind");
+ fnBind.call("call"); // => String {'bind'}
+ fnBind.apply("apply"); // => String {'bind'}例外规则
例外规则-忽略显式绑定
我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。（神话故事和动漫中总是有类似这样的人物）
情况一：如果在显式绑定中，我们传入一个null或者undefined，那么这个显式绑定会被忽略，使用默认绑定规则：
<script>
// 1. 例外规则-忽略显式绑定
function foo1() {
console.log("foo1: ", this);
}
+foo1.call(undefined); // window
+foo1.call(null); // window
</script>
<script>
+"use strict";
// 2. 例外规则-忽略显式绑定(严格模式下)
function foo1() {
console.log("foo1: ", this);
}
+foo1.call(undefined); // undefined
+foo1.call(null); // null
</script>例外规则-间接函数引用
情况二：创建一个函数的间接引用，这种情况使用默认绑定规则。
赋值(obj2.foo = obj1.foo)的结果是 foo 函数；
foo 函数被直接调用，那么是默认绑定；
// 2. 例外规则-间接函数引用
function foo2() {
console.log("foo2: ", this);
}
const obj1 = {
name: "obj1",
foo2,
};
const obj2 = {
name: "obj2",
};
obj1.foo2(); // obj1
+(obj2.foo2 = obj1.foo2)(); // window例外规则-ES6 箭头函数
箭头函数不使用 this 的四种标准规则（也就是不绑定 this），而是根据外层作用域来决定 this。
this 查找规则： 和变量的查找规则一样，从里到外一层层查找
1、箭头函数中的 this 指向 fn 函数中的 this：obj3
// 3. 例外规则-箭头函数
const obj3 = {
name: "obj3",
+ fn: function () {
console.log("fn: ", this); // => obj3
+ return () => {
console.log("bar: ", this); // => obj3
};
},
};
const bar = obj3.fn();
bar.apply("bar apply");2、箭头函数中的 this 指向全局中的 this：window
// 3. 例外规则-箭头函数
const obj4 = {
name: "obj4",
+ fn: () => {
console.log("fn: ", this); // => window
+ return () => {
console.log("baz: ", this); // => window
};
},
};
const baz = obj4.fn();
baz.apply("baz apply");~~应用场景：~~模拟网络请求的案例
这里我使用 setTimeout 来模拟网络请求，请求到数据后如何可以存放到 data 中呢？
我们需要拿到 obj 对象，设置 data；
但是直接拿到的 this 是 window，我们需要在外层定义：var _this = this
在 setTimeout 的回调函数中使用_this 就代表了 obj 对象
1、ES5 中在异步函数中获取 this
// 1. ES5中在异步函数中获取this
const obj = {
name: "obj",
data: [],
getData: function () {
+ let _this = this;
setTimeout(function () {
const res = ["tom", "jack", "jerry"];
+ console.log(this) // => window
+ console.log(_this); // => obj
+ _this.data.push(...res);
+ console.log(_this.data);
});
},
};
obj.getData();2、箭头函数中在异步函数中获取 this
// 2. 箭头函数中在异步函数中获取this
const obj2 = {
name: "obj2",
data: [],
getData: function () {
setTimeout(() => {
const res = ["this", "is", "es6"];
+console.log(this); // => obj2
+this.data.push(...res);
+console.log(this.data);
});
},
};
obj2.getData();this 面试题
面试题一：
面试题二：
面试题三：
面试题四：
throw、try catch
错误处理方案
开发中我们会封装一些工具函数，封装之后给别人使用：
在其他人使用的过程中，可能会传递一些参数；
对于函数来说，需要对这些参数进行验证，否则可能得到的是我们不想要的结果；
很多时候我们可能验证到不是希望得到的参数时，就会直接return：
但是return存在很大的弊端：调用者不知道是因为函数内部没有正常执行，还是执行结果就是一个undefined；
事实上，正确的做法应该是如果没有通过某些验证，那么应该让外界知道函数内部报错了；
如何可以让一个函数告知外界自己内部出现了错误呢？
- 通过throw关键字，抛出一个异常；
throw语句：
throw语句用于抛出一个用户自定义的异常；
当遇到throw语句时，当前的函数执行会被停止（throw后面的语句不会执行）；
如果我们执行代码，就会报错，拿到错误信息的时候我们可以及时的去修正代码。
throw关键字
throw表达式就是在throw后面可以跟上一个表达式来表示具体的异常信息：
throw关键字可以跟上哪些类型呢？
基本数据类型：比如number、string、Boolean
对象类型：对象类型可以包含更多的信息
但是每次写这么长的对象又有点麻烦，所以我们可以创建一个类：
Error类型
事实上，JavaScript已经给我们提供了一个Error类，我们可以直接创建这个类的对象：
Error包含三个属性：
messsage：创建Error对象时传入的message；
name：Error的名称，通常和类的名称一致；
stack：整个Error的错误信息，包括函数的调用栈，当我们直接打印Error对象时，打印的就是stack；
Error有一些自己的子类：**
RangeError：下标值越界时使用的错误类型；
SyntaxError：解析语法错误时使用的错误类型；
TypeError：出现类型错误时，使用的错误类型；
异常的处理
我们会发现在之前的代码中，一个函数抛出了异常，调用它的时候程序会被强制终止：
这是因为如果我们在调用一个函数时，这个函数抛出了异常，但是我们并没有对这个异常进行处理，那么这个异常会继续传递到上一个函数调用中；
而如果到了最顶层（全局）的代码中依然没有对这个异常的处理代码，这个时候就会报错并且终止程序的运行；
我们先来看一下这段代码的异常传递过程：
foo函数在被执行时会抛出异常，也就是我们的bar函数会拿到这个异常；
但是bar函数并没有对这个异常进行处理，那么这个异常就会被继续传递到调用bar函数的函数，也就是test函数；
但是test函数依然没有处理，就会继续传递到我们的全局代码逻辑中；
依然没有被处理，这个时候程序会终止执行，后续代码都不会再执行了；
异常的捕获
但是很多情况下当出现异常时，我们并不希望程序直接退出，而是希望可以正确的处理异常：
- 这个时候我们就可以使用try catch
在ES10（ES2019）中，catch后面绑定的error可以省略。
当然，如果有一些必须要执行的代码，我们可以使用finally来执行：
- finally表示最终一定会被执行的代码结构；
注意：如果try和finally中都有返回值，那么会使用finally当中的返回值；