前端开发ES6学习 — Class

前端与移动开发 java
javaweb开发前端实例
java前端接口开发

传统的JavaScript面向对象编程,是通过构造函数原型来实现的。例子:
javascript 代码

function Num(n, m) {
    this.n = n
    this.m = m
}
Num.prototype.sum = function() {
    return this.n + this.m
}
var num = new Num(4, 5)
console.log(num.sum()) //9

在ES6规范里扩展了“class”的概念,基本写法如下:
javascript 代码

//定义类
class Num {
    //构造方法
    constructor(n, m) {
        this.n = n
        this.m = m
    }
    //定义方法
    sum() {
        return this.n + this.m
    }
}
var num = new Num(4, 5)
console.log(num.sum()) //9

与其他面向对象语言一样,ES6的class也有自己的构造方法。创建类时会构造一个默认方法,并且在new时立即执行它:
javascript 代码

class Num {}
//等同于
class Num {
    constructor() {}
}

修改构造方法:
javascript 代码

class Num {
    constructor() {
        console.log(9 + 9)
    }
}
var num = new Num() //18

class通过new关键字实例化,如果忘记new关键字会报错。
javascript 代码

class Num {
    constructor() {
        console.log(9 + 9)
    }
}
var num = Num() //报错 Class constructor Num cannot be invoked without ‘new’
var num = new Num() //18

要注意的是,如果通过表达式去接收一个class之后类名就是表达式名字,再去new老类名就会报错。
javascript 代码

var MyNum = class Num {
    constructor() {
        console.log(9 + 9)
    }
}
var num = new Num() //报错 Num is not defined

上面的例子里,Num只能在“class”内部使用,不能再被当做“类”来初始化
通过表达式还可以完成立即执行的“class”
javascript 代码

var num = new class {
    constructor() {
        console.log(9 + 9)
    }
}()
// 18

在“class”里有“set”和“get”两个关键字,可以实现get,set方法。
javascript 代码

class MyClass {
    get name() {
        return ‘李四’
    }
    set name(val) {
        console.log(val) //张三
    }
}
var myclass = new MyClass()
console.log(myclass.name) //李四
myclass.name = ‘张三’

“class”通过“extends”关键字实现继承,例如:
javascript 代码

class Fruit {
    constructor(name) {
        this.name = name
    }
    show() {
        console.log(this.name) //红富士
    }
}
class Apple extends Fruit {}
var apple = new Apple(‘红富士’)
apple.show()

如果子类需要修改constructor方法,则必须在constructor方法中调用super方法,否则就会报错。这是因为在实例化子类时没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
javascript 代码

class Fruit {
    constructor(name) {
        this.name = name
    }
    show() {
        console.log(this.name)
    }
}
class Apple extends Fruit {
    constructor(name) {
        //不调用super方法报错 this is not defined
    }
}
class Apple extends Fruit {
    constructor(name) {
        super(name)
    }
}
var apple = new Apple(‘红富士’)
apple.show()

上面例子中的super指向父类,还可以通过super调用父类的方法。
super关键字可以做为函数,也可以作为对象使用。上面例子中是作为函数使用,如果super作为函数使用,只能用在子类的构造函数之中,用在其他地方就会报错。
下面的例子是作为对象使用,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
javascript 代码

class Fruit {
    constructor(name) {
        this.name = name
    }
    showName() {
        return ‘父类的’ + this.name
    }
}
class Apple extends Fruit {
    constructor(name) {
        super(name)
    }
    show() {
        return super.showName()
    }
}
var apple = new Apple(‘红富士’)
console.log(apple.show())
javascript 前端开发
java和前端开发
javaweb是前端开发吗
» 本文来自:前端开发者 » 《前端开发ES6学习 — Class》
» 本文链接地址:https://www.rokub.com/8185.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!