ES6(这是我见过写的最好的)!推荐
文章目录
- ES6总结
-
- var，let，const的区别
- 箭头函数和function的区别
- 结构赋值
- 原型
- 原型链
- 继承
-
-
-
-
- 1.原型链继承
- 2.构造函数继承
- 3.组合式继承
- 4.class类继承
-
-
-
- Promise
- async和await
- Generator
- 深拷贝和浅拷贝
- 闭包
ES6总结
var，let，const的区别
1.var 变量可以提升，let，const变量不可以提升
2.var 没有暂时性死区，let，const有暂时性死区
3.var 允许重复声明，let，const不可以重复声明
4.var 和let可以修改声明的变量，const不可以修改
5.var 没有块级作用域，let和const有块级作用域
箭头函数和function的区别
1.箭头函数是匿名函数，不能作为构造函数，不能使用new
2.箭头函数内没有arguments，可以用展开运算符...解决
3.箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）
4.箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数，但是可以正常传参)
5.箭头函数没有原型属性
结构赋值
1 结构赋值就是从对象或数组中提取值，吧右边的值赋给左边
2 分为数据结构，对象结构，结构赋值，结构对象，从方法中返回
原型
实例化对象和原型的constructor指向构造函数
构造函数的prototype属性指向原型对象
实例化对象的__proto__属性指向原型对象
JavaScript里面每个对象都有一个__paoto__属性，这个属性就是他的原型
每个方法里面都有一个prototype属性，也是他的原型
原型链
实例化对象的__proto__指向构造函数的prototype
构造函数prototype的__proto__指向Object.prototype
Object.prototype的__proto__指向null
继承
1.原型链继承
父类的实例做为子类的原型
function Fu(){
this.arr=['red','blue','green']
}
function Zi(){
}
Zi.prototype=new Fu();
var a=new Zi
a.arr.push('black')
2.构造函数继承
在子类内，使用call调用父类方法，并将父类的this修改为子类的this，相当于是吧父类的实例属性复制了一份放到子类的函数内
function Fu(){
this.arr=['red','blue','green'];
}
function Zi(){
Fu.call(this);
}
var a=new Zi();
a.arr.push('black')
console.log(a.arr)
3.组合式继承
既能调用父类实例属性，又能调用父类原型属性
function Fu(name){
this.name=name;
this.arr=['red','blue','green'];
}
Fu.prototype.say=function(){
console.log(this.name)
}
function Zi(name,age){
Fu.call(this,name);
this.age=age;
}
Zi.prototype=new Fu();
var a=new Zi('black',21,'女')
a.say()//成功继承
4.class类继承
相当于es5中构造函数
class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
class中定义的所有方法是不可枚举的
class中只能定义方法，不能定义对象，变量等
class和方法内默认都是严格模式
es5中constructor为隐式属性
class Fu(){
constructor(name){
this.name=name
}
say(){
console.log(this.name)
}
}
class Zi extends Fu{
constructor(name,age){
super(name)
this.age=age
}
say(){
super.say()}
}
var a=new Zi('张三')
a.say()
Promise
1.
概述：Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息
2.目的： （1）、避免回调地狱的问题（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易
3.Promise有三种状态：pendding //正在请求，rejected //失败，resolved //成功
4.基础用法：new Promise(function(resolve,reject){ })
resolved,rejected函数：在异步事件状态pendding->resolved回调成功时，通过调用resolved函数返回结果；当异步操作失败时，回调用rejected函数显示错误信息
$(function(){
// 封装一个promise;将url提取出来;
var p = function(url){
return new Promise(function(resolve,reject){
$.get(url,function(data){
resolve(data);
})
})
}
Promise.all([
p("https://cnodejs.org/api/v1/topics?tab=good"),
p("https://cnodejs.org/api/v1/topics?tab=share"),
]).then(function(result){
console.log(result);
})
})
async和await
async 其实就是promise的语法糖，可以让普通函数变为一个异步函数，返回的是一个promise对象
1.async使用在函数前面，把函数变成一个异步函数，返回值是个promise对象。
2.await只能使用在async声明的函数里，不能使用在普通函数里。
3.异步操作方法的前面要加关键字await 意思就是等一下，是可以等到你的数据加载过来以后才会去运行下边的 js 内容，而且 await 接收的 对象必须还是个 promise 对象。，注意：async和await必须一起使用，否则会报错。
4.async/await 可以解决异步，回调地域
Generator
要了解Generator 就要先了解他出现的原因
1.当初设计是为了解决地域回调问题的
2.因为当时的promise解决地域回调代码量过多
3.出现generator没多久async/await就出来了
4.于是generator就处于一个尴尬的境地，慢慢的被人遗忘了
语法上，Generator 函数是一个状态机，封装了多个内部状态。
形式上，Generator是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。
整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句。
1.function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。
2.调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。
3.Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。
总结一波
从回调函数，到promise,再到generator,再到Async/await,这四种分别代表了JavaScript异步编程解决方案的进化路程。async和generator函数主要就是为了解决异步的并发调用使用的 ，直接将参数从then里取出来，相比promise的链式调用，传参更加方便，异步顺序更加清晰
深拷贝和浅拷贝
//深拷贝
let obj=[0,1,2,5]
let arr=JSON.stringify(obj)
let es=JSON.parse(arr)
es[0]=99
console.log(obj,es);
//浅拷贝
let a=[0,2,3,4]
let b=a.slice()
a[1]=000000000;
console.log(a,b)
//浅拷贝
let a=[0,1,2,3]
var b=a;
b[0]=000000000000000
console.log(a,b);
闭包
//方法一
function foo(){
var a=111;
return function (){
console.log(a+333);
}
}
let q=foo()
q()
//方法二
var es=(function(){
var i=222;
return function(){
console.log(i)
}
})()
es()
//方法三
function foo(){
var a=111;
function es(){
console.log(a+333);
}
return{
es
}
}
foo().es()