javascript复习

JavaScript

起源:1950年由美国的网景公司创建,与JavaScript很相似的语言是jscript

JavaScript是一门弱类型，基于对象的浏览器脚本语言

Javascript和Java的区别

区别：强弱的区别

JavaScript是一门弱类型的脚本语言,他声明的时候不需要定义变量的类型,直接可以用var来进行声明

java是一门强类型的编程语言,他声明的时候需要确定变量的类型,直到销毁的时候这个数据只能是这个类型的.

区别:js是脚本语言,java是编程语言

JavaScript是浏览器的脚本语言,不需要编译就可以直接使用。

java是面向对象的编程语言,他运行的时候需要先编译然后运行

区别:js是一个基于对象的脚本语言,java是面向对象的编程语言

js是一个基于对象的脚本语言,他不需要你声明对象就可以使用对象中的方法,例如window.

java是面向对象的编程语言,他需要先自己来编写对象然后进行对象

JavaScript的三大模块

1.ECMAScript 叫做原生js简称为es(现阶段可以努力学习es5语法,穿插学习es6语法)

2.DOM（文档对象模型）:给我们提供操作文档的API

3.BOM(浏览器对象模型):给我们提供操作浏览器的API

ECMAScript

定义:es是我们js的一种语法格式,我们都要按照这个语法进行编写js代码

1.变量

定义:变量是一个松散型的容器,他可以存储任意的类型的数据,声明的关键字:var ,let(es6中提到)

2.数据类型

定义：变量没有类型,数据才有类型

分类:

1.简单数据类型(基本数据类型)

String（字符串）,Number（数字）,undefined，null，Boolean，symbol（es6）

2.引用数据类型

Object（对象），Array（数组），function（函数）

检测数据类型的方法

1.typeof

2.instanceof

总结:前端的6大基本数据基本类型

String，Number，Boolean，undefined，function，object

3.运算符

1.逻辑运算符

！(或) 、&(与)、!(非)

2.算术运算符

• = 、+ 、-、 *、 /、%

3.赋值运算符

=

4.自加自减

1.当我们符号放在变量或者数据前面，那么我们先是计算后再赋值

2.当我们符号放在变量或者数据后面,那么我们是先赋值然后在计算

5.复合运算符

+=、-=、*=…

6.关系算法符

等于 ==

恒等于===

总结：优先级:

()>自加自减>算术运算符>关系运算符>逻辑运算符>赋值运算符

函数和作用域

1.函数

定义：是一段js代码块,用来实现某一个功能的,能反复调用声明的关键字为function

定义函数的两种方式

1.函数表达式

var text=function(){}

2.函数声明

function test(){}

2.函数作用域

定义：变量在某一个范围内有作用,我们称这个范围是这个变量的作用域

3.作用域链

定义：多个函数作用域嵌套在一起,用链来连接,这个链我们叫做作用域链

作用:当我们要查找变量,首先在变量最近的作用域里查找,然后沿着作用域链连接的作用域里进行查找,一直到全局作用域中(也就是作用域的末端)

内置函数

定义：在js中我们不需要引用任何库就可以使用的方法

详细情况请看：心灵导图

https://kdocs.cn/l/sczjDIOTEWBU

函数对象Math()

abs：绝对值

round:四舍五入

celi:向上取整

floor:向下取整

日期对象Date()

获取年getFullYear()

获取月：getMonth()，这里我们要记得加1,因为它是从0-11开始的

获取日：getDate()

获取星期 :getDay()

获取小时 :getHours()

获取分钟:getMinutes()

获取秒 : getSeconds()

字符串

split()将字符串装换为数组

substr()截取字符串,从哪截取，截取几个

substring()截取字符串,从哪开始截取一直截取到哪里

slice()截取字符串从哪开始截取，到哪里，允许为负数

includes()字符串是否包含

match()检测数组

indexof()返回对应字符串的下标

lastindexof()返回对应下标的下标,从最后开始查找

