ES6

最新推荐文章于 2024-09-08 21:26:14 发布

原创最新推荐文章于 2024-09-08 21:26:14 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

class
class的继承
import与export
promise

class

1、ES6与ES5

ES5:

function Test(x,y){
    this.x = x;
    this.y = y;
}
Test.prototype.toString = function(){
    return this.x + this.y;
}
var test = new Test(2,3);

相当于ES6：

class Test{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toString(){
            return this.x + this.y;
    }
}
var test = new Test(2,3);

ES6与ES5的关系：

ES6中的constructor方法相当于ES5中的构造函数
ES6中的所有方法默认都是在prototype属性上定义的，即
上面的ES6代码相当于：
Test.prototype = {
constructor(){},
toString(){}
}
this均指向实例对象
constructor均直接指向类本身Test
方法是否可枚举。ES6中所有内部定义的方法都是不可枚举的，而ES5可枚举
调用方式有区别。ES6中的类必须使用new调用，而ES5可以像普通函数一样调用
继承的机制不一样。
ES5是先创建子类的实例对象this,再将父类的属性添加到子类上；
ES6是先创建父类的实例对象this,然后再用子类的构造函数修饰this.

2、实例属性和原型属性

类中的属性也分实例属性和原型属性：
实例属性：在constructor中定义的属性，放在this上
原型属性：所有方法

3、私有方法和私有属性的写法

只有类的内部可以调用。
_method() #property

4、this的指向

this默认指向实例对象。要想方法中的this始终这样指向，需在constructor中bind this:
constructor(){
this.method = this.method.bind(this); //将this.method中的this固定指向实例对象
}

5、静态属性和静态方法

加static的属性和方法，调用方式：类.属性或方法。
静态属性或方法不能被实例继承，但可被子类继承；
静态方法中的this指向类，而不是实例对象。

6、new.target

返回new 调用的构造函数对应的类名；
子类中指向子类

class的继承

1、extends

表示子类继承了父类的所有属性和方法，即等同于copy了父类。

2、super

指父类构造函数。

super(props) 相当于new Parent(props) ，即实例化父类生成父类的实例对象。
在子类constructor中必须添加super(props)，即：
constructor(props){
super(props);
}
这里的原理是，实例化子类时，先实例化父类得到父实例对象（this）(子类没有this对象)，将父实例对象赋给子实例对象。再对生成的实例对象继续修改。此时this即指向子实例对象。

super有两种用法：作为函数用和作为对象用。

作为函数用时，

必须在子类构造函数中调用。
代表的是父类构造函数。
super执行完后生成的实例对象指向子类，即this指向子类实例。
作为对象用时，

分为在普通方法中使用还是静态方法中使用。

在普通方法中使用时，
super指父类的原型对象，即 super.value 相当于 Parent.prototype.value

在静态方法中使用时，
super指向父类，即 super.value 相当于 Parent.value

this仍然是指向子类。

import与export

export default method;
import method from ‘…’;

Promise
异步编程的一种解决方案，承诺将来会执行的事情。
promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

使用：

var promise = new Promise(function(resolve,reject){
    //some code
    if(异步操作成功){
        resolve(result);
   }else{
        reject(result);
   }
})
promise.then(function(result){
    //成功
},function(result){
    //失败
})

上述代码，在new Promise()执行时立马回执行回调代码，然后在一次执行then中的函数。

promise实现ajax实例：

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;//请求成功后的回调
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});