一、箭头函数
1.1基本语法
【出现目的】:方便回调函数写法
语法:(形参)=>{函数体}
//函数声明式
function fn(){
console.log('普通函数')
}
//函数表达式(命名函数) 对匿名函数进行命名
var fn=funcion(){
console.log('命名函数')
}
//创建箭头函数
var fn= ()=>{console.log('箭头函数')}
1.2箭头函数的简写方式
1.2.1无参数无返回
let fn= ()=> console.log('无参数无返回')
fn()
1.2.2无参数有返回
let fn= ()=> '无参数有返回'
fn()
1.2.3有参数无返回
let fn=a=>console.log('有参数无返回'+a)
fn(10)
1.2.4有参数有返回
let fn=(x,y)=>{let sum=x+y;return sum}
1.2.5有参数,返回一个对象的函数
function fn(x,y){
return {a:x,b:y}
}
console.log(fn(10,20))
let fn=(x,y)=>{
return {a:x,b:y}
}
console.log(fn(10,50))
1.2.6 :注意点
// 1.如果函数只有一句话,可以省略不写{}
// 2.如果函数只有一句话并且有返回值,可以不写{}并且省略return
// 3.如果函数只有一个参数可以省略不写()
// 4.有多个参数不能省略(),有多个函数体语句不能省略{}
// 5.返回一句话,并且是第一个对象,不能简写(对象的{}和函数的{} 分不清)
// 6.箭头函数内部不支持arguments参数,但是可以使用...rest参数(不能省略())
1.3 this指向
this指针 的指向问题
1.3.1 全局使用this --- 指向window
console.log(this)
1.3.2函数全局调用 this ---- 指向window
function fn(){
console.log(this);
}
fn();
1.3.3对象方法中使用this --- 指向对象
let obj ={
name:'lh',
age:20,
eat:function(){
console.log(this)
},
sleep(){
console.log(this)
}
}
obj.eat();
obj.sleep();
1.3.4 事件中使用this --- 指向事件源
var btns =document.getElementsByTagName('button')
console.log(btns);
for(var i=0;i<btns.length;i++){
btns[i].onclikc=function(){
console.log(this)
}
}
1.3.5定时器中使用this --- 指向window
setTimeout(function(){
console.log(this);
},1000)
1.3.6总结
//1.默认(全局环境)this就是指向window
//2.在使用对象.方法() 时改变this指向
1.4箭头函数使用this
1.
2.对象.方法调用 指向该对象
3. 箭头函数中使用 (不会改变this指向)箭头函数中没有作用域 ,指向外层作用域执行环境
var name="wName";
var obj={
neme:"oName",
eat:funtion(){
console.log(this.name)
}
//对象方法的简写(和箭头函数没有关系)
play(){
console.log(this.name)
}
//对象的方法(包括事件绑定) 不能使用箭头函数 ---- 内部发this无法指向该对象
sleep:()=>{//箭头函数
console.log(this.name)
}
}
obj.eat();// this --obj
obj.play();// this -- obj
obj.sleep();// this --
二、promise对象
1.创建Promise对象
var p=new Promise((resolve,reject)=>{//回调函数
//这个回调函数 接收两个参数 resolve(决定),reject(拒绝)(官方定义)
//resolve,reject 这两个参数都是函数
})
2.三个状态
//默认 pending(悬而未决)
//成功 fulfilled(成功,完成)
//失败 rejected(拒绝)
2.1【变化过程】
var p=new Promise((resolve,reject)=>{
resolve(); // 从pending ---> fulfilled
reject(); // 从pending ---> rejected
})
3.[Promise特点]:
//1.状态只会在内部改变,不受外界影响
//2.一旦状态发送改变,就不再变化(以凝固,以定型)
4.完整的Promise写法
// Promise 对象 解决异步编程的问题
//假装请求返回的状态
var page = true
// Promise 是同步的
var p = new Promise((resolve, reject) => {
if (page) {
resolve('成功')//将状态改为成功
}else {
reject('失败')//将状态改为失败
}
console.log('p里面');
})
// 不管是resolve 还是reject 返回的结果都在外部处理
// then函数 处理 请求成功后返回的结果
// catch函数 处理 请求失败返回的结果
//本质上then 和catch 方法是异步的
p.then(res => {
console.log('操作结果:' + res);
console.log('then里面');
}).catch(err => {
onsole.log('操作结果:' + err);
})
//同步
console.log('全局');
4.1简化后Promise写法
// 使用函数封装请求 ,并且使用对象的简化写法传参
function getAjaxPromise(url, type, index) {
return new Promise((resolve, reject) => {
$.ajax({
url,
type,
success(res) {
resolve(index);
},
error(err) {
reject(err);
}
})
})
}
var p1 = getAjaxPromise('http://kumanxuan1.f3322.net:8809/index/banners/travel', 'GET', 1)
var p2 = getAjaxPromise('http://kumanxuan1.f3322.net:8809/strategies/themes', 'GET', 2)
var p3 = getAjaxPromise('http://kumanxuan1.f3322.net:8809/index/banners/strategy', 'GET', 3)
p1.then(res => {
console.log(res);
return p2;
}).then(res => {
console.log(res);
return p3;
}).then(res => {
console.log(res);
})
5.Promise的两个方法
1.Promise all方法
//使用all方法
//一般使用在所有ajax请求结果都要成功才执行时
let p=Promise.all([p1,p2,p3])
//方法规则
//1.所有Promise 对象都成功的时候,总的结果为成功
// 会指向then方法,得到的结果是 所有Promise对象resolve返回的结果
// 以数组的形式体现
//2.只要有一个Promise对象状态为失败,总结果为失败
// 结果就是第一个获取[最快得到的]的失败的结果
2.Promise race方法
//race规则
//谁快得到谁
6.真正的异步同步化
// async await 语法 重要 项目 频繁使用
// async await 两个关键字 一般来说 成对出现 ---- 目的 实现 异步代码同步化
// async 一般写在函数前面 表示这是一个异步函数
// await 一般卸载asynsc函数内部 函数内不的代码在await (异步代码)之后执行
// 函数内部,一旦遇到await 会先处理异步程序 ,得到响应结果之后,再处理后面的代码
var p1 = new Promise((resolve, reject) => {
setInterval(() => resolve('p1'), 3000)
})
var p2 = new Promise((resolve, reject) => {
setInterval(() => resolve('p2'), 2000)
})
var p3 = new Promise((resolve, reject) => {
setInterval(() => resolve('p3'), 1000)
})
async function getRes() {
// 异步
await p1.then(res => console.log(res));
await p2.then(res => console.log(res));
await p3.then(res => console.log(res));
// 同步
console.log('同步');
}
getRes()
下一篇 : 面向对象篇[一]