写给自己的JS

比眉伴天荒 2022-11-03 10:37 195阅读 0赞

### let 和 var 的区别 ###

1.  let定义的变量不能重复声明
2.  var 定义的变量重复声明会覆盖之前的值
3.  let定义的变量值在块级作用域内有效
4.  var 定义变量存在声明提前的问题
5.  let 定义的变量不存在声明提前的问题

--------------------

### undefined 和 null 的区别 ###

1.  undefined == null // true
2.  undefined === null //false
3.  undefined: 没有定义
4.  null：定义了没有给值
5.  typeof undefined // ‘undefined’
6.  typeof null // ‘object’

--------------------

### JS 数据类型 ###

1.  原始数据类型  
    String / Number / Boolean / undefined / null / Symbol(es6)  
    基本类型在内存中占据空间小、大小固定 ，他们的值保存在栈(stack)空间，是按值来访问。
2.  引用数据类型(对象类型)  
    Array / Object / Function  
    引用类型占据空间大、大小不固定, 栈内存中存放地址指向堆(heap)内存中的对象。是按引用访问的。

--------------------

### JS内置对象 ###

1.  String对象： 字符串对象，提供了对字符串进行操作的属性和方法。
2.  Array对象： 数组对象，提供了数组操作方面的属性和方法。
3.  Date对象： 日期时间对象，可以获取系统的日期时间信息。
4.  Boolean对象： 布尔对象，一个布尔变量就是一个布尔对象。(没有可用的属性和方法)
5.  Number对象： 数值对象。一个数值变量就是一个数值对象。
6.  Math对象： 数学对象，提供了数学运算方面的属性和方法。
7.  Object对象
8.  RegExp对象
9.  Global对象
10. Function对象。

--------------------

### 闭包 ###

在我的理解里，闭包就是，在一个函数的外面，访问这个函数内部的变量。

举个简单的例子:

// 例子一：
    function nihao() {
        
    	var name = 'cool';
    	return function() {
        
    		console.log('my name:', name);
    	}
    }
    
    let hi = nihao();
    hi(); // my name: cool
    
    
    // 例子二：
    var arr = [];
    for(var i =0 ; i < 5;i++){
        
        arr[i] = function(){
        
            return i;
        }
    }
    // 无论arr哪一项调用都是输出 5

可以拷贝到F12的控制台看看效果。  
例子一中，hi这个变量是定义在全局的，当执行hi时，输出了nihao这个函数内的变量。

例子二中，在循环时为arr的每一项定义了一个方法，返回i，当我们再来调用数组中的方法时，这个循环早已结束，而调用它输出i时，已经为5了。所以无论哪一项调用都是5。

这其实是跟它的**作用域链**有关系的。  
再看以下这个例子来简单介绍以下**作用域链**

let a = 1;
    function loga1() {
        
    	console.log('a: ', a);
    }
    function loga2() {
        
    	let a = 2;
    	console.log('a: ', a);
    }
    
    loga1(); // 1
    loga2(); // 2

![在这里插入图片描述][20210301094438607.png]

如上例子，当我们调用了loga1方法时，该方法内部执行了console.log输出a。

1.  它会先在自己的作用域内寻在是否含有a这个变量，如果有，则将它输出，在loga1方法中，是不存在a变量的，所以这个时候会进入第2步。而在loga2 方法中存在a变量，所以输出了2
2.  接下来就根据作用域链往上找，loga1这个函数的外层就是window，在window下找到了全局变量a，所以输出了1。

根据作用域链的思维，我在来画一个闭包的作用域图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70]

如上图，一共有三层的作用域链。  
当我们执行 `let hi = nihao()` 时，这个作用域链就产生了。  
nihao()这个函数返回的是一个Function，是一个引用数据类型的数据。所以hi这个变量存储的是这个数据的地址指针。  
所以当我们执行`hi()`时，就执行了hi指针地址的函数。在这个函数中，执行了`console.log('my name:', name);`它在自己的作用域中没有找到name这个变量，所以会根据作用域链往上找，这时就进入到了nihao这个函数的作用域，在这个作用域中存在name变量，所以将其打印出来。

