## ReactDom.render入口
根据`import ReactDom from "react-dom";`找到文件中的引用位置，发现`ReactDom.render`其实是调用了`ReactMount.render`;

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/123123123123_1599716746501.png)

找到`ReactMount.render`的方法在如下图位置：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/567567567567_1599717610561.png)

可以看出`ReactMount.render`其实最终调用了`ReactMount._renderSubtreeIntoContainer`方法；
##### _renderSubtreeIntoContainer方法主体内容如下(该截图是删减部分代码以后的内容)：
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/123123123asd_1599734842113.png)

1.给传进来的`nextElement`用`TopLevelWrapper`再包一层,申明成是react的顶层组件；`TopLevelWrapper`的具体内容如下：
```
var topLevelRootCounter = 1;
var TopLevelWrapper = function () {
  this.rootID = topLevelRootCounter++;
};
TopLevelWrapper.prototype.isReactComponent = {};
if (process.env.NODE_ENV !== "production") {
  TopLevelWrapper.displayName = "TopLevelWrapper";
}
TopLevelWrapper.prototype.render = function () {
  return this.props.child;
};
TopLevelWrapper.isReactTopLevelWrapper = true;
```
2.判断该`container`是否已经含有顶层组件（及已经使用`reactDOM.render`渲染过组件），如果有（`prevComponent`为`true`），在使用`shouldUpdateReactComponent`方法判断该次渲染是执行更新操作还是卸载上一次组件继续往下走；如果没有（`prevComponent`为`false`），则直接走后面的逻辑；

3.最终会执行`ReactMount._renderNewRootComponent`;

##### _renderNewRootComponent方法主体内容如下(该截图是删减部分代码以后的内容)：
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/asdasdasdsd_1599735824112.png)

在这个方法体内执行了`ReactUpdates.batchedUpdates`;这中间的过程会比较繁琐，和本次表达的内容没有很大的相关性，暂时先省略；通过这个方法的处理最终会走到`mountComponentIntoNode`方法中；

##### mountComponentIntoNode方法比较关键，来看下这个方法的源码：
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/ttttt_1599736518157.png)

1.该方法中的`ReactReconciler.mountComponent`把虚拟dom对象转化成真正的dom节点，并存放在`markup`变量中，下图是我自己写的demo在该方法内打印出的`markup`:

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/fghjghjghjghj_1599736728057.png)

可以看到，`markup.node`就是所需要渲染的`dom`(当`transaction.useCreateElement`为`false`的时候，`markup`为`dom`字符串，因为此时走的是`setInnerHTML`方法插入`dom`)；

2.执行了`_mountImageIntoNode`方法,在`_mountImageIntoNode`方法中有如下一段代码：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/vbfgfgfg_1599737212169.png)

当`transaction.useCreateElement`为`true`，则执行`DOMLazyTree.insertTreeBefore(container, markup, null)`;
`insertTreeBefore`方法如下：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/123214567_1599737428635.png)

在该方法内做了`dom`插入的操作；

当`transaction.useCreateElement`为`false`，则执行`setInnerHTML(container, markup);`;
`setInnerHTML`方法如下：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/mmmmmmmmmmmmmmmmmmm_1599737542423.png)

在该方法内也执行`dom`插入的操作；

到这里，整个`ReactDom.render`的流程就结束了；

## 总结
`ReactDom.render`整个流程就是把虚拟`dom`转化成真实的`dom`然后插入`container`中，最终还是用了`insertBefore`,`appendChild`,`innerHTML`这些原始操作`dom`的`api`；

## 疑问
`transaction.useCreateElement`合适为true，何时为false?
答：走`render`流程的时候发现在`batchedMountComponentIntoNode`有这么一句：
```
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
  /* useCreateElement */
!shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
```
从整体流程就能发现`transaction.useCreateElement`的值是由`shouldReuseMarkup`决定的，那么来看下`shouldReuseMarkup`的值是怎么确定的。

