es6从零学习(三):Class的基本用法
一:定义一个类
//定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘; } }
上面代码定义了一个“类”,可以看到里面有一个constructor
方法,这就是构造方法,而this
关键字则代表实例对象。
Point
类除了构造方法,还定义了一个toString
方法。注意,定义“类”的方法的时候,前面不需要加上function
这个关键字
注意:类里面不可以添加属性,只能用object.assgin添加
二:使用
使用的时候,也是直接对类使用new
命令,跟构造函数的用法完全一致。
class Bar { doStuff() { console.log(‘stuff‘); } } var b = new Bar(); b.doStuff() // "stuff"
三:类的prototype
属性
1、类的所有方法都定义在类的prototype
属性上面。
class Point { constructor() { // ... } toString() { // ... } toValue() { // ... } } // 等同于 Point.prototype = { constructor() {}, toString() {}, toValue() {}, };
2、在类的实例上面调用方法,其实就是调用原型上的方法。
class B {} let b = new B(); b.constructor === B.prototype.constructor // true
3、类的方法都定义在prototype
对象上面,所以类的新方法可以添加在prototype
对象上面。Object.assign
方法可以很方便地一次向类添加多个方法和属性值。
class Point { constructor(){ // ... } } Object.assign(Point.prototype, { toString(){}, toValue(){},
aa:123 });
注意:这里直接用Object.assign
方法对Point进行操作会报错。
4、类的方法名,可以采用表达式。
let methodName = ‘getArea‘; class Square { constructor(length) { // ... } [methodName]() { // ... } }
注意:这里不可以对属性的名字用表达式,会报错。
5、类必须使用new
调用,否则会报错
class Foo { constructor() { return Object.create(null); } } Foo() // TypeError: Class constructor Foo cannot be invoked without ‘new‘
四:类的constructor方法
1、constructor
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加
class Point { } // 等同于 class Point { constructor() {} }
五:类的实例对象
1、实例的属性除非显式定义在其本身(即定义在this
对象上),否则都是定义在原型上(即定义在class
上)。
//定义类 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 Point.property.hasOwnProperty(‘toString‘) // true
上面代码中,x
和y
都是实例对象point
自身的属性(因为定义在this
变量上),所以hasOwnProperty
方法返回true
,而toString
是原型对象的属性(因为定义在Point
类上),所以hasOwnProperty
方法返回false
。这些都与 ES5 的行为保持一致。
2、类的所有实例共享一个原型对象。
var p1 = new Point(2,3); var p2 = new Point(3,2); p1.__proto__ === p2.__proto__ //true
上面代码中,p1
和p2
都是Point
的实例,它们的原型都是Point.prototype
,所以__proto__
属性是相等的。
注意:这里的__proto__是两段下划线
3、可以通过实例的__proto__
属性为“类”添加方法。
var p1 = new Point(2,3); var p2 = new Point(3,2); p1.__proto__.printName = function () { return ‘Oops‘ }; p1.printName() // "Oops" p2.printName() // "Oops" var p3 = new Point(4,2); p3.printName() // "Oops"
使用实例的__proto__
属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例。