当然闭包带来的坏处也有，因为一直被作用域链关联着，所以在内存就产生了一个不销毁的空间，也是导致内存泄漏的原因。  
只要hi这个变量一直存在，这一个内存空间就不会被清除，所以只要把全局的变量设置 `hi = null`，清除他们的关联，就可以解决内存不销毁的这个现象。

所以闭包的优势就是，可以在内存中保留一些变量，使其不被销毁。还可以使其访问外界的变量与函数，取到另外一个作用域上面的值。

防抖和节流的原理，其实就是跟闭包相关的，想要了解更多可以参考这篇文章。[防抖与节流][Link 1]

--------------------

### 原型 和 原型链 ###

在我的理解中，原型就是一个对象，是用来存放一些公共的变量或方法的。  
在这个对象上有一个constructor属性，这个属性指向它的构造函数，还**有可能**(如果是最后一级就没有这个属性)存在一个`_proto_`属性，这个属性这个对象的原型对象。来让我们往下看。

当我们定义一个引用数据类型的变量时(数组或对象或函数)，在控制台中输出，点开来看以后总是能发现这个变量中含有一个`_proto_`的属性。  
![在这里插入图片描述][20210301094341685.png]

所以这个玩意到底是啥呢？  
我们点开数组的看看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70 1]

这里面的东西都好眼熟，全部都是数组的方法！

没错了，`_proto_`就是一个指针，指向了数组的**原型对象**。而这个原型对象就如我刚开始所说，是用来存储公共的变量或方法的。

**问题一：** 谁才会拥有原型对象呢？  
答案就是构造函数，其实所有的函数，数组，对象仔细想一想，是不是都可以用这样的方式创建.

let arr = new Array();
    let obj = new Object();
    let func = new Function();

其实本质都是通过构造函数创建的，既然是构造函数，自然的Array就有了自己的原型对象`Array.prototype`，同理…(对象/函数)  
**`_proto_`指向的就是自己的构造函数的原型对象。** 自然的`arr._proto_ === Array.prototype`， 同理…(对象/函数)

**问题二：** 只要是引用数据类型的变量都存在\_proto\_这个属性，而原型对象也是一个对象，它也是引用数据类型，那它的\_protp\_指向谁呢？

我们接着往数组的\_proto\_下看，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70 2]

发现数组原型对象的\_proto\_里面竟然都是对象的方法，就说明它指向的是对象的原型对象。当然这也不奇怪，因为数组原型对象就是对象，既然是对象，它的\_proto\_自然也就是对象的原型对象了(有点绕)！

这一系列的指向，形成了一条链，这就是原型链。

但是！

我发现到对象的原型对象上没有出现\_proto\_了，这是为什么呢？其实是对象就是**原型链**上的顶层，到了最后一层了，所以自然也就没有了。`Object.prototype._proto_ = null;`

特殊的要来了！我前面一直没有提及函数，接下来让我们看看函数  
![在这里插入图片描述][20210301094256138.png]

为什么函数会特殊一点呢，因为函数它同时拥有`_proto_`和`prototype`这两个属性。通过上面的例子，我们可以很好的理解`func._proto_ === Function.prototype` , func的proto指向函数的原型对象。

但是在这个函数中，它同时还拥有自己的原型对象prototype。这样子的作用是什么呢？来看我下面举例：

// 构造函数
    function BuildFunc(name, age){
        
    	this.name = name;
    	this.age = age;
    }
    // 在这个构造函数的原型上写一个say方法
    BuildFunc.prototype.say = function() {
        
    	console.log('say something');
    }
    
    let tom = new BuildFunc('tom', 18);
    let nacy = new BuildFunc('nacy', 16);

我们把tom 和nacy打印出来看看  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70 3]

tom和nacy都是通过构造函数生产的一个对象，对象上都有一个\_proto\_属性，都是指向构造函数的原型。所以他们两个都有一个公共的方法say。

到这里有没有想起一些什么？看看这个

// 数组和对象的定义是不是也可以通过new字符来定义？
    let arr1 = new Array();
    let arr2 = new Array();
    
    let obj1 = new Object();
    let obj2 = new Object();