在`_renderSubtreeIntoContainer`有这么一段：
```
var reactRootElement = getReactRootElementInContainer(container);
var containerHasReactMarkup = reactRootElement && !!internalGetID(reactRootElement);
var containerHasNonRootReactChild = hasNonRootReactChild(container);

var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
```

`internalGetID`内容如下：
```
function internalGetID(node) {
  //ATTR_NAME的值是data-reactid
  return node.getAttribute && node.getAttribute(ATTR_NAME) || "";
}
```
从上面的内容可以看出`shouldReuseMarkup`是由`containerHasReactMarkup`,`prevComponent`,`containerHasNonRootReactChild`这三个值决定的；
只有当：
1.`container`中存在根节点，并且跟节点上带有`data-reactid`属性(及`containerHasReactMarkup`为`true`)；
2.`prevComponent`不存在（及`!prevComponent`为`true`）；
3.`containerHasNonRootReactChild`为`false`；
**在这样的情况下，`shouldReuseMarkup`才会为`true`；**

#### 解释containerHasNonRootReactChild：
获取`containerHasNonRootReactChild`的值最终会调用`getClosestInstanceFromNode`方法：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/345345345345345_1599792358674.png)

该方法中可以看到，会以当前解点为起点，循环往上层去找每个节点的`internalInstanceKey`属性，如果找到就走下面逻辑，如果找`document`解点还没有，则返回`null`；根据注释理解为找到离当前节点最近的`react`组件；

**正常情况下，`shouldReuseMarkup`都是为`false`的，那什么时候会为`true`呢？**

我模拟了一个如下场景：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/ddddddddddddddddddddddddd_1599792965350.png)

**当我在需要`render`的容器中手动添加了一个带`data-reactid`的时候，就能同时满足以上的三个条件：**

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/12312312312213123213_1599793437665.png)

在以上这种情况下往下走流程的时候，`transaction.useCreateElement`的值就为`false`了；































react源码分析之reactDOM.render

## 前言
自从`js`出了`es6`之后，小伙伴们都在项目中愉快的用起了`import,export default`,但是，当我们用`import`方式引入`npm`第三方模块的时候，却会发现，`npm`包导出的方式大多是采用了`commonjs`规范的`require,module.exports`。这中间`babel`究竟是如何处理的呢？相信很多小伙伴都有很多问号！那么接下来，我们就来看看这里面的奥秘吧！
## module.exports转译
`module.exports`的使用方法不做过多的说明；来看一下`babel`编译前和编译后的代码有什么区别。

**源文件test.js内容：**
```
exports.name = "test";
```
**经过babel编译后的test.js内容：**
```
"use strict";
exports.name = "test";
```
编译前和编译后，代码并没有多大区别，还是遵循了`commonjs`规范。

## export default转译
关于`es6`中如何使用`export`导出模块，这里就不展开叙述了。来看下面一个例子，看看`es6`的`export`在经过`babel`转译之后，会变成什么样子：

**源文件test.js内容：**
```
export var a = "test";
export default function(){
 console.log(1)
}
```
**经过babel编译后的test.js内容：**
```
"use strict";

Object.defineProperty(exports, "__esModule", {
 value: true
});

exports.default = function () {
 console.log(1);
};

var a = exports.a = "test";
```
从结果可以看出，`babel`直接把`es6`规范的`export`编译成了`commonjs`规范的`module.exports`,并且会给`exports`对象添加一个`__esModule`的标记，来表明此对象是从`es6`的`export`转过来的（具体有什么作用，接下来会说明）。

## import和require
上面两个例子讲了`export`和`module.exports`在经过`babel`编译之后，都变为了`commonjs`规范的`module.exports`。接下来我们来说下，在不同场景下，用`import`和`require`导入的时候`babel`是怎么工作的！
### 场景一：require导入module.exports模块
这个场景是最简单的，因为两者都遵循了`commonjs`规范。来看下面一个例子：
**test.js**
```
module.exports = {
 name:"西瓜"
}
```
**a.js**
```
var a = require("./test");
console.log(a);
```
**babel编译以后的a.js**
```
"use strict";
var a = require("./test");
console.log(a);

console.log的值:{ name: "西瓜" }
```
该场景不做过多说明。

