JS学习笔记.md · 汤祥麟/环保检查笔录系统

## 作用域链

从内到外访问，局部作用域可以访问全局作用域，反之不行。

## 变量提升

**var** 没有块级作用域

**var** 会变量提升（**let**和**const**没有变量提升）

变量申明前面不加**var**会变成全局变量

函数提升会比变量提升优先级高，同名变量会被忽略。

## a++ 	和	++a	的区别

两者都会是**a+1**

**a++**会返回运算前的值 **++a** 返回运算后的值

## var 	let	const	的区别

|       | 重复定义 |         修改值         | 声明提升 |     块级作用域     |  循环  |
| :---: | :------: | :--------------------: | :------: | :----------------: | :----: |
|  var  |   可以   |          可以          |    会    | 无（function可以） |  支持  |
|  let  |  不可以  |          可以          |   不会   |        支持        |  支持  |
| const |  不可以  | 不可以（对象数组除外） |   不会   |        支持        | 不支持 |

## map	方法和	parseInt	方法

### map 函数是数组方法	map(item,index,array)

默认传入三个参数，第一个为数组元素，第二个为数组序号，第三个为数组本身,返回一个新数组

### parseInt ('字符串'，基数)

该函数表示将一个字符串变为整数，***第二个参数如果为0按十进制，如果小于2或者大于36则返回NAN***

## 数组方法

### 数组排序等方法

| 方法                           | 作用                                                         |
| ------------------------------ | ------------------------------------------------------------ |
| sort()                         | 按照Unicode编码排序，通常括号里放一个比较函数compare(x,y)，该函数返回x-y则升序反则降序。 |
| reverse()                      | 翻转数组中的元素                                             |
| Math.max.apply(null,array)     | 通过Math来获取最大值反之可以用min                            |
| forEach(通常放一个函数)        | 为每个数组元素调用一次函数（回调函数），该函数接受3个值，value,index,array |
| map(通常放一个函数)            | 该函数接受3个值，value,index,array,**并返回一个新函数**      |
| filter(通常放一个函数)         | 该函数接受3个值，value,index,array,**创建一个包含通过测试的数组元素的新数组。** |
| reduce(通常放一个函数，初始值) | 该函数接受4个值，初始值/先前返回的值，value,index,array；该方法可以接受一个初始值； |
| indexOf(item,start)            | 在数组中搜索元素并返回其位置，未找到返回-1，start表示第几项开始搜索，多个值则返回第一次出现的位置 |
| lastindexOf(item,start)        | 与indexOf相似，但是从数组结尾开始搜索                        |

### reduce () 的高级用法（统计元素重复此数和数组去重）

```javascript
var num = arr.reduce((pre,value)=>{
    if(value in pre){
      pre[value]++
    }else{
      pre[value] = 1
    }
    return pre
  },{});
  //数组统计元素出现此数
var newnum = arr.reduce((pre,value)=>{
    if(!pre.includes(value)){
      pre.push(value)
    }
    return pre
  },[]) 
  //数组去重
```

## 普通函数和箭头函数区别

|          | 语法格式                             | new和原型 | arguments          | this指向                               | call，apply，bind |
| -------- | ------------------------------------ | --------- | ------------------ | -------------------------------------- | ----------------- |
| 普通函数 | function(){}  函数声明或者函数表达式 | 有        | 有                 | 动态                                   | 修改this指向      |
| 箭头函数 | ()=>  函数表达式                     | 没有      | 没有，可调用外围的 | 一般是全局，被普通函数包裹会指向上一层 | 不可修改this指向  |

**1.箭头函数不能用new关键字创建构造函数实例，普通函数可以。因为箭头函数创建的过程中程序不会为它创建construct方法，也就是没有构造能力，用完就丢掉了，不像普通函数可以重复利用，因此也不需要构造函数原型，不会自动生产prototype属性。**

**2.程序不会给箭头函数创造arguments对象。**

**3.箭头函数在创建时this指向就已经决定了，而普通函数的this指向是动态的。**

**4.箭头函数不能通过call，apply，bind 来改变this的指向**

## this 的指向

##### 四种绑定规则

1. 默认绑定
2. 隐式绑定
3. 硬绑定
4. 构造函数绑定

