<script>
// class Promise
// class 类 类别的意义
// 为什么
// 构造函数
// function Person(name, age = 0) {
// this.name = name; //有this 返回
// this.age = age;
// }
// // 1不看构造体无法知道是构造函数
// // 2 构造函数当普通函数执行
// //ES6 class
// class Animal {
// }
// new Animal()
// console.log(typeof Animal) //function
//语法糖 糖衣 语法
//函数声明 VS class 声明
// let p = new Person
// function Person(name, age = 0) {
// this.name = name;
// this.age = age;
// this.showMsg = function() {
// console.log(this.name, this.age);
// }
// }
// console.log(Person.prototype.constructor === Person) //true
// 为什么用原型
//节省空间 增加代码复用
// Person.prototype.showMsg = function() {
// console.log(this.name, this.age);
// }
// // Animal.prototype.XXX 原型不用
// // let dog = new Animal//报错
// class Animal {
// // class 声明的类不存在声明提升和重复声明\
// constructor(name, age = 0) {
// this.name = name;
// this.age = age;
// this.showName = function() {
// console.log(this.name);
// }
// }
// // 默认定义在原型上
// showName() {
// console.log(this.name);
// }
// showAge() {
// console.log(this.age);
// }
// // static a = 2;不支持静态属性
// static creatDemo() {
// // 静态方法
// return new Animal(name);
// }
// }
// let p = new Person("wangxiaobao", 12)
// let dog = new Animal('wangwang', 3)
// // console.log(Animal.prototype.constructor === Animal) //true
// // class
// //构造函数 constructor
// // 定义在原型链上的函数 除了 constructor以外的函数
// // 静态方法,通过static声明的函数
// // Object.is(NaN, NaN) 增强的绝对的等于 === 静态方法
// 一等公民class function
//function
//函数的参数
//可以被返回
// 可以立即执行
// 可以赋值给别人
// //作为参数
// function crearObject(classDefind) {
// return new classDefind();
// }
// //可以被返回
// let obj = new new crearObject(class {
// constructor() {
// this.type = 'node';
// }
// })
// //立即执行
// let obj = new class {
// constructor(value) {
// this.value = value
// }
// }('dg')
//class生成器方法
// class IteratorArray {
// constructor(arr = []) {
// this.arr = arr
// } *
// [Symbol.iterator]() {
// yield* this.arr[Symbol.iterator]()
// }
// }
// let arr = new IteratorArray([1, 2, 3, 4])
// for (let item of arr) {
// console.log(item);
// }
// // new IteratorArray() for of [Symbol.iterator]
// 继承
// 增加代码复用
// function Animal(name, age) {
// this.name = name;
// this.age = age;
// }
// function Person(name, age) {
// Animal.call(this.name, this.age)
// }
//圣杯模式
// function Animal(name){
// this.name = name
// }
// Animal.prototype.showName(){
// console.log(this.name)
// }
// function Person(name){
// Animal.call(this,name)
// }
// Person.prototype = Animal.prototype;
// Person.prototype = Object.create(Animal.prototype);
// let p = new Person('wxb');
// class Animal {
// constructor(name) {
// this.name = name
// }
// showMsg() {
// console.log(this.name)
// }
// eat() {
// console.log("animal eat")
// }
// }
// Animal.prototype.type = "Animal"
// class Person extends Animal {
// constructor(name) {
// super(name)
// this.width = 10;
// }
// eat() {
// console.log(super.type)
// console.log("person eat")
// }
// show() {
// super.showMsg()
// }
// }
// let p = new Person("dg");
// //子类 派生类
// // super 作为函数执行调用父类的构造函数 默认this指向当前对象
// // 子类必须调用super函数
// // super 作为对象时候 指向父类的原型 并自动绑定当前函数的this
// Promise
// 为什么要用 Promise (承诺)
// 异步编程
// 回调函数
// $.ajax({
// type,
// url,
// success(data) {
// $.ajax({
// type,
// url,
// success(data1) {
// $.ajax({
// type,
// url,
// success(data2) {
// },
// error() {
// }
// })
// },
// error() {
// }
// })
// },
// error() {
// }
// })
// A(
// B(
// C(
// D(
// E()
// )
// )
// )
// )
// A
// S1 pending => success / error
// B
// S2 pending => success / error
// C
// S3 pending => success / error
// D
// S4 pending => success / error
// E
// let p = new Promise(function(resolved, reject) {
// resolved()
// })
// let s1 = new Promise((resolved, reject) => {
// // resolved(1)
// setTimeout(() => {
// console.log('a is finished');
// resolved('yes')
// }, 2000)
// })
// s1.then(() => {
// console.log('ok')
// }, () => {
// console.log('no')
// }
// )
// let s2 = s1.then(data => console.log(data),
// err => console.log(err))
// then 返回Promise对象
// function myAjax(url, data = null, type = "GET") {
// return new Promise(function(resolved, reject) {
// $.ajax({
// type,
// url,
// data,
// success() {
// resolved(data)
// },
// error() {
// reject(err)
// }
// })
// })
// }
// let p = myAjax('api.douban.com').then(data => console.log(data),
// err => console.log(err))
// Promise
// loadUrl
// var img = new Image();
// img.onload = function(){
// }
// img.onerror = function (){
// }
// img.src = 'xxx.png'
// function loadUrl(url) {
// let img = new Image();
// return new Promise((resolve, reject) => {
// img.onload = function() {
// resolve(img)
// }
// img.onerror = function() {
// reject(`${url} is not an effective URL`)
// }
// img.src = url;
// })
// }
// 细致 Promise 用法
// Promise.resolve() Promise.reject() Promise.all() Promise.race()
// Promise.prototype.then Promise.prototype.catch
// let p = new Promise((resolved, reject) => {
// resolved()
// reject()
// })
// let p1 = p.then(data => console.log(data), err => console.log(err + 'err'))
// // p1 instanceof Promise = true
// p1.then(data => console.log(`suc data is ${data}`), err => console.log(`err data is ${err}`))
// Promise 对象的状态不可逆
// then 会返回 Promise 对象,对应毁掉函数中的返回值(return) 作为返回的 Promise 对象的data
// then 方法的返回值是 非 Promise 对象 返回的 Promise 对象的状态 为 resloved
// then 方法的返回值是 Promise 对象 返回的 Promise 对象的状态 由 里面返回 Promise 对象决定
// Promise.all Promise.race
// let p1 = Promise.resolve(1);
// let p2 = new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve(2)
// }, 2000)
// })
// let p3 = new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve(3)
// }, 2000);
// })
// // let P = Promise.all([p1, p2, p3])
// // P.then(data => console.log(data), err => console.log(err))
// let P = Promise.race([p1, p2, p3])
// P.then(data => console.log(data), err => console.log(err))
//为什么不看源码?
//1.代码 28 定则
class myPromise {
constructor(fn) {
if (typeof fn !== "function") {
throw TypeError(`myPromise resolve ${fn} is not a function`)
}
this.status = 'pending'
this.data = undefined
let resolve = (value) => {
if (this.status === 'pending') {
this.status = 'resolved'
this.data = value
}
}
let reject = (value) => {
if (this.status === 'pending') {
this.status = 'rejected'
this.data = value
}
}
fn(resolve, reject)
}
then(resolveFn, rejectFn) {
if (this.status == 'resolved') {
// console.log('resolve')
let res = resolveFn(this.data)
if (res instanceof myPromise) {
console.log('It is myPromise')
console.log(this.data)
} else {
console.log('No myPromise')
}
}
if (this.status == 'rejected') {
// console.log('reject')
let res = rejectFn(this.data)
if (res instanceof myPromise) {
return res
} else {
myPromise.resolve(res)
}
}
}
static resolve(data) {
return new myPromise(function(suc) {
suc(data)
})
}
static reject(data) {
return new myPromise(function(resolve, reject) {
reject(data)
})
}
}
//测试
let mp = new myPromise(function(suc, err) {
err(1)
})
mp.then(null, data => new myPromise(function(resolve, reject) {
reject(data + 1)
})).then(null, data => console.log(data + 'err'))复制代码
ES6 封装Promise
最新推荐文章于 2022-07-29 09:52:33 发布