### 场景二：require导入export default模块
该场景就是`es6`和`commonjs`的混用场景之一了。话不多说，直接上案例。
**test.js**
```
export var a = "西瓜";

export default function(){
 console.log(1)
}
```
**a.js**
```
var a = require("./test");
console.log(a);
```
**babel编译以后的a.js**
```
"use strict";
var a = require("./test");
console.log(a);

console.log的值:{ default: [Function], a: "西瓜" }
```
为啥是这样的结果呢，上文案例中说了，`es6`的`export`模块在被`babel`编译了以后，就转变成了`commonjs`的`module.exports`，所以说，这里`require`导入`export default`模块，到后面还是变为require导入`module.exports`模块了，和场景一一样。
### 场景三：import导入module.exports模块
这是混用最多的场景了，一般情况下，作为前端开发人员，写业务代码的时候，更喜欢使用`es6`自带的`export default`模块，而发布到`npm`的第三方包，都是经过编译的，大多遵循了`commonjs`规范。来看下这种情况下，`babel`是怎么处理的。

**test.js**
```
module.exports={
 name:"西瓜",
 age:"20"
}
```
**a.js**
```
import test from "./test";
console.log(test) 
```
**babel编译以后的a.js**
```
"use strict";

var _test = require("./test");

var _test2 = _interopRequireDefault(_test);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_test2.default);

console.log的值:{ name: "西瓜", age: "20" }
```
可以看到，在这种场景下，多了一个`_interopRequireDefault`方法包装了一层，该方法内容也很简单，判断了传入的对象中是否存在`__esModule`属性，如果存在则返回原对象；如果不存在则赋值给新对象的default属性；并且console.log中的值变为了default属性；

**那这个地方为什么要这么处理呢？** 
1.**问**：为什么`console.log`的值会变为_test2.default？ 
**答**：对于`es6`的`import`来说，用`import xxx from "xxx"`这种方式引入的值就是目标文件所导出的default值，所以这里编译之后`console.log`的值变成了`_test2.default`。 
2.**问**：为什么要判断是否存在`__esModule`？ 
**答**：在文章的最前面说过，用`export default`导出的模块，在经过`babel`编译后，会给`exports`加上一个`__esModule`属性，来证明是`es6`规范导出的模块。当这里`__esModule`为`true`时，说明的该对象由`es6`规范的`export` 导出，由于`es6`的`export`可以用`export default`导出默认属性，所以`_interopRequireDefault`方法直接返回了原对象。当`__esModule`为`false`时，说明的该对象由`commonjs`规范的`module.exports`导出,在这种情况下，为了遵循`es6`的`import`的引入规则，`babel`在编译时做的一种策略，就是在传入对象的外层做一层`default`的赋值包装。这样，既保证了`import`的引入规则，也导出了`module.exports`的值。 
**结论** 
在该场景下，最后`console.log`的值就是`module.exports`的值。

### 场景四：import导入export default模块
这场景就不做过多的解释了，两者都遵循`es6`规范，直接看文档即可。想要理解这两者在经过`babel`编译后的引用关系，直接看场景三即可，相信看懂了场景三，结合全文，应该能理解这个过程是怎么一回事了。