关键是实际哪个对象执行this

## new 一个对象的过程

```javascript
var Person = function(){};
var p = new Person();

// 1.var p = {}; 先初始化一个对象p
// 2.p.__proto__=Person.prototype;
// 3.Person.call(p)  构造p，初始化p
```

## 原型和原型链

在JS中，方法都会自带一个prototype属性，而通过构造函数声明的对象会通过proto来链接其原型prototype。

### hasOwnProperty()

该方法可以检测对象是否有某个属性，**该方法不能检测原型链上的属性**

```javascript
var man = {
    legs:2,
    hands:2,
    heads:1
}

man.hasOwnProperty("heads") // true
```

### 继承方式

#### 原型链继承

```javascript
function Parent(){
    this.name=['马云'];
}

Parent.prototype.getName = function(){
    retrun this.name
}

function Child(){
    
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

const child1 = new Child();
const child2 = new Child();
child1.name[0]='刘强东'
console.log(child1.name) // 输出刘强东
console.log(child2.name) // 输出刘强东
```

**原型链继承缺点**：

1. 多个实例对象指向同一个父类时，改变一个就会影响另一个
2. 无法对父类进行传参

#### 构造函数继承

```javascript
function Parent(name){
    this.name=[name]
}

Parent.prototype.getName = function(){
    return this.name
}
// 在子类的构造函数中执行父类的构造函数，并且为其绑定子类的this
function Child() {
    Parent.call(this,'蔡徐坤')
}

const child1 = new Child();
const child2 = new Child();
child1.name[0] = '鹿晗';

console.log(child1.name); // 鹿晗
console.log(child2.name); // 输出蔡徐坤
console.log(child2.getName()); // child2.getName() is not a function
```

**构造函数继承优点:**

**相比原型链继承，解决了多个子类实例对象指向同一父类的问题。**

**缺点：**

**只能继承父类的属性并不能继承父类的方法**

#### 组合式继承

为了解决 **原型链继承和构造函数继承的缺点** 通过组合这两种继承来实现

```javascript
function Parent(name){
    this.name=[name]
}

Parent.prototype.getName = function(){
    return this.name
}
// 在自雷的构造函数中执行父类的构造函数，并且为其绑定子类的this
function Child() {
    Parent.call(this,'蔡徐坤')
}

Child.prototype = new Parent(); 
Child.prototype.constructor = Child;

const child1 = new Child();
const child2 = new Child();
child1.name[0] = '鹿晗';

console.log(child1.name); // 鹿晗
console.log(child2.name); // 输出蔡徐坤
console.log(child2.getName()); // 输出蔡徐坤
```

缺点：

每次进行子类的实例化对象都会**执行构造函数**和 **new 父类方法。**

#### 寄生组合式继承

```javascript
function Parent(name){
    this.name=[name]
}

// 通过改变  Child.prototype 的指向为 Parent.prototype 解决上面的问题
//这样做的缺点是子类创建方法会使父类也创建相同方法
// Child.prototype = Parent.prototype; 
// 最终方法是使用浅拷贝方法
Child.prototype = Object.creat(Parent.prototype) // 浅拷贝
Child.prototype.constructor = Child;

const child1 = new Child();
const child2 = new Child();
child1.name[0] = '鹿晗';

console.log(child1.name); // 鹿晗
console.log(child2.name); // 蔡徐坤
console.log(child2.getName()); // 蔡徐坤
```

## 伪数组

伪数组也叫类数组，它无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。

典型的是函数的**argument**参数，还有像调用**getElementsByTagName,document.childNodes**之类的,它们都返回NodeList对象都属于伪数组。可以使用**Array.prototype.slice.call(fakeArray)**将数组转化为真正的Array对象。

把符合以下条件的对象称为伪数组

1. 具有 **length** 属性
2. 按照索引方式储存
3. 不具有数组的push，pop 等方法

## call  apply  bind

三者都是改变函数执行时的上下文，也就是改变 **this** 的指向

|       | 参数                 | 立即执行                         |
| ----- | :------------------- | -------------------------------- |
| call  | 0：对象，1：参数列表 | 是                               |
| apply | 0：对象，1：数组     | 是                               |
| bind  | 0：对象              | 否，返回一个修改this指向后的函数 |

