简介
JavaScript 传统方法是 通过构造函数定义并生成新对象。下面是一个例子
function Point(x,y){
this.x = x;
this.y = y;
}
Point.prototype.toString = function(){
return '(' + this.x + ','+ this.y+')'
}
var p = new Point(1,2);
复制代码
上面这种写法对于传统面向对象语言的写法,差别很大。
ES6引入了 Class 作为对象的模板,通过Class关键字,可以定义类。
// 定义 类
class Point {
constructor(x,y){
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ','+ this.y+')'
}
}
复制代码
里面有一个 constructor 方法,这就是构造方法。 this关键字 代表实例对象。 ES5的构造函数 对应 ES6的类的构造方法。
ES6的类完全可以看作是构造函数的另一种写法
class Point {
// ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true
复制代码
构造函数的 prototype 属性在 ES6 的“类”上继续存在,事实上,类的所有方法都定义在类的prototype属性上。
class Point {
constructor(){
}
toString(){
}
toValue(){
}
}
// 等同于
Point.prototype = {
constructor(){},
toString(){},
toValue(){}
}
复制代码
在类的实例上调用方法,其实就是调用原型上的方法。
class B{}
let b = new B()
b.constructor === B.prototype.constructor // true
复制代码
由于类的方法 除了 constructor 都定义在 prototype 对象上,所以类的新方法可以添加在 prototype 对象上。 Object.assign 可以方便的向一个类添加多个方法。
class Point {
constructor(){
}
}
Object.assign(Point.proyotype,{
toString(),
toValue()
})
复制代码
prototype 对象的 constructor 属性 直接指向“类”本身。
类内部所定义的方法都是 不可枚举 的。这一点和 ES5 不一致
class Point{
constructor(){
}
toString(){
}
}
Object.keys(Point.prototype) // []
var Point = function(x,y){
}
Point.prototype.toStrirng = function(){
}
Object.keys(Point.prototype) //["toString"]
复制代码
constructor 方法
constructor 方法是默认方法,通过new 命令生成实例时自动调用该方法。
一个类必须有 constructor 方法,如果没有显示定义,一个空的 constructor 方法也会被添加。
class Point {
}
// 等同于
class Point {
constructor(){
}
}
复制代码
constructor 方法默认返回实例对象,即 this,不过 完全可以指定返回另外一个对象。
class Foo {
constructor(){
return Object.create(null)
}
}
new Foo() instanceof Foo // false
复制代码
上面代码 constructor 函数返回一个全新对象,结果导致 实例对象不是 Foo 类的实例。
类必须使用new来调用,否则会被报错。
类的实例对象
生成类的实例写法与Es5完全一样,也是 new 命令。
实例的属性除非显式定义在其本身(this)上,否则都是定义在原型上。
// 定义类
class Point {
constructor(x,y){
this.x = x;
this.y = y;
}
toString(){
return '(' + this.x + ','+ this.y+')'
}
}
var point = new Point(2,3)
point.toString() // (2,3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
复制代码
x y 都是实例对象point自身的属性(定义在this变量上),所以 hasOwnProperty 返回 true, 而 toString 方法是原型对象的属性(定义在类上)所以 hasOwnProperty 返回 false。
类的所有实例共享一个原型对象。
var p1 = new Point(2,3)
var p2 = new Point(1,2)
p1.__proto__ === p2.__proto__ // true
复制代码
Class 表达式
与函数一样,Class 也可以使用表达式定义。
const MyClass = class Me {
getClassName(){
return Me.name
}
}
let inst = new MyClass()
inst.getClassName() //Me
Me.name // Me is not defined
复制代码
这个类名字是 MyClass,而不是 Me ,Me 只有在 Class 内部代码可用,指代当前类。
如果 Class 内部没有用到,那么可以省略Me
const myClass = class {}
复制代码
立即执行的Class
let person = new class {
constructor(name){
this.name = name
}
sayName(){
console.log(this.name)
}
}("张三")
person.sayName() // "张三"
复制代码
不存在变量提升
new Foo(); // RenferenceError
class Foo{}
复制代码
子类必须在父类之后定义。
{
let Foo = class{}
class Bar extends Foo {
}
}
复制代码
私有方法
只能通过变通方法模拟
一种是 命名 加以区别
class Widget {
// 公有
foo(baz){
}
// 私有
_bar(baz){
}
}
复制代码
另一种
将似有方法移出模块。模块内部的方法都是对外可见的。
class Widget {
foo(baz){
bar.call(this,baz)
}
//
}
function bar(baz){
return this.snaf = baz
}
复制代码
foo是公有方法,内部调用了 bar.call(this,baz) 这使得 bar 实际当成了当前模块的私有方法。
私有属性
与 私有方法 一样,ES6 不支持私有属性。 目前有一个提案,方法是在属性名之前,使用 # 来表示。
this 的指向
类的方法内部如果含有 this ,它将默认指向类的实例。
class Logger{
printName(name = 'there') {
this.print(`Hello ${name}`)
}
print(text) {
console.log(text)
}
}
const logger = new Logger()
const {printName} = logger
printName() // can not read property 'print' of underfined
复制代码
上面代码,printName方法中this指向Logger类的实例。但是将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print方法。
一个简单的解决办法是:在构造函数中绑定this,这样就不会找不到 print 方法了。
class Logger{
constructor(){
this.printName = this.printName.bind(this)
}
// ...
}
复制代码
name
name 总会返回 紧跟着 class 关键字后面的类名。
class Point {
}
Point.name // "Point"
复制代码
Class 的取值函数(getter) 和 存值函数(setter)
“类”内部可以使用get和set关键字对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class MyClass {
constructor(){
//..
}
get prop() {
return 'getter'
}
set prop() {
console.log('setter: ' + value)
}
}
let inst = new MyClass()
inst.prop = 123 //setter: 123
inst.prop // 'getter'
复制代码
Class 的静态方法
类相当于实例的原型,所有在类中定义的方法都会被继承。如果在一个方法前加上 static 关键字,就表示 该方法不会被实例继承,而是直接通过类 类 调用,称为“静态方法”
class Foo {
static classMethod() {
return 'hello'
}
}
Foo.classMethod() // 'hello'
var foo = new Foo()
foo.classMethod() // foo.classMethod is not a function
复制代码
静态方法可以直接在类上调用,而不是在 类的实例 上调用。 如果在实例上调用静态方法,抛出错误,表示方法不存在。
父类静态方法可以被子类继承
class Foo {
static classMethod(){
return 'hello'
}
}
class Bar extends Foo {
}
Bar.classMethod() // 'hello'
复制代码
静态方法也可以从 super 对象上调用。
Class 静态属性和实例属性
Class 的实例属性
Class的实例属性可以用等式写入类的定义
class myClass {
myProp = 42;
constructor(){
console.log(this.myProp) // 42
}
}
复制代码
myProp 就是MyClass的实例属性。在MyClass实例上就可以读取这个属性。
以前我们定义实例属性,只能写类的 constructor 方法里面。
有了新的写法以后,可以不在 constructor 方法里面定义
class ReactCounter extends React.Component {
state = {
count:0
}
}
class ReactCounter extends React.Component {
state;
constructor(props){
super(props);
this.state = {
count:0
}
}
}
复制代码
Class 静态属性
Class 静态属性只要在上面实例属性写法前面加上 static 关键字
class myClass {
static myProp = 42;
constructor(){
console.log(this.myProp) // 42
}
}
复制代码
new.target
new 是从构造函数生成实例的命令。 Es6 new 引入 new.target属性,返回 new 命令所作用的构造函数。 如果构造函数不是通过 new 命令调用的,那么 new.target 会返回 undefined。所以这个属性能确定构造函数是怎么调用的。