charAt()返回对应下标的字符

replace()替换

trim()去除字符串前后的空格

数组

join()将数组转换为字符串

splice()截取字符串

filter()筛选数组中满足条件的元素,并返回一个新的数组

sort()排序，不同类型的数组排序不一样

includes()查看数组是否包含元素

intanceof()返回对象的下标

lastintanceof()

findindex()查找复杂数据基本类型的数组,并返回对应的下边

isArray()检测该数据的数据类型是否为数组

some()查看数组中是否有一个元素满足条件

every()查看数组中的元素都满足条件

reduce()累计

forEach()遍历数组

正则表达式

定义:是一种字符串匹配格式

语法://

//g查找全局 //i不区分大小写 //m每行匹配

查找到0-9的数字[0-9]

方法:match

Dom

定义:文档对象模型,提供操作文档的api

Dom的顶级对象是document

常用来获取文档中的元素的方法querySelector，querySelectorAll

事件流

事件的三个阶段

1.事件捕获,

2.事件目标

3.事件冒泡

事件对象event

一般情况下操作元素或者给元素添加事件的时候,都会有一个事件对象event,他能让我们更加方便的操作元素

其中的方法:

event.target表示的是我们的鼠标点击的元素

event.currtarget表示我们鼠标点击的触发函数的元素

Bom

定义：浏览器对象模型，提供了操作浏览器的api

他的顶级对象是window

一些常用的方法

location这是我们的用来获取本网页地址的,其中的sreach是直接获取问号后面的参数

navigator.userAgent用来获取用户所使用的的机型

history历史记录 go(),back()返回,forword()前进

JSON一种传统的数据格式,方法就是stringify()将数据转化为字符串，parse()转换为对象

eval()将字符串视为js代码运行

ecodeURL()编码

decodeURL解码

数据存储的方式

1.本地存储localStorage,除非你自己主动删除不然就是不会清除

2.cookie 是后端提供的，用来在后台与前端的来回传输

3.sessionStorage 当网页关闭之前数据都可以使用

4.pormise存储数据(es6讲解)

ajax

定义:是异步的xml和JavaScript，他可以让你的网页在不重新加载整个页面的情况下，实现部分数据实时更新的功能

原生ajax发送数据

let xhr=new XMLHttpRequest();
xhr.open('GET/POST',url);
xhr.send();
xhr.onreadystatechange(function(res){
    if(res.status==200){
        //todo
    }
}) 

jquery发送ajax的方法就不列举了

axios:专门封装的ajax的库

axios.get/post(url,如果你是get发送请求的话，就需要{params:{所需要传递的参数}},是post的话就是{参数}).then(res=>{
    //todo
}).catch(err=>{
    //error
})

跨域

定义:因为浏览器有同源策略,当我们的协议名,域名，端口号都相同的时候,则视为你为同源,如果这三者中有一种不同的话就是异步

同源策略作用

同源策略就是为了限制在一个源中的数据与其他源或者同源中的数据进行交互的一种重要的安全策略，他大大降低了一些深藏的恶意文件

为什么有同源策略

1.因为前端和服务器是分开部署的,因为我们前端所需要的数据都是去连接服务器端的接口来获取的，获取这些接口都是需要跨域的

2.网页嵌套其他的网页用标签iframe

跨域的方法

jsonp跨域

与ajax的区别就是,ajax拿到的是其他网页中的数据,二jsonp就是通过动态创建script标签来使用其他页面中的js文件

jsonp跨域的原理?

浏览器有同源策略,会对我们的网页地址有约束,但是我们jsonp跨域是通过动态添加script标签来调用其他网页的js脚本.

Get和Post的区别

1.用途不一样

get一般是来获取数据的，当我们接口准备好了数据，然后我们通过get传参的方式来获取数据

post是用来发送数据的

2.传递参数的方式不一样

get传递参数会将参数放入浏览器的地址栏中，并且会有大小限制，主要是由于我们浏览器会对自己的地址框有大小限制

