由于构建工具的发展，即使es6的标准现在还未在所有场景下都支持，但是使用babel后也能达到一样的效果，下面是最常用的几类特性归纳。
class
之前我们习惯用构造函数来实现类的效果，在js的语法中是没有类的，即使是有了class，本质上也只是构造函数的语法糖。
//构造函数的方式
function MathHandle(x,y) {
this.x = x;
this.y = y;
}
MathHandle.prototype.add = function () {
return this.x+this.y
}
var m = new MathHandle(1,2)
console.log(m.__proto__===MathHandle.prototype) //true
console.log(MathHandle.prototype.constructor===MathHandle) //true
console.log(m.add()) //3
tips:
- 函数的显示原型（prototype）的constructor等同于它本身
- 实例的隐式原型( __ proto __)等于构造函数的显式原型(prototype)
到了es6的部分则需要这么写
//class方法
class MathHandle{
constructor(x,y){
this.x = x;
this.y = y;
}
add(){
return this.x+this.y
}
}
var m = new MathHandle(1,2)
console.log(m.add()) //3
console.log(typeof MathHandle) //fuction
console.log(MathHandle.prototype.constructor===MathHandle) //true
可以看到class定义出来的类本质上还是一个函数，其它和构造函数保持一致。
在继承方面
function Animal() {
this.eat = function () {
console.log('Animal eat')
}
}
function Dog() {
this.bark = function () {
console.log('Dog bark')
}
}
Dog.prototype = new Animal()
// 关键步骤：子类的原型绑定到父类的实例上
var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()
class Animal{
eat(){
console.log('Animal eat')
}
}
class Dog extends Animal{
//另外一种写法，也能实现继承
// eat(){
// super.eat()
// }
constructor(){
super()
}
bark(){
console.log('Dog bark')
}
}
var hashiqi = new Dog()
hashiqi.bark()
hashiqi.eat()
Promise
es6里面的Promise一定程度上解决了callback hell(回调地狱)的问题
// callback 写法
function loadImg(src,callback,fail) {
var img = document.createElement('img')
img.onload = function () {
callback(img)
}
img.onerror = function () {
fail()
}
img.src = src
}
var src = 'https://www.baidu.com/img/bd_logo1.png?qua=high&where=super'
loadImg(src,function (img) {
console.log(img.width)
},function () {
console.log('err')
})
//Promise写法
function loadImg(src) {
return new Promise((resolve,reject)=>{
var img = document.createElement('img')
img.src = src
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject()
}
})
}
var src = 'https://www.baidu.com/img/bd_logo1.png?qua=high&where=super'
loadImg(src).then((result) => {
console.log(result.width)
}).catch((err) => {
console.log('err')
});
loadImg(src).then((result) => {
console.log(result.height)
}).catch((err) => {
console.log('err')
});
这里注意的是Promise.then()后可以使用多次，而不用一次性的在回调函数中写完，特别是回调后还有回调的情况
其它常见特性
//let const
let i = 0;
i=100;
console.log(i);
const j = 1;
j=100
console.log(j) //报错，因为const定义的是常量，不可变
//模板赋值
const name = 'xxx'
let str = `woshi${name}`
console.log(str) //模板字符串可以换行，普通的字符串不行
//解构赋值
const obj = {a:1,b:2,c:3}
let {a,c} = obj
console.log(a) //1
console.log(c) //3
let [a,b,c] = [4,5,6]
console.log(a,b,c) //4,5,6
//块级作用域
var obj = {a:100,b:200}
for (var item in obj) {
if (obj.hasOwnProperty(item)) {
console.log(item)//a b
}
}
console.log(item) //b
var obj = {a:100,b:200}
for (let item in obj) {
if (obj.hasOwnProperty(item)) {
console.log(item)//a b
}
}
console.log(item) //undefind
//函数默认参数
function fn(a,b) {
if(b==null){
b=0
}
console.log(a,b)
}
fn(1,2) //1,2
fn(1) //1,0
function fn(a,b=0) {
console.log(a,b)
}
fn(1,2) //1,2
fn(1) //1,0
//箭头函数
var obj = {a:1}
function fn() {
console.log(this) //obj
}
var fn = ()=>{console.log(this)} //window
fn.call(obj)