es6内容-类和方法

最新推荐文章于 2023-04-23 19:57:47 发布

颖颖丫

最新推荐文章于 2023-04-23 19:57:47 发布

阅读量191

点赞数

文章标签： c#

本文链接：https://blog.csdn.net/l_y_h___/article/details/120742677

版权

class类

新的class写法只是让对象原型的写法更加清晰更像面向对象编程，通过class关键字，可以定义类。

构造函数：constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

实例属性和方法：定义在类体中的属性称为实例属性，定义在类体中的方法称为实例方法。

不推荐在实例上定义方法，因为这样做方法会创建在实例上。

原型属性和方法：原型属性和方法顾名思义就是在构造函数的原型对象上存在的属性和方法。

不推荐在实例上定义属性，因为这样做属性的值无法自定义。

静态属性和方法：通过`static`关键字来定义静态属性和静态方法。静态属性和静态方法是定义在类上的，所以可以通过类直接访问。在静态方法中，`this`指向当前类。

class Animal{
//静态方法
static num = 0;
//静态方法
static getNum(){
    console.log(Animal.num);
}

//构造函数
constructor(name,age){
//实例属性
    this.name = name;
    this.age = age;
//实例方法不推荐在这里创建，每个实例创建都会被重复创建
    Animal.num++;
}

//原型方法(Animal.prototype.sayName)
function sayName(){
    console.log(this.name)
}
}
var d1 = new Animal('xiaobai',2)
console.log(d1);//Animal { name: 'xiaobai', age: 2 }
d1.sayName()//xiaobai
Animal.getName();//1
console.log(Animal.num)//静态属性和方法只能通过类名调用

继承：可以通过`extends`关键字实现继承，子类中可以没有构造函数，系统会默认提供一个。子类如果提供了构造函数就必须显示调用super。super函数类似于之前的借用构造函数。

class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链

1.子类的__proto__属性，表示构造函数的继承，总是指向父类。

2.子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

super 关键字

super作为函数调用时，代表父类的构造函数。
super作为对象时，在普通方法中，指向父类的原型对象

class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
}
//原型方法
    sayName(){
        console.log(this.name);
}
    sayAge(){
        console.log(this.name+this.age+'岁了!')
}
}
//继承
class Dog extends Animal{
    constructor(name,age,color){
        super(name,age);//super作为对象，指向父类的原型属性
        this.color = color;
}
    sayColor(){
        this.color = color
}
    sayAge(){
        super.sayAge();//super作为函数，指向父类的原型函数
}
}
var d1 = new Dog('xiaoming',2,'red');
console.log(d1);//Dog { name: 'xiaobai', age: 2, color: 'red' }
d1.sayName();//xiaoming
d1.sayAge();//xioaming2岁了!

console.log(Dog.__proto__);//[class Animal] 继承构造函数，总是指向父类
console.log(Dog.prototype.__proto__ === Aniaml.prototype)//true 继承原型方法，子类prototype属性的__proto__属性，总是指向父类的prototype属性。

迭代器

迭代器/遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。

如果我们想自定义一个迭代器，必须为对象添加一个Symbol.iterator方法，这个方法必须返回一个迭代器（iterator） —— 内部一个有next方法的对象。

原始就具有迭代器接口的数据类型有：Array、Map、Set、String、TypedArray、arguments、NodeList

var arr = [2,3,4]//可以使用for-of循环
var itr =  arr[Symbol.iterator]()//返回迭代器对象
console.log(itr.next());//{ value: 2, done: false }
console.log(itr.next());//{ value: 3, done: false }
console.log(itr.next());//{ value: 4, done: false }
console.log(itr.next());//{ value: undefined, done: true }
console.log(itr.next());//{ value: undefined, done: true }

//自定义一个可迭代对象
var obj = {
    data:[2,3,4],
    [Symbol.iterator](){
        var index = 0;
        var _this = this;
        return {
            next(){
                if(index<_this.data.length){
                    return { value:_this.data[index++], done:false}
                }else{
                    return{ value:undefined,done:true}
                }
            }         
        }
    }
}
var itr = obj[Symbol.iterator]();
console.log(itr.next());//{ value: 2, done: false }
console.log(itr.next());//{ value: 3, done: false }
console.log(itr.next());//{ value: 4, done: false }
console.log(itr.next());//{ value:undefined,done:true}
console.log(itr.next());//{ value:undefined,done:true}

promise

Promise 是异步编程的一种解决方案。简单说就是一个容器，里面保存着某个未来才会发生的事件（通常是一个异步操作）的结果。

Promise对象代表一个异步操作有三种状态： **pending（进行中，初始状态）**、**fulfilled（已成功）**和**rejected（已失败）**。

状态发生改变之后就凝固了，不会再变了，会一直保持这个结果，这时就称为 **resolved（已定型）**。

原型方法

Promise.prototype.then() 当状态由pending变为fulfilled的时候执行该回调函数

Promise.prototype.catch() 当状态由pending变为rejected的时候执行该回调函数

Promise.prototype.finally() 在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数

var pm = new Promise((resolve,reject)=>{
    setTomeout(()=>{
        if(Math.random()>0.1){resolve'下雨了'}
        else{reject'没下雨'}
    }，3000)
})
pm.then((res)=>{
    console.log(res);
}).catch((err)=>{
    console.log(err)
}).finally(()=>{//无论是够成功与否，都会执行
    console.log('测试了一次')
})