把他们都log出来，跟上面的例子的道理是一样的！

言归正传，这就是函数的特别之处了！那我们现在知道了原型是用来存储一些公共的方法的，那原型链是干嘛的呢？让我们接着往下走。

// 这里借用到上面一样的构造函数
    // 我们知道函数的_proto_属性是指向函数的原型对象的。
    // 在对象的原型对象上定义一个eat方法
    // 因为构造函数的原型对象的_proto_指向对象的原型对象(绕)
    Object.prototype.eat = function() {
        
    	console.log('eat something');
    }
    
    // 定义一个构造函数
    function BuildFunc(name, age){
        
    	this.name = name;
    	this.age = age;
    }
    
    // 在这个构造函数的原型上写一个say方法
    BuildFunc.prototype.say = function() {
        
    	console.log('say something');
    }
    // 通过定义的构造函数创建一个tom对象
    let tom = new BuildFunc('tom', 18);
    
    // 这个时候我们分别调用tom的方法
    tom.say();
    tom.eat();

当我们跑 `tom.say()` 时，会先在tom对象上找是否有say这个方法。它发现在tom对象上没有找到say方法，则会顺着tom的\_proto\_属性，去到对应的原型对象上继续寻找say方法。按照这个思路，这时候就来到了构造函数的原型对象发现了say方法，执行。

同理，调用eat方法时，在构造函数的原型对象上仍然没有发现eat方法，这个时候又顺着构造函数的原型对象的\_proto\_属性找到对应的原型对象，因为构造函数的原型对象是对象，所以它的\_proto\_指向的是对象的原型对象，这也是为什么我在Object的原型对象上定义eat的原因。到了这一步，它就跨过两层找到了eat方法，执行。

这一个链就被称为原型链！

--------------------

### this ###

**一、对this对理解**

1.  如果一个函数有this，但是它没有被上一级对象所调用，严格模式下 this 指向 undefined， 否则指向window
2.  如果一个函数中有this，这个函数有被上一级所调用，那么它指向的就是调用它的对象。
3.  如果是一个链式的调用，则最内层的this指向最后一个调用他的对象

**二、改变this指向**

1.  箭头函数  
    箭头函数内的 this 绑定的是最近一层非箭头函数的 this
2.  call / apply / bind 方法

**三、new的过程**  
我觉得理解了原型这个new的过程是很好理解的

var a = new myFunction("Li","Cherry");
    
    new myFunction{
        var obj = {};
        obj.__proto__ = myFunction.prototype;
        var result = myFunction.call(obj,"Li","Cherry");
        return typeof result === 'obj'? result : obj;
    }

1.创建一个空对象 obj;  
2.将新创建的空对象的隐式原型指向其构造函数的显示原型。  
3.使用 call 改变 this 的指向  
4.如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。

--------------------

### JS继承 ###

可以看看这篇文章 \[部分参考：[JS继承的几种方式][JS]\]

继承有很多种方式，我下面按照常用的顺序介绍一下，有些不知道我也会查阅一些资料。

**一、原型链继承**  
这是我看到JS继承几个字以后第一个想到的了，结合上面的原型和原型链的知识。看例子！

function Gouzao(name) {
        
    	this.name = name;
    }
    
    Gouzao.prototype.say = function() {
        
    	console.log('hi, i am ' + this.name);
    }

function Baby(name) {
        
    	this.name = name;
    }
    
    Baby.prototype = new Gouzao('baby');
    let newBaby = new Baby('angel');
    
    newBaby.say();

定义了一个全局的构造函数Gouzao，在Gouzao的原型对象上添加了say方法。

这里说的有点绕，理一下思路。

