面向对象
es5面向对象写法
在es5中，构造函数和类是一个东西
继承：
1、子类.prototype = new 父类(); // 通过实例化来实现继承
2、父类.call(this, 参数, 参数)； // 通过call方法实现继承
// 构造函数
function User(name,pass){
this.name = name;
this.pass = pass;
}
// 使用prototype增加方法
User.prototype.showName = function (){
alert(this.name);
}
User.prototype.showPass = function(){
alert(this.pass);
}
// 实例化
var a = new User("qss", "123456");
// 实例调用
a.showName();
a.showPass();
// 继承
function VipUser(name, pass, level){
// es5使用call实现继承父类方法
User.call(this, name, pass);
this.level = level;
}
VipUser.prototype = new User();
// 补下constructor 指向会乱
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function(){
alert(this.level);
}
var b = new VipUser("qss", "qwer", 10);
b.showName();
b.showPass();
b.showLevel();
es6面向对象写法，相对于es5就方便多了
1、class关键字、构造器和类分开了
2、class里面直接加方法
class 类名{
//构造函数
constructor(name,pass){
this.name = name;
this.pass = pass;
}
// 直接写方法，不要function，不要逗号分号
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
// 使用，和es5一样
var u1 = new 类名(参数,参数);
u1.showName();
u1.showPass();
继承
super – 超类，也就是父类，更正式点
class 继承类名 extends 父类名{
constructor(name,pass,level){
super(name,pass);// 表示执行父类的构造函数
this.level = level;// 再加上自己的
}
// 自己的方法
showLevel(){
alert(this.level);
}
}
// 使用
var u2 = new 继承类名(参数1，参数2，参数3);
u2.showName();
u2.showPass();
u2.showLevel();
代码示例
class User{
constructor(name,pass){
this.name = name;
this.pass = pass;
}
showName(){
alert(this.name);
}
showPass(){
alert(this.pass);
}
}
// 扩展
class VipUser extends User{
constructor(name,pass,level){
super(name,pass);// 执行父类的构造函数
this.level = level;
}
showLevel(){
alert(this.level);
}
}
var v1 = new VipUser("qss","123456",3);
v1.showName();
v1.showPass();
v1.showLevel();
json
- json字符串的标准写法：
1、只能用双引号
2、所有的名字（key）都必须用引号包起来
{"a":12,"b":5}
{"a":"hhh","b":"kkk"}
- json对象，方法
JSON.stringify json对象转换为字符串
JSON.parse json字符串转换为json对象
- 简写
名字和值（key/value）一样的 留一个就行
let a=12;
let b=2;
let json = {a:a,b:b,c:55}; -----可简写为 let json = {a,b,c:55};
json中有方法 :function 可以删除
let json = {
a:12,
show:function(){
alert(this.a);
}
}
json.show();
----可简写为
let json = {
a:12,
show(){
alert(this.a);
}
}
json.show();
Promise
- 链式调用
- 状态不可逆（pending-进行中、fullfilled-成功、rejected-失败）
- Promise实例必须包含then
- then必须接受两个函数参数，一个成功、一个失败
- then()返回的必须是一个promise对象
- then()没有明文返回promise，后面的then就都用初始的
异步 操作之间没关系，同时进行多个操作
同步 同时只能做一件事
异步 代码复杂
同步 代码简单
有了Promise之后的异步
基础写法
let p = new Promise(function(resolve,reject){
$.ajax({
url:"../data/arr.txt",
dataType:"json",
success(data){
resolve(data);
},
error(err){
reject(err);
}
})
});
p.then(function(data){
console.log("成功");
console.log(data);
},function(err){
console.log("失败")
})
同时获取多个文件数据
function creatData(url){
return new Promise((resolve, reject)=>{
$.ajax({
url:url,
dataType:"json",
success(data){
resolve(data);
},
error(err){
reject(err);
}
})
})
}
Promise.all([
creatData("../data/arr.txt"),
creatData("../data/json.txt")
]).then(data=>{
console.log("成功");
console.log(data[0]);
console.log(data[1]);
},err=>{
console.log("失败")
})
jquery封装写法
Promise.all([ajax1, ajax2,ajax3]).then(successfun, errfun);
Promise.race
区别：
- all待全部完成，统一执行success
- race只要有一个完成，就执行success
Promise.all([
$.ajax({url:"../data/arr.txt", dataType:"json"}),
$.ajax({url:"../data/json.txt", dataType:"json"})
]).then(result => {
// 多个文件同时请求，返回值是一个数组，分别对应各个文件值
let [arr, json] = result;
console.log(arr,json);
console.log("成功");
},err => {
console.log("失败")
})
generator生成器----可以让函数走走停停
普通函数-----一路到底
generator生成器函数-----可以让函数走走停停
’ * ’ 和 yield 是generator函数的标志
- 写法 *可以挨着function或者函数名，也可以两个都不挨，不能连着两个,不能写成剪头函数的形式
- 搭配yield使用，yield暂停、放弃的意思
- generator函数，是创建了一个generator对象，对象才可以接着执行
- gen对象.next()函数，写一个执行一步，以yield隔开
function * show(){
代码1...
yield;
代码2...
}
let gen = show();
gen.next(); // 执行代码1
gen.next()；// 执行代码2
Promise和generator都是用于异步获取，区别在这篇中
几种异步请求的区别，简单写法](https://blog.csdn.net/sinat_41904410/article/details/99004146)