常见应用场景

1.伪数组转换为数组

```javascript
var fakeArray = {
    0:'伪数组',
    1:'110',
    2:'ABC',
    3:'加油',
    length: 4
}
let realArray = Array.prototype.slice.call(fakeArray)
console.log(realArray); // ["伪数组", "110", "ABC", "加油"]
```

2.拼接数组

```javascript
let arr1 = [1,2,3];
let arr2 = [4,5,6];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1); // [1,2,3,4,5,6]
```

3.判断数据类型

PS：为啥不用 typeof 检测呢 ？

typeof  返回值有六种可能：number, string, boolean, object, function, undefind

如果检测Array, Null 等特殊对象一律返回 object ， 这就是 typeof 的局限性

所以要用 Object.prototype.toString.call() 来检测数据类型

```javascript
let arr = [1,2,3];
let num = 123;
let str = '字符串';
let nu = null;
let aaaa;
console.log(Object.prototype.toString.call(arr)); 
console.log(Object.prototype.toString.call(num));
console.log(Object.prototype.toString.call(str));
console.log(Object.prototype.toString.call(nu));
console.log(Object.prototype.toString.call(aaaa));
// 以上log分别输出如下
// [object Array]
// [object Number]
// [object String]
// [object Null]
// [object Undefined]
```

4.构造函数继承

```javascript
 function Animal(name) {
    this.name = name;
    this.showName = function () {
      console.log(this.name);
    }
  }

Animal.prototype.showFun = function(){
    return this.name
  }

function Cat(name) {
    Animal.call(this, name);
  }
  var cat = new Cat('tony');
  cat.showName() // tony
  cat.showFun() //cat.showFun() is not a function
```

重点： **这样的继承方式并不能继承通过 prototype 上添加的方法**

## 深拷贝、浅拷贝和赋值

#### 赋值、浅拷贝、深拷贝的区别

**赋值**

> 当我们把一个对象赋值给一个新的变量时，赋的值其实是该对象在栈中的地址，并不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变存储空间的内容，因此，两个对象是联动的。

```javascript
var person = {
    name:'小田',
    hobby:['骑车','王者荣耀','快乐']
}

var person1 = person;

person1.name  = '小李';
person1.hobby[0] = '开车车';

console.log(person1); // {name: "小李", hobby: ["开车车", "王者荣耀", "快乐"]}
console.log(person);  // {name: "小李", hobby: ["开车车", "王者荣耀", "快乐"]}
```

**浅拷贝**

> 重新在堆中创建内存，拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型因共享同一块内存，会互相影响。

```javascript
var person = {
    name:'小田',
    hobby:['骑车','王者荣耀','快乐']
}

function shallowCopy(obj){
  let target ={};
  for(i in obj){
    if(obj.hasOwnProperty(i)){
      target[i] = obj[i]
    }
  }
  return target;
}

person1 = shallowCopy(person);
person1.name = '小李';
person1.hobby[0] = '开车车';
console.log(person1); // {name: "小李", hobby: ["开车车", "王者荣耀", "快乐"]}
console.log(person);  // {name: "小田", hobby: ["开车车", "王者荣耀", "快乐"]}
```

**深拷贝**

> 从堆内存中开辟一个新的区域存放新对象，对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。

```javascript
function deepClone(obj) {
    let target = {};
    if(obj === null) return obj
    if(obj instanceof Date) return obj
    if(obj instanceof RegExp) return obj
    if (typeof obj !== 'object') {
      return obj
    }
    for (i in obj) {
        if(obj.hasOwnProperty(i)){
        target[i] = deepClone(obj[i]);
      }
    }
    return target
  }
  person1 = deepClone(person);
  person1.name = '小李';
  person1.hobby[0] = '开车车';

console.log(person1); // {name: "小李", hobby: ["开车车", "王者荣耀", "快乐"]}
  console.log(person); // {name: "小田", hobby: ["骑车", "王者荣耀", "快乐"]}
```

## 防抖和节流

> **防抖函数**
>
> 当持续触发事件，一定时间内没有再次触发事件，事件处理函数才会执行一次。
>
> 如果设定的时间到来之前，又一次触发了事件，就会重新开始计时。
>
> 其实是闭包的实际应用