1.  新定义一个构造函数Baby，将Baby的原型对象设置为new Gouzao() 创建的实例对象(以下简称G)。
2.  这样的话用new Baby()创造出来的实例的\_proto\_，就指向了G，也就是第一步创建的实例。
3.  当我们调用new Baby() 创造出来的实例对象的say方法时，先在自己的对象中寻找是否含有say方法，结果是没有的。所以就沿着\_proto\_来到了G上继续寻找say方法，发现在G这个对象中只有一个name属性且值为baby。所以继续沿着\_proto\_找到了Gouzao的原型对象，在Gouzao的原型对象上发现了say方法，传入参数并输出。
4.  从这点上就可看出，Baby创建出来的实例通过**原型链继承**了say方法。  
    ![在这里插入图片描述][20210301094511391.png]

**二、构造继承**

这里还是要借用以下全局的Gouzao函数

function Gouzao(name, age) {
        
    	this.name = name;
    	this.age = age;
    }
    
    Gouzao.prototype.say = function() {
        
    	console.log('hi, i am ' + this.name);
    }

function Person(name, age, gender) {
        
    	Gouzao.call(this, name, age);
    	this.gender = gender;
    }
    
    let tom = new Person('tom', 18, 'man');

用.call()和.apply()在子构造函数中执行了父构造函数。这样的话用子构造函数创建出来的实例就拥有了和父构造函数创建出来的实例相同的属性。还可以在此基础添加其他的属性，例如例子中的gender。

但是！我们可以发现，用Person构造函数创建出来的实例只是继承了它的属性，并没有继承Gouzao原型对象上的方法(say)。所以就有了下面第三种继承方式。

**三、组合继承( 原型链继承和构造继承 )**  
我们在构造继承的基础上继续

function Gouzao(name, age) {
        
    	this.name = name;
    	this.age = age;
    }
    
    Gouzao.prototype.say = function() {
        
    	console.log('hi, i am ' + this.name);
    }

function Person(name, age, gender) {
        
    	Gouzao.call(this, name, age);
    	this.gender = gender;
    }
    
    Person.prototype = new Gouzao('zuhejicheng', 1);
    
    let tom = new Person('tom', 18, 'man');

其实跟构造继承的区别，就是把Person这个构造函数的原型对象设置为Gouzao的实例。这样就能通过原型链找到say方法了！

**四、原型式继承**

fun方法将返回一个F构造函数创建的空对象，这个对象的\_proto\_指向传入的对象，从而实现这个对象继承了传入对象的属性和原型上的方法。让我们打印出来看一看。  
![在这里插入图片描述][20210301094126997.png]

**五、寄生式继承**  
在原型式继承的基础上包一层，可以自定义一些新的属性。

![在这里插入图片描述][20210301101913200.png]

**六、寄生组合式继承**

其实这个我也还不太理解，等我学习好了再回来补充吧！

--------------------

### JS 事件 ###

##### 一、Event Loop #####

参考：[阮一峰 Event Loop][Event Loop]  
1.所有同步任务都在主线程上执行，形成一个 执行栈 （execution context stack）。  
2.主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。  
3.一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。  
4.主线程不断重复上面的第三步。

看下面一段代码

setTimeout(() => {
        
    	console.log(1);
    }, 0);
    
    new Promise((resolve) => {
        
    	resolve(2);
    }).then(console.log)
    
    console.log(3);
    
    // 输出的顺序是 3 2 1

setTimeout 和 Promise 属于异步任务，会在同步任务执行完以后才执行，所以第一个输出的是3是没有什么疑问的。我觉得需要理解的是闲输出Promise还是先输出定时任务。

Promise 的回调函数不是正常的异步任务，而是微任务（microtask）。重点就是，微任务执行结束以后是追加到本轮事件循环的，而正常的任务执行结束是追加到下一轮事件循环。所以微任务的执行时间会较早于正常的任务。

所以最后的输出顺序是 3 2 1

##### 二、事件机制 #####

JavaScript 事件触发有三个阶段。  
CAPTURING\_PHASE ，即捕获阶段  
AT\_TARGET ，即目标阶段  
BUBBLING\_PHASE ，即冒泡阶段

##### 三、事件委托 #####

事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。  
举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。  
好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

请你讲一下，使用setTimeout()方法来模拟setInterval()与直接使用setInterval()有什么区别

##### event.target 和 event.currentTarget 的区别 #####