## 拓展
这里说一种场景，就是使用`import * as xxx from xxx`这种方式去导出所有模块； 
**test.js**
```
module.exports={
 name:"西瓜",
 age:"20"
}
```
**a.js**
```
import * as test from "./test";
console.log(test) 
```
**babel编译以后的a.js**
```
"use strict";

var _test = require("./test");

var test = _interopRequireWildcard(_test);

function _interopRequireWildcard(obj) { 
 if (obj && obj.__esModule) { 
 return obj; 
 } else { 
 var newObj = {}; 
 if (obj != null) { 
 for (var key in obj) { 
 if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; 
 } 
 } 
 newObj.default = obj; return newObj; 
 } 
}

console.log(test);
console.log的值：{ name: "西瓜", age: "20", default: { name: "西瓜", age: "20" } }
```
当采用这种方式去引入`module.exports`模块时，会用`_interopRequireWildcard`这个方法去处理。给对象多加了一个`default`属性挂载了`obj`，作用和场景三中的`_interopRequireDefault`方法类似，就不做过多解释啦！

## 总结
对于`es6`规范和`commonjs`规范来说，经过`babel`编译以后，都会转化成`commonjs`规范，然后在此基础上，用`__esModule`区分了是属于`es6`模块还是`commonjs`模块。并切为了保证`es6`规范用`import`导入值的正确性和统一性，`babel`还做了一些策略去处理这两者之前的差异。 
文章到这里就结束了，希望能给小伙伴们带来些帮助吧！

import和require如何在项目中混用

## 防抖函数(debounce)
连续不断操作，只执行最后一次操作，称之为防抖，具体示例如下:
```
function debounce(callback){
	var timer = null;
	return function(event){
		if(timer){
			clearTimeout(timer);
				timer = setTimeout(function(){
				callback(event);
				clearTimeout(timer);
			},200);
		}else{
			timer = setTimeout(function(){
				callback(event);
				clearTimeout(timer);
			},200);
		}
	}
}
```
如上述代码，假如每次操作间隔都是在200毫秒以内，则会清楚原有的定时器，重新开启一个200毫秒的定时执行，直到有两次操作的间隔大于200毫秒才会执行回调方法。

**典型应用场景：input输入框搜索查询功能，可以使用该方法减少请求次数**

## 节流函数(throttle)
在一定时间间隔内，连续性操作只执行一次，称之为节流，具体示例如下:
```
function throttle(callback){
    var timer = null;
    return function(e){
        if(timer){
            return;
        }
        timer = setTimeout(function(){
            callback(e);
            clearTimeout(timer);
            timer = null;
        },300)

    }
}
```
如上述代码所示，当执行连续性操作的时间间隔小于300毫秒时，并不会都执行，只有在上一个定时器执行回调完成以后，才能开启下一个定时任务，实现函数节流；

**典型应用场景：监听页面scroll事件的时候，可以用该方法减少scroll过程中的各种计算**

**上述的代码只是最为简单的案例，小伙伴可根据自己项目的实际情况去扩展！**

















JS防抖和节流