```javascript
let input = doucument.getElementById('input');

//防抖函数
let input = document.getElementById('input');

function debounce(time,callback) {
    let timer;
    return function (value) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        callback(value)
      }, time)
    }
  }
  function fn(val) {
    console.log(val)
  }
  let debounceInput = debounce(1000,fn);
  input.addEventListener('keyup', function (e) {
    debounceInput(e.target.value)
  })
```

> **节流函数**
>
> 当持续触发事件时，保证一段时间内只调用一次事件处理函数
>
> 实际应用一般是表单的提交

```javascript
function throttleFnc(callback,wait) {
    let timeOut;
    
    return function () {
      if(!timeOut){
          
        console.log('正在处理！')
        timeOut = setTimeout(function () {
          callback() //调用函数
          console.log('处理完成！')
          timeOut = null
        },wait)
          
      }
    }
  }

function fnc() {
    console.log(Math.random())
  }
  document.getElementById('btn').onclick = throttleFnc(fnc,2000);
```

## 作用域

### 全局作用域

> 1. 全局作用域在页面打开时被创建，页面关闭时销毁
> 2. 编写早script标签中的变量和函数，作用域为全局，在页面的任一位置都能访问到
> 3. 在全局作用域中有全局对象window，代表一个浏览器窗口，有浏览器创建，可以直接调用
> 4. 全局作用域中声明的变量和方法会作为window对象的属性和方法保存

### 函数作用域

> 1. 调用函数时，函数作用域被创建，函数执行完毕后，函数中作用域被销毁
> 2. 每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的
> 3. 在函数内可以访问到全局作用域的变量，函数外无法访问函数内部作用域的变量
> 4. 在函数作用域中访问变量、函数时，会先在自身作用域内寻找，若没有找到则会函数上一级作用域中寻找，直至全局作用域

### 作用域的深层次理解

**执行期的上下文**

> 当函数代码执行的前期，会创建一个执行期上下文的内部对象AO
>
> 这个内部的对象是预编译的时候创建出来的，因为当函数被调用的时候，会先进行预编译
>
> 在全局代码执行的前期会创建一个执行期的上下文对象GO

**函数作用域预编译**

> 1. 创建AO对象    AO{}
> 2. 找形参和变量声明，将变量和形参名当做AO对象的属性名，值为 undefined
> 3. 实参形参相统一
> 4. 在函数体里面找函数声明，值赋予函数体

**全局作用域的预编译**

> 1. 创建 GO 对象
> 2. 找变量声明，将变量名作为 GO 对象的属性名，值为 undefined
> 3. 找函数声明，值赋予函数体

```javascript
//  预编译解法
function fn(a, c) {
    console.log(a) //function a
    var a = 123
    console.log(a) // 123
    console.log(c) //function c
    function a() { }
    if (false) {
      var d = 678
    }
    console.log(d) //undefined
    console.log(b) //undefined
    var b = function () { }
    console.log(b) //function 
    function c() { } //function c
    console.log(c) 
  }
  fn(1,2)
```

## 常见的内存泄漏

> 1.闭包
>
> 2.意外的全局变量
>
> 3.被遗忘的定时器（没有清除计时器）
>
> 4.脱离dom引用（获取一个dom的引用，后面元素被删除，但是内存一直保留着这个dom的引用）

## 什么是高阶函数

> 将函数作为参数或者返回值的函数
>
> ```javascript
> function highFun(params,callback){
>     return callback(params)
> }
> ```
>
>

## 手写map方法

```javascript
	var arr = [1,2,3]
    var newarr = arr.map((item,index,arr)=>{
      return item*2
    })
    console.log(newarr)

function newmap(arr,fun){
      if(!Array.isArray(arr) || !arr.length || typeof fun !=='function'){
        []
      }else{
        let result = []
        for(let i = 0; i<arr.length;i++){
          result.push(fun(arr[i],i,arr))
        }
        return result
      }
    }

let nrr = newmap(arr,(item)=>{
      return item*2
    })

console.log(nrr)
```

汤祥麟/环保检查笔录系统

简介

发行版

贡献者

近期动态

汤祥麟/环保检查笔录系统 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

汤祥麟/环保检查笔录系统