这个东西可以配合着 事件委托 一起做事情，我举个例子。  
用前端来实现一个计算器，如果我们在0-9的按钮全部都绑定一个事件的话，这个做法看起来可能有点蠢。我们可以给最外层的父亲元素绑定一个方法，通过 event.currentTarget 可以得到我点击的元素节点。 而 event.target 则是绑定了方法的父亲相关信息。

--------------------

### AJAX ###

[Ajax原理][Ajax]

[Ajax解决浏览器缓存问题][Ajax 1]

--------------------

### Cookie 、LocalStorage和SessionStorage的区别 ###

这篇文章可以看一看 讲解了所有数据存储的方式 [JS数据存储][JS 1]

一、Cookie

1.  cookie 的存放数据大小 为4K左右。 一般由服务器生成，可设置失效时间。
2.  如果在浏览器端生成Cookie，默认是关闭浏览器后失效。
3.  cookie因为保存在客户端中，其中包含的任何数据都可以被他人访问，cookie安全性比较低。
4.  与服务器通信时，每次都会携带在HTTP头中。
5.  cookie需要在客户端和服务器端之间来回传送，会浪费不必要的资源如果过多会带来性能问题。

二、localStorage

1.  localStorage的大小一般为5MB，保存在本地，除非被清除，否则永久保存。
2.  仅在客户端中保存，不参与和服务器的通信。
3.  是以key/value的形式进行存储，value值只能存储字符串。如果想要存储对象，可以用JSON.stringify()进行转换为字符串，取值的时候再使用JSON.parse()解析。

// 存储的两种方式
    localStorage.setItem("isConfirm", "true");
    localStorage.isConfirm= "true";
    
    // 读取
    localStorage.getItem("isConfirm");
    localStorage.isConfirm;

三、sessionStorage

1.  一般为5MB，仅在当前会话下有效，关闭页面或浏览器后被清除。
2.  仅在客户端（即浏览器）中保存，不参与和服务器的通信。
3.  存储在sessionStorage中的数据可以跨越页面刷新而存在。
4.  受到同源策略限制，若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。
5.  是以key/value的形式进行存储，value值只能存储字符串

// 存储的两种方式
    sessionStorage.setItem("isConfirm", "true");
    sessionStorage.isConfirm= "true";
    
    // 读取
    sessionStorage.getItem("isConfirm");
    sessionStorage.isConfirm;

--------------------

### JS判断数据类型 ###

常用判断数据类型的方法

**一、typeof**  
这是学习JS最早接触的判断类型的方法了，返回的结果用该类型的字符串形式表示，包括以下 7 种：number、boolean、symbol、string、object、undefined、function 等。

typeof '' // string
    typeof 2 // number
    typeof true // boolean
    typeof false // boolean
    typeof undefined // undefined
    typeof {
        } // object
    typeof Symbol() // symbol
    typeof Function(){
        } // function
    typeof NaN // number
    
    // 下面写一些特殊的 也是typeof判断类型的缺陷
    typeof [] // object
    typeof null //object

typeof 可以用来区分JS的基本数据类型(除了null)。  
typeof 判断类型的缺陷就是不能够区分 数组/对象/null

null 有属于自己的数据类型 Null ， 引用类型中的 数组、日期、正则 也都有属于自己的具体类型，而 typeof 对于这些类型的处理，只返回了处于其原型链最顶端的 Object 类型

**二、instanceof**  
instanceof 是用来判断 A 是否为 B 的实例，如果是则返回true，不是则返回false。**instanceof 检测的是原型**

如果能够很好的理解原型，这个自然也能理解了。看例子

12 instanceof Number // false
    '' instanceof String // false
    true instanceof Boolean // false
    
    [] instanceof Array // true
    [] instanceof Object // true
    
    function func(){
        };
    func instanceof Function // true
    func instanceof Object // true

// 我们自己写一个构造函数看看
    function Person(name) {
        
    	this.name = name;
    }
    
    function Animal(name) {
        
    	this.name = name;
    }
    
    let tom = new Person('tom');
    let dog = new Animal('dog');
    
    tom instanceof Person; // true
    dog instanceof Animal; // true
    
    tom instanceof Animal; // false
    dog instanceof Person; // false
    
    // 如果想要 创建一个Person的实例Edward instanceof Animal 返回true的话
    Person.prototype = Animal.prototype;
    let Edward = new Person('edward');
    
    Edward instanceof Animal; // true