Promise.all([p1,p2]) 当p1,p2状态都为fulfilled(成功)时候，该实例的状态才为fulfilled

Promise.any([p1,p2]) 只要p1,p2状态有一个变为fulfilled，该实例的状态为fulfilled

Promise.race([p1,p2]) 当p1，p2之中有一个实例率先改变状态，该实例的状态就跟着改变。哪个承诺先成功就执行哪个(竞速)

Promise.allSettled() ES11新增，所有的承诺都执行完毕后，返回结果数组

var pm = new Promise((resolve,reject)=>{
    setTomeout(()=>{
        if(Math.random()>0.1){resolve'下雨了'}
        else{reject'没下雨'}
    }，3000)
})
var pm1 = new Promise((resolve,reject)=>{
    setTomeout(()=>{
        if(Math.random()>0.1){resolve'打雷了'}
        else{reject'没打雷'}
    }，3000)
})
var All_pm = Promise.all([pm,pm1]);
var All_pm = Promise.any([pm,pm1]);
var All_pm = Promise.race([pm,pm1]);
var All_pm = Promise.allSettled([pm,pm1]);//[
//  { status: 'fulfilled', value: '下雨了' },
//  { status: 'fulfilled', value: '打雷了' }
//]
All_pm.then((res)=>{
    console.log(res);
}).catch((err)=>{
    console.log(err)
}).finally(()=>{//无论是够成功与否，都会执行
    console.log('测试了一次')
})

Promise.resolve() 用于将现有对象转化为Promise实例fulfilled状态

Promise.reject() 用于将现有对象转化为Promise实例rejected状态

var res1 = Promise.resolve('ok')
res1.then((res)=>{
    console.log(res)
})//ok

var res2 = Promise.reject(new.Error('出错'));
res2.catch((err)=>{
    console.log(err)
})//Error: 出错

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

特点

function关键字与函数名之间有个星号
函数内部使用yield表达式
可以放置return语句，返回最终的结果

function* getData(){
     yield f1();
     yield f2();
     yield f3();
}
var res = getData();
res.next()

交替执行

function f1(){
    return 1
}
function f2(){
    return 2
}

function* getNum(){
    while(true){
        yield f1();
        yield f2();
    }
}
var res = getNum();
setInterval(()=>{
    console.log(res.next());
},1000)//1 2 1 2 1 2...

顺序执行

function xy(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(Math.random()>0.1){resolve'下雨了'}
            else{reject'没有下雨'}
        }，3000)
    })
}
function* getData(){
    yield 'xiaoming'
    yield xy()
    return '没有了'
}
var res = getData();//返回遍历器对象
console.log(res.next());//{ value: 'xiaoming', done: false }
console.log(res.next());//{ value: Promise { <pending> }, done: false }
console.log(res.next());//{ value: '没有了', done: true }
console.log(res.next());//{ value: undefined, done: true }

Async [əˈzɪŋk]异步编程

Async函数是generator函数的语法糖，在generator函数的基础上添加了一些更加方便用户操作的新特性。Async函数的执行和普通函数一致，只需要一行代码即可，因为他具有内置的执行。async与await对比*与yield有更好的语义

特点：

await关键字只在async函数内有效。
async函数返回一个 Promise 对象。
async函数可以实现也是一种异步函数同步化的实现

function xy(){
    return new Promise((resolve,reject)=>{
    //预测3秒后会下雨
    setTimeout(()=>{
        if(Math.random()>0.1){
            resolve('下雨了')
        }else{
            reject('没有下雨')
        }
    },3000)
});//异步
}
(async function getData(){
    var res = await xy();
    console.log(res)
}
)//下雨了

proxy/reflect

proxy我们可以理解为代理，其含义是在对象操作时，我们可以做一些额外的操作；例如对数据的处理，对构造函数的处理，对数据的验证。直接利用Reflect对象直接获取Proxy的默认值

var obj = {
    name:'xiaoming'
}
obj = new Proxy(obj,{
    get(target,key){
        return 'huang'+target[key]
};
    set(target,key,value){
        return Reflect.set(target,key,value)
    }
})
console.log(obj.name)//huangxiaoming

ajax

function get(url){
    return new Promise((resolve,reject)=>{
    var x = new XMLHttpRequest;
    x.open("GET",url,true);
    x.send(null);
    x.onreadystatechange =function(){
        if(x.readyState == 4 &&x.status==200){
            resolve(x.responseText)
        }else if(x.status!=200){
            reject(new Error('请求失败！'))
        }
    }
    })
    }
    var url = "http://81.69.24.232/pet/getArr.php";
    (async function(){
        var res = await get(url);//等承诺执行完毕
        console.log(res);
    })()

颖颖丫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6内容-类和方法

class类新的class写法只是让对象原型的写法更加清晰更像面向对象编程，通过class关键字，可以定义类。构造函数：constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。实例属性和方法：定义在类体中的属性称为实例属性，定义在类体中的方法称为实例方法。不推荐在实例上定义方法，因为这样做方法会创建在实例上。原型属性和方法：原型属性和方法顾名思义就是在
复制链接

扫一扫