post传递的参数就是放入请求体中。因为post会将参数放入请求体,浏览器最请求体没有限制,所以post传递的参数没有大小限制

3.安全性

相对而言get的安全性没有post的安全

4.缓存

get会走缓存,post不会走缓存

http请求

浏览器用来获取我们的前端需要的一些文件或者图片，都会发送一个请求，这个请求就是http请求

http状态码

定义：当浏览者浏览网页的时候,浏览器会向请求网页所在的服务器发送请求,服务器会响应请求,并且会返回文档的时候也会提供一个http请求头,用来响应页面中的请求。

然后当我们http接收到前端网页的请求时,会向数据库(服务器)发出响应，如果响应成功了会返回成功并且status是200我们称这个status是http状态码

js进阶

基本数据类型和引用数据类型

基本数据类型存放在栈区，

引用数据类型存放在堆区,但是会在栈区中存放其在堆区中的地址.

函数

1.回调函数(函数作为参数)

2.自调用(自己调用自己,不需要别人的调用)

3.递归（自己调用自己）

js异步执行机制

同步和异步

同步:一次只执行一个任务,做完后做下一个任务

异步:一次做多个任务

单线程和多线程

单线程:同一时间只做一件事

多线程:同一时间做多件事

JavaScript只能是单线程,因为JavaScript生为浏览器脚本语言,功能就是为了实现与用户的交互,和操作dom，如果JavaScript是2线程的话,一个是用来添加节点以及添加样式的,宁外一个是删除该节点的,这个时候浏览器不知道将谁作为主线程,因此JavaScript只能为单线程

js事件循环

1.同步的事件将会在主线程上执行,形成执行栈

2.除了主线程外还有任务队列,当异步的事件有了结果，那么将会放一个事件在任务队列上,排队等待执行

3.当主线程上的事件都执行完毕后,将会把任务队列中的事件放到主线程上结束等待并执行事件

this指向

1.普通函数this指向的是调用者

2.函数不在对象中或者是匿名函数,this指向的是window

3.函数调用apply,call,bind会改变this的指向,this指向的是它的第一个参数

4.构造函数调用的时候也是this指向了调用者,当使用new操作符的时候,this指向的是通过构造函数所创建的实例化对象

5.箭头函数不绑定this，他会到上下文中去寻找this然后拿过来给自己使用

apply,call以及bind的区别

1.apply和call的区别:传递参数不一样

apply是以数组的形式传参

call是以普通的形式传参

2.bind与其他的区别

函数在调用apply和call会立即执行,而bind不会让其立即执行函数,他将会返回一个新的函数，不会立即执行

垃圾回收机制

定义:项目在运行过程中对执行环境中的内存进行管理的一种重要安全机制。垃圾回收机制不是实习的,因为gc执行一次损耗会很大,所以垃圾回收机制不是实时的执行,是有周期性的进行执行.

gc的回收策略

1.标记清除法,将超出她所对应的作用域，会对他进行标记,然后到了垃圾回收机制期间,将会对标记的变量进行回收

2.引用计数法:项目在运行时,将实时跟踪项目中的变量,并记下它的引用次数,引用一次加1,到了垃圾回收机制执行期间,引用次数仍然为0的将会被视为可回收的,并将它进行销毁。这样做会使得循环引用陷入死区

减少垃圾回收机制消耗

1.使用完对象后将它为null。

2.减少开辟空间的操作,例如new()\

3.慎用闭包

造成内存泄露的原因是？

1.全局变量的滥用

2.滥用闭包

3.删除dom的时候，没有销毁它的事件

4.循环引用

闭包

定义：全局环境中的函数中的内部函数被返回出来，并且在全局中被调用,我们称这个内部函数为闭包

作用:

1.模仿跨级作用域

2.封装私有化变量(私有化属性)

3.实现js的模块化

为什么闭包会导致内存的泄露

在一般情况下,函数执行完毕后，它的作用域中的变量将会被销毁,但是如果有闭包的产生,那么闭包所引用的变量将不会被销毁.