instanceof 不能够很好的判断基础数据类型，用来检测是否在对应的原型链上是一个很好的办法。

**三、Object.prototype.toString.call();**  
这个是最准确的，可以判断全部数据类型的方法。

Object.prototype.toString.call(''); // '[object String]'
    Object.prototype.toString.call(1); // '[object Number]'
    Object.prototype.toString.call(true); // '[object Boolean]'
    Object.prototype.toString.call(Symbol()); // '[object Symbol]'
    Object.prototype.toString.call(undefined); // '[object Undefined]'
    Object.prototype.toString.call(null); // '[object Null]'
    Object.prototype.toString.call(newFunction()); // '[object Function]'
    Object.prototype.toString.call(newDate()); // '[object Date]'
    Object.prototype.toString.call([]); // '[object Array]'
    Object.prototype.toString.call(newRegExp()); // '[object RegExp]'
    Object.prototype.toString.call(newError()); // '[object Error]'
    Object.prototype.toString.call(document); // '[object HTMLDocument]'
    Object.prototype.toString.call(window); // '[object global]'

--------------------

### 节流防抖 ###

这篇文章写的简单易懂，推荐看一看。参考：[JS防抖和节流][Link 1]

我这里就不做介绍拉，我就自己按照思路写一边代码温习一下。节流防抖其实借助了闭包，顺便也可以重新理解一遍闭包！

在第一次触发事件时，不立即执行函数，而是给出一个期限值后再触发。如果再这段时间内再次触发，则重新计算期限。可用于输入框在输入的时候停止输入自动搜索

// 防抖
    function debounce(func, delay){
        
    	let timer = null;
    	return function() {
        
    		if(timer) {
        
    			clearTimeout(timer);
    		}
    		timer = setTimeout(func, delay);
    	}
    }
    
    window.onscroll = debounce(func, 1000);

在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。可用于按钮频繁点击造成的问题。

// 节流
    function throttle(func, delay) {
        
    	let status = false;
    	let timer = null;
    	return function() {
        
    		if(status) return;
    		status = true;
    		setTimeout(() => {
        
    			func;
    			status = false;
    		}, delay);
    	}
    }
    
    window.onscroll = throttle(func,1000)

--------------------

### 深拷贝和浅拷贝 ###

深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。  
简单来说，浅拷贝只复制一层对象的属性，而深拷贝则递归复制了所有层级。

我将用我的理解来描述哈，就不参考其他的资料了。

一、浅拷贝

// 我先来定义一个普通的对象
    let obj = {
        
    	name: 'yzf',
    	age: 18
    }
    
    // 自己编写一个简单的克隆函数
    function clone(obj) {
        
    	let retObj = {
        };
    	Object.keys(obj).forEach((item) => {
        
    		retObj[item] = obj[item];
    	})
    	return retObj;
    }
    
    let newObj = clone(obj); // {name: "yzf", age: 18}
    console.log(newObj === obj) // false

这样就实现了一个简单的克隆方法，可以由最后一条`console.log(newObj === obj) // false`看出两个对象是相对独立的。

这就是一个简单的浅拷贝了，可以用于一般的数据。它会带来什么问题呢，继续往下

// 借用上面的clone方法，我copy下来为了看的方便
    function clone(obj) {
        
    	let retObj = {
        };
    	Object.keys(obj).forEach((item) => {
        
    		retObj[item] = obj[item];
    	})
    	return retObj;
    }
    
    let obj = {
        
    	name: 'yzf',
    	skills: ['ball', 'computer', 'music']
    }
    
    let newObj = clone(obj);
    
    // 这个时候我们把obj的skills添加多一项
    obj.skills.push('draw')
    
    //但是我们发现，newObj里的也被改了
    console.log(newObj);

![在这里插入图片描述][2021030222175876.png]  
这是为什么呢？会做下面这个例题自然也就懂