```

var a = [55,22,2,3,29,3,11,23,68,557,44,33,788,45];

//冒泡排序
// for(let i = 0;i<a.length;i++){
// for(let j = 0;j<a.length-i;j++){
// if(a[j]>a[j+1]){
// var t = a[j];
// a[j]=a[j+1];
// a[j+1] = t;
// }
// }
// }

//选择排序
// for(let i = 0;i<a.length;i++){
// let MinIndex = i;
// let t = a[i];

// for(let j = i;j<a.length;j++){
// if(a[MinIndex]>a[j]){
// MinIndex = j;
// }
// }
 
// a[i] = a[MinIndex];
// a[MinIndex] = t;
// }

//插入排序
var b = [];
b[0] = a[0];
for(let i = 1;i<a.length;i++){
 let length = b.length;
 while(length>0){
 if(a[i]<b[length-1]){
 b[length]=b[length-1];
 length--
 if(length===0){
 b[0]=a[i];
 }
 }else{
 b[length] = a[i];
 break;
 }
 }
}

console.log(b);

//快速排序，找一个基准数，比他小的放左边，比他大的放右边，一直递归到1
function quickSort(arr){
 if(arr.length<=1) return arr;
 var baseIndex = Math.floor(arr.length/2);
 var baseNum = arr.splice(baseIndex,1)[0];
 var left = [];
 var right = [];
 arr.forEach((num)=>{
 if(num<baseNum){
 left.push(num) 
 }else{
 right.push(num) 
 }
 });

 return [...quickSort(left),baseNum,...quickSort(right)]
}

console.log(quickSort(a))

//归并排序
function guibinSort(arr){
 if(arr.length<=1) return arr;

 var middleIndex = Math.ceil(arr.length/2);
 var left = arr.splice(0,middleIndex);
 var right = arr;
 
 return mergeSort(guibinSort(left),guibinSort(right));
}

function mergeSort(left,right){
 var result = [];
 var leftIndex = 0;
 var rightIndex = 0;
 
 while(leftIndex<left.length||rightIndex<right.length){
 if(leftIndex<left.length&&rightIndex<right.length){
 
 if(left[leftIndex]<right[rightIndex]){
 result.push(left[leftIndex]);
 leftIndex++;
 }else{
 result.push(right[rightIndex]);
 rightIndex++; 
 }
 }else if(leftIndex<left.length){
 result.push(left[leftIndex]);
 leftIndex++;
 }else if(rightIndex<right.length){
 result.push(right[rightIndex]);
 rightIndex++; 
 }
 }
 return result;
}

console.log(guibinSort(a));
```

简单算法

## 什么情况下会出现循环引用？
我个人的理解是，如果一个对象的值等于父级(祖父级，曾祖父级....),则说明是循环引用了。来看下面一个例子：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/123123123123_1567408715748.png)

用上面代码来解释我定义的循环引用：`a.info`的值是`a`,而`a`恰好是`a.info`的父级，所以这里就是循环引用了。

## 如何处理循环引用对象呢？
首先，循环引用对象本来没有什么问题，序列化的时候才会发生问题，比如调用`JSON.stringify()`对该类对象进行序列化，就会报错: `Converting circular structure to JSON.`,而序列化需求很常见，比如发起一个ajax请求提交一个对象就需要对对象进行序列化。
针对上面这样的问题，可以通过`JSON`扩展包的`var c = JSON.decycle(a)`和`var a = JSON.retrocycle(c)`来处理。这里就不做过多的解释了。
#### 重点来了
手动写一个方法来判断对象是否存在循环引用,来看下边一段代码：
```
function cycle(obj, parent) {
    //表示调用的父级数组
    var parentArr = parent || [obj];
    for (var i in obj) {
        if (typeof obj[i] === "object") {
            //判断是否有循环引用
            parentArr.forEach((pObj) => {
                if (pObj === obj[i]) {
                    obj[i] = "[cycle]"
                }
            });
            cycle(obj[i], [...parentArr, obj[i]])
        }
    }
    return obj;
}
```
上面函数中，`parentArr`为取值的所有父级的一个集合;
循环对象，如果对象是一个`object`类型的，先循环数组`parentArr`,判断该值是否是`parentArr`中的引用,如果是,则存在循环引用,并把循环引用值设置成特殊标识`"[cycle]"`,接着再进行递归调用，并且把对应取值链上的父级集合传递下去。

