add qa

Author: 2xiao

src/interview/js.md

@@ -2,19 +2,167 @@
 title: 'JavaScript 相关'
 icon: 'javascript'
 order: 1
+headerDepth: 1
 ---
 
-## 讲讲 apply、call、bind 的区别
+## apply、call、bind 的区别是什么？
 
-- call 和 apply 都是立即改变，bind 则是返回一个函数等待下一次调用
-- call 和 bind 的参数形式相同，apply 的形式是数组
-- call 的性能比 apply 高
+::: details 答案
 
-## 数组方法中哪些会改变原数组？哪些不改变原数组？
+`call`、`apply`、`bind`作用是改变函数执行时的上下文，简而言之就是改变函数运行时的 `this` 指向
+
+那什么情况下需要改变`this`的指向呢？下面举个例子
+
+```js
+var name = 'lucy';
+var obj = {
+	name: 'martin',
+	say: function () {
+		console.log(this.name);
+	}
+};
+obj.say(); // martin，this 指向 obj 对象
+setTimeout(obj.say, 0); // lucy，this 指向 window 对象
+```
+
+从上面可以看到，正常情况`say`方法输出`martin`
+
+但是我们把`say`放在`setTimeout`方法中，在定时器中是作为回调函数来执行的，因此回到主栈执行时是在全局执行上下文的环境中执行的，这时候`this`指向`window`，所以输出`lucy`
+
+我们实际需要的是`this`指向`obj`对象，这时候就需要该改变`this`指向了
+
+```js
+setTimeout(obj.say.bind(obj), 0); // martin，this指向obj对象
+```
+
+### apply
+
+`apply`接受两个参数，第一个参数是`this`的指向，第二个参数是函数接受的参数，以数组的形式传入
+
+改变`this`指向后原函数会立即执行，且此方法只是临时改变`this`指向一次
+
+```js
+function fn(...args) {
+	console.log(this, args);
+}
+let obj = {
+	myname: '张三'
+};
+
+fn.apply(obj, [1, 2]); // this会变成传入的obj，传入的参数必须是一个数组；
+fn(1, 2); // this指向window
+```
+
+当第一个参数为`null`、`undefined`的时候，默认指向`window`(在浏览器中)
+
+```js
+fn.apply(null, [1, 2]); // this指向window
+fn.apply(undefined, [1, 2]); // this指向window
+```
+
+### call
+
+`call`方法的第一个参数也是`this`的指向，后面传入的是一个参数列表
+
+跟`apply`一样，改变`this`指向后原函数会立即执行，且此方法只是临时改变`this`指向一次
+
+```js
+function fn(...args) {
+	console.log(this, args);
+}
+let obj = {
+	myname: '张三'
+};
+
+fn.call(obj, 1, 2); // this会变成传入的obj，传入的参数必须是一个数组；
+fn(1, 2); // this指向window
+```
+
+同样的，当第一个参数为`null`、`undefined`的时候，默认指向`window`(在浏览器中)
+
+```js
+fn.call(null, [1, 2]); // this指向window
+fn.call(undefined, [1, 2]); // this指向window
+```
+
+### bind
+
+`bind` 方法和 `call` 很相似，第一参数也是 `this` 的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)
+
+改变 `this` 指向后不会立即执行，而是返回一个永久改变 `this` 指向的函数
+
+```js
+function fn(...args) {
+	console.log(this, args);
+}
+let obj = {
+	myname: '张三'
+};
+
+const bindFn = fn.bind(obj); // this 也会变成传入的 obj ，bind 不是立即执行需要执行一次
+bindFn(1, 2); // this 指向 obj
+fn(1, 2); // this 指向 window
+```
+
+从上面可以看到，`apply`、`call`、`bind`三者的区别在于：
+
+- 三者都可以改变函数的 `this` 对象指向
+- 三者第一个参数都是 `this` 要指向的对象，如果如果没有这个参数或参数为 `undefined` 或 `null`，则默认指向全局 `window`
+- 三者都可以传参，但是 `apply` 是数组，而 `call` 是参数列表，且 `apply` 和 `call` 是一次性传入参数，而 `bind` 可以分为多次传入
+- `bind` 返回绑定 `this` 之后的函数，`apply`、`call` 则是立即执行
+
+:::
+
+## 如何实现一个 `bind` ？
+
+::: details 答案
+
+实现`bind`的步骤，我们可以分解成为三部分：
+
+- 修改`this`指向
+- 兼容`new`关键字
+- 动态传递参数
+
+```js
+// 方式一：只在 bind 中传递函数参数
+fn.bind(obj, 1, 2)();
+
+// 方式二：在 bind 中传递函数参数，也在返回函数中传递参数
+fn.bind(obj, 1)(2);
+```
+
+整体实现代码如下：
+
+```js
+Function.prototype.myBind = function (context) {
+	// 判断调用对象是否为函数
+	if (typeof this !== 'function') {
+		throw new TypeError('Error');
+	}
+
+	// 获取参数
+	const args = [...arguments].slice(1);
+	const fn = this;
+
+	return function Fn() {
+		// 根据调用方式，传入不同绑定值
+		return fn.apply(
+			this instanceof Fn ? new fn(...arguments) : context,
+			args.concat(...arguments)
+		);
+	};
+};
+```
+
+:::
+
+## 数组方法中哪些会改变原数组，哪些不会？
+
+::: details 答案
 
 `let arr = ['a', 'b', 'c', 'd'];`
 
-### 改变原数组的
+### 改变原数组的：
 
 - `shift`：将第一个元素删除并且返回删除元素，空即为 `undefined`
 
@@ -109,7 +257,7 @@ a = arr.map((i) => (i.m = 3)); // 注意返回值的差异
 console.log(a); // [3, 3]
 ```
 
-### 不改变原数组的
+### 不改变原数组的：
 
 - `concat`：用于合并两个或多个数组，不会更改原数组，而是返回一个新数组
 
@@ -169,7 +317,11 @@ console.log(arr); // ['a', 'b', 'c', 'd']
 
 - `every`、`flat`、 `keys`、 `toString`、 `entries` 等
 
-## 使用 `new` 时发生了什么
+:::
+
+## 使用 `new` 时发生了什么？
+
+::: details 答案
 
 当你使用 `new` 关键字调用一个构造函数时，它将：
 
@@ -204,6 +356,8 @@ const salva = new Person('Salva');
 
 - [构造函数介绍 -- mozilla](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Basics#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E4%BB%8B%E7%BB%8D)
 
+:::
+
 ## 讲一讲原型链
 
-## 手写一个 Promise
+## 如何实现一个 `Promise` ？