目录
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.valuethis仍然是指向子类。
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);
});
用promise的好处:
1、链式操作
promise.then 可实现串行执行多个异步任务;
promise.all 可实现并行执行多个异步任务。
2、处理异步执行流程中,将执行代码合处理结果清晰分离
3、利于代码复用,如ajax请求只封装一次后即可重复调用