深拷贝和浅拷贝

区别:看看是复制的是实体还是实体的存储的内存地址,如果拷贝的是实体,那么这个拷贝就是深拷贝,反之则为浅拷贝

深拷贝:我们新对象将自己独立的开辟一个空间来复制一个对象中的属性和属性值。如果我们一个对象中的属性值发生改变的时候,新对象将不会发生改变.

浅拷贝:依葫芦画瓢的将一个对象中的属性和属性值赋值给新的对象包括内存地址.如果一个对象中的属性值发生改变那么新对象中对应的属性中的属性值也会发生改变。

面向对象和面向过程

定义

面向过程:分析出解决问题的步骤,然后用函数来实现它,如果需要就调用它

面向对象:把解决问题的事务分解成几个对象,建立对象不是为了描述解决问题的步骤,而是为了描述解决问题的步骤的行为

面向对象的三大特性

封装:就是将属性和方法封装在一起

继承:自己没有,把别人的东西拿过来给自己用，让自己拥有

多态:多态就是把做的内容和谁去做分开

防抖和节流

防抖:就是我们前端开发过程中会有连续触发事件,我们想让在连续触发的情况下过几秒触发事件中的代码,采用了延时器

节流:连续出发时间,在n秒内触发一次

原型对象和原型链

原型对象

构造函数中有一个指针prototype指向的是构造函数的原型对象,她所创建的实例中有一个指针__proto__指向的是将这实例创建出来的构造函数的原型对象，原型对象中的constructor构造器指向的是构造函数,原型对象中的属性和属性值，实例和构造函数都可以使用。

原型链

构造函数中有一个prototype的指针指向的是它自己的原型对象,她所创建的实例中有一个指针__proto__指向的是创建他这个实例的构造函数的原型对象,然后原型对象中的constructor指向的是构造函数

当我们实例原型对象是另外一个类型的实例化对象，如此嵌套下去上述关系都成立，然后将会有一条链来连接这个关系,我们称这个链为原型链。

原型链都最末端最终都是指向的是object，者印证了"一切皆对象"这句话.

创建对象和继承方式

创建对象的方法

1.字面量创建对象
2.工厂模式创建对象
3.构造函数模式创建对象
4.原型模式创建对象

构造函数的this指向了谁?

当使用了new操作符的时候,this指向的是构造函数所创建出来的实例化对象

没有使用new操作符的时候,this指向了window

js中new()到底做了些什么?

(1)、创建了一个对象

(2)将构造函数中的作用域内的属性和属性值都赋予给创建出来的对象

(3)运行构造函数中的代码

(4)返回创建出来的对象

继承方式

1.原型继承:…

// 人的构造函数
function Person() {}
Person.prototype.type = "人类";
Person.prototype.say = function () {
  console.log("这是个人类");
};

// 继承: 让男人的原型对象等于Person的一个实例
Man.prototype =  new Person();

function Man(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
var man = new Man("张三", 20, "男");
console.log(man);
// type和say都是继承而来
console.log('type',man.type);
man.say();
//缺点:对象中的属性和属性值都是来自同一个构造函数，如果一个对象中的属性值发生改变的时候,另外一个对象也会发生改变

2.ES6继承

1. Es6新数据类型class, 用来创建对象
2. constructor 构造器, 当调用new Person(), 构造器里的方法就会运行

class Person{
    constructor(username){
        this.username=username
    }
    say(){
    console.log(this.username+"嘎嘎帅");
    }
    sing(){
        console.log("唱歌也嘎嘎绝了");
    }
}
let p =new Person('小编');
console.log(p);
p.say();
p.sing();

3.寄生式继承

function Person(o){
    let clone=Object.create(o);
    clone.say=()=>{
        console.log(clone.name+"嘎嘎帅");
    }
    return clone;
}
var obj={
    name : "小编",
    age  : "18"
}
let boy=new Person(obj);
boy.say();