let arr = [1, 2, 3];
    let arr2 = arr;
    arr2[1] = 4；
    console.log(arr); // [1, 4, 3]

我们遍历赋值的时候，引用数据类型的赋值只是将指针存放了起来，但是我们修改的是指针指向的那一片内存空间。点到为止，如果不懂的话给个评论，我再回来写详细他。

所以这就是浅拷贝的一个缺点拉，适用于只有一层的数据。想要全部都克隆下来的话就是需要用到深拷贝了。

深拷贝的话我们就需要在循环遍历的时候，判断当前项的值是否为引用数据类型，如果是的话则需要对这一项也进行遍历，也就是所谓的递归。

我常用的深拷贝方法是

1.  `JSON.parse(JSON.stringify(obj))`,直接将对象转为字符串再解析回来，这样就是一个新的对象。但是这样是有缺点的，缺点请看[JSON.parse(JSON.stringify(obj))的缺点][JSON.parse_JSON.stringify_obj]
2.  [Ramda库][Ramda]  
    引用他的库，然后调用他封装好的clone方法！啥也不用干。
3.  还想知道更多？那就去搜吧。哈哈哈

--------------------

### JS中的垃圾回收机制 ###

--------------------

### 回调地狱 ###

一、什么是回调地狱  
实际开发中，我们会频繁的调用ajax请求数据，而有很多的请求是需要依赖其他请求的返回结果的。当这样的层级变的越来越多，就形成了回调地狱。

那它的缺点也很明显了，难度，不好维护！

二、如何解决回调地狱  
Promise是解决回调地狱的方式之一。我们可以在Promise的then操作中得到上一个接口返回的数据，再继续调用其他的接口，以此类推不断的再then中执行。

但是，当这样的then操作变得越来越多时，还是会有一些回调地狱的阴影。最好的解决回调地狱的方法就是使用 async - await 了。

--------------------

### Promise ###

参考： [阮一峰 - ES6][- ES6]  
这还需要我写吗？看就完事了！

--------------------

### async await ###

参考：[阮一峰 - async][- async]  
同上同上！

--------------------

### 类的创建 ###

参考：[阮一峰 - class][- class]

[20210301094438607.png]: /images/20221024/682d761f0d6140e0841ffe124d787258.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70]: /images/20221024/d632d42564684fb1bdfc47491db31037.png
[Link 1]: https://segmentfault.com/a/1190000018428170
[20210301094341685.png]: /images/20221024/77080aa2b9a042b48c5d94235f7e9c9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70 1]: /images/20221024/c9c5c3e0477f405d92b222cc240bf0e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70 2]: /images/20221024/d6bce7431edb4cf39e6b704a2554dd4c.png
[20210301094256138.png]: /images/20221024/14d0db0d4b804fcb87e4c7ddadc54682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70 3]: /images/20221024/86340013314341c5b77452cfe50665c9.png
[JS]: https://www.cnblogs.com/ranyonsue/p/11201730.html
[20210301094511391.png]: /images/20221024/009dc68d9c3142a398c4c445da1dd1ac.png
[20210301094126997.png]: /images/20221024/67318194da844fcfa39622496ff76944.png
[20210301101913200.png]: /images/20221024/e68c4d5a630f43dfac9c73f6676f010e.png
[Event Loop]: https://www.ruanyifeng.com/blog/2014/10/event-loop.html
[Ajax]: https://www.cnblogs.com/nangezi/p/9034054.html
[Ajax 1]: https://blog.csdn.net/qq_39561207/article/details/90487580
[JS 1]: https://www.cnblogs.com/sylvia-Camellia/p/11589569.html
[2021030222175876.png]: /images/20221024/bf17da5932dd45b7ac6b8713b9bec9de.png
[JSON.parse_JSON.stringify_obj]: https://segmentfault.com/a/1190000020297508
[Ramda]: https://ramda.cn/docs/#clone
[- ES6]: https://es6.ruanyifeng.com/#docs/promise
[- async]: https://es6.ruanyifeng.com/#docs/async
[- class]: https://es6.ruanyifeng.com/#docs/class