测试：
```
var a = {
    b:{
        c:{}
    }
};

a.b.c.d = a;

console.log(cycle(a));
```
结果如下:
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/2222222222222_1567414255736.png)
可以看到，a.b.c.d原本是一个循环引用的a值，经过处理以后，变成了循环引用的标识；
#### 改进：假如说对象中存在数组的时候，如何处理呢？
对于这个问题，只要在原有的基础上再加一层数组判断就可以了，代码如下：
```
if(Array.isArray(obj[i])){
	obj[i].forEach((item,index)=>{
		//判断是否有循环引用
		parentArr.forEach((pObj) => {
			if (pObj === item) {
				item = "[cycle]"
			}
		});
		obj[i][index] = cycle(item, [...parentArr, item])
	});
}
```
加上这段代码后完整的代码就变成了如下代码：
```
function cycle(obj, parent) {
    //表示调用的父级数组
    var parentArr = parent || [obj];
    for (var i in obj) {
        if(Array.isArray(obj[i])){
            obj[i].forEach((item,index)=>{
                //判断是否有循环引用
                parentArr.forEach((pObj) => {
                    if (pObj === item) {
                        item = "[cycle]"
                    }
                });
                obj[i][index] = cycle(item, [...parentArr, item])
            });
        }else if (typeof obj[i] === "object") {

            //判断是否有循环引用
            parentArr.forEach((pObj) => {
                if (pObj === obj[i]) {
                    obj[i] = "[cycle]"
                }
            });
            cycle(obj[i], [...parentArr, obj[i]])
        }
    }
    return obj;
}
```
**测试：**
```
var a = {
    name:"西瓜"
};

a.f = [{
    t:a
},"a","b",a]
```
**结果如下：**

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/111_1575528912007.png)

可以看到，数组中引用的a都变成了循环引用的标记；

内容就这么多，有错误希望大佬可以多多指点，交流才能进步！




如何判断JS对象中是否存在循环引用

### 为什么要用深拷贝？
小伙伴们都知道，js中的对象属于引用类型，单纯的用等号赋值，其实复制的是引用地址，真正指向的还是堆内存中同一个值，当一个值的内部属性变化时，另一个值由于指向的是堆内存中的同一个值，所以也会发生变化。这往往是我们不想要的结果，我也在项目中因为这个吃过大亏，所以一起来讨论讨论吧！

### 如何手动实现一个深拷贝？
#### 方法1：JSON.stringify ，JSON.parse
通过`JSON.stringify`,`JSON.parse`可以实现深拷贝，但是有个坑得注意下，在序列化JavaScript对象时，所有函数和原型成员会被有意忽略。看下面这个案例：
```
var a = {
    name:"西瓜",
    run:function(){
        console.log(123)
    }
}
console.log(JSON.parse(JSON.stringify(a)));
```
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/11111_1565247204960.png)

可以看出，在拷贝的过程中,对象中的`run`方法不见了。

#### 方法2：递归
话不多说，直接上代码：
```
//主入口函数
function deepCopy(obj){
    if(typeof obj === "object"){
        //是一个数组
        if(Array.isArray(obj)){
            return copyArray(obj);
        }else{
            //是一个对象
            return copyObj(obj);
        }
    }
}

//如果是对象类型的，执行该函数
function copyObj(obj){
    var newObj = {};
    for(let key in obj){
        if(typeof obj[key] === "object"){
			//obj[key]还是属于object类型的话，递归执行deepCopy
            newObj[key] = deepCopy(obj[key]);
        }else{
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

//如果是数组类型类型的，执行该函数
function copyArray(array){
    var newArr = [];
    array.forEach((item,index)=>{
		//item还是属于object类型的话，递归执行deepCopy
        if(typeof item === "object"){
            newArr.push(deepCopy(item));
        }else{
            newArr.push(item);
        }
    });
    return newArr;
}
//测试
var testObj = [{
        name:"西瓜",
        info:{
            age:10,
            adress:"杭州"
        }
    },
    "哈哈哈哈哈",
    {
        run:function(){
            console.log(123)
        }
    }
];

var deepObj = deepCopy(testObj);

testObj[1] = "我改变了数组里面的一个值";

console.log(testObj);

console.log(deepObj);
```
运行结果如下：

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/22222_1565247847868.png)

结果中看到，`deepObj`是使用深拷贝函数后得到的结果，在这之后去修改`testObj`的值,`deepObj`的值并没有发生改变。说明深拷贝成功啦！
###总结
在实现深拷贝的过程中，也可以复习一下递归的知识，还是挺好的！小伙伴们也去试试吧！







手动实现一个深拷贝

### call的作用
一句话：改变调用方法的this指向，示例如下：
```
function a(){
	console.log(this);
}
a();
a.call({name:"西瓜"});
```
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/222_1564055142780.png)

可以看到，第一次`this`指向了`window`，第二次`this`指向了传入的对象；

### 那么在执行call方法的时候，内部做了什么处理呢？
先来看一个东西，或许就能明白
```
var a = {
	name:"西瓜",
	run:function(){
		console.log(this);
		console.log(this.name);
	}
}
a.run();
```
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/11111333_1564055577073.png)

上面这段代码，相信小伙伴都能看懂，其实，call执行的时候，也是做了这样的处理；。

### 手动来实现一个call
```
Function.prototype.MyCall = function(obj){
	var newObj = obj || window;
	newObj.fn = this;
	var params = [...arguments].slice(1);
	var result = newObj.fn(...params);
	delete newObj.fn;
	return result;
}
```
就上面的这段代码，就实现了一个call的功能，来看下这段代码都做了哪些事情

1. 定义一个新的对象，若传入的`obj`存在，则新对象等于`obj`,若`obj`不存在，则等于`window`；
2. 把this挂在到当前定义的新对象上(this即为调用的函数)；
3. 第4行代码处理了函数的传参；
4. 然后执行创建的新对象的`fn`函数(即为要调用的函数)；
5. 最后在执行了以后，把这个挂载的`fn`删除；

来验证一下是否正确
```
function test(){
	console.log(this);
}
test();
test.MyCall({name:"西瓜"});
```
结果如下图

![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/11111_1564110870082.png)
可以看到，结果和使用call的时候输出的一致。这样就自己手动实现了一个call方法；

#### 接下来，讲一个我在学习call的时候，网上经常讲到的一个案例，我们一起来看一下：
```
function f1(a){
	console.log(1);
	console.log(this);
}
function f2(){
	console.log(2);
	console.log(this);
}

f1.call(f2);
f1.call.call(f2);
```
想一下，这段代码打印出来的会是一个什么结果呢？
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/2222_1564111291153.png)
`f1.call(f2)`的打印结果，相信大家都能理解，这里就不解释了；重点来讲一下`f1.call.call(f2)`;
首先，我们用刚刚自己实现的call方法来试试，会不会出现同样的结果；
```
f1.MyCall(f2);
f1.MyCall.MyCall(f2);
```
结果当然是一样的啦!如下：
![](https://chenze-bloc.oss-cn-hangzhou.aliyuncs.com/articleImage/2222_1564111291153.png)
为什么会这样呢，来谈谈我对这个结果的理解吧（可能其他小伙伴有更好的理解）！
把上面自己实现的call方法复制下来
```
Function.prototype.MyCall = function(obj){
	var newObj = obj || window;
	newObj.fn = this;
	var params = [...arguments].slice(1);
	var result = newObj.fn(...params);
	delete newObj.fn;
	return result;
}
```
当我们执行`f1.MyCall.MyCall(f2)`的时候，上面这个`MyCall`方法中的`this`和`newObj`指的分别是什么？
我的理解是`this`为`f1.MyCall`，即为`Function.prototype.MyCall`，`newObj`为`f2`方法；
所当`f1.MyCall.MyCall(f2)`执行的时候，结果就变了以下结果：
```
var newObj = f2;
f2.fn = Function.prototype.MyCall;
```
接下来`MyCall`的第5句是不是会执行`newObj.fn`？
其实就是执行`f2.MyCall()`这个结果大家应该都知道了吧；

如果说上面这个理解了，可以想想下面几个会打印出什么内容：
```
f1.call.call.call(f2)
f1.call.call.call.call(f2)
f1.call.call.call.call.call(f2)
```
其实都是一样的哈！

### 结尾
除了`call`，还有两个类似的方法`apply,bind`,这里就不做过多的解释了，相信小伙伴一定也能跟着这样的思路去手写出来。有什么问题就给我留言吧！
