目录
1.类的由来
JavaScript 语言中,生成实例对象的传统方法是通过构造函数
eg:
function Point(x, y) {
this.x = x;
this.y = y;
}
//p.__proto__ == Point.prototype
Point.prototype.toString1 = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
分析:上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。So:ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class
关键字,可以定义类。ES6 的class
可以看作只是一个语法糖
注意:新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class
改写,就是下面这样。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
//ES6中的方法写法是不需要加function
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
分析:上面代码定义了一个“类”,可以看到里面有一个constructor
方法,这就是构造方法,而this
关键字则代表实例对象。也就是说,ES5 的构造函数Point
,对应 ES6 的Point
类的构造方法constructor
。
注意点:Point
类除了构造方法,还定义了一个toString
方法。注意,定义“类”的方法的时候,前面不需要加上function
这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
注意:ES6 的类,完全可以看作构造函数的另一种写法:
<script>
class Point {
// ...
}
console.log(typeof Point); // "function"
console.log(Point === Point.prototype.constructor); // true
</script>
分析:上面代码表明,类的数据类型就是函数,类本身就指向构造函数,所以在使用的时候,直接对类使用new命令,跟构造函数的用法完全一致
<script>
class Bar {
doStuff() {
console.log('stuff');
return 0;
}
}
var b = new Bar();
console.log(b.doStuff()); // "stuff"
</script>
注意点:构造函数的prototype
属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype
属性上面。
class Point {
constructor() {
// ...
}
toString() {
// ...
}
toValue() {
// ...
}
}
// 等同于
Point.prototype = {
constructor() {},
toString() {},
toValue() {},
};
分析: 在类的实例上面调用方法,其实就是调用原型上的方法。
<script>
class B {}
let b = new B(); //b是一个实例对象
//constructor是由一个对象指向其构造函数, B.prototype.constructor中的constructor是调用原型上一个方法
console.log(b.constructor === B.prototype.constructor); // true
</script>
分析:上面代码中,b
是B
类的实例,它的constructor
方法就是B
类原型的constructor
方法。
注意点:由于类的方法都定义在prototype
对象上面,所以类的新方法可以添加在prototype
对象上面。Object.assign
方法可以很方便地一次向类添加多个方法。
<script>
class Point {
constructor() {
// ...
}
}
//第一个参数是要添加方法的对象
Object.assign(Point.prototype, {
toString() {},
toValue() {}
});
let p = new Point();
console.log(p);
</script>
没添加之前:
添加之后:
注意:prototype
对象的constructor
属性,直接指向“类”的本身,这与 ES5 的行为是一致的
<script>
class Point {
constructor() {
// ...
}
}
console.log(Point.prototype.constructor === Point); // true
</script>
注意点: 类的内部所有定义的方法,都是不可枚举的(non-enumerable)
//ES6中
class Point {
constructor(x, y) {
// ...
}
toString() {
// ...
}
}
Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
//ES5中 代码采用 ES5 的写法,toString方法就是可枚举的。
var Point = function (x, y) {
// ...
};
Point.prototype.toString = function() {
// ...
};
Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
分析:上面代码中,toString
方法是Point
类内部定义的方法,它是不可枚举的。这一点与 ES5 的行为不一致。
2.constructor 方法
constructor
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加。
class Point {
}
// 等同于
class Point {
constructor() {}
}
分析:上面代码中,定义了一个空的类Point
,JavaScript 引擎会自动为它添加一个空的constructor
方法。
注意点:constructor
方法默认返回实例对象(即this
),也完全可以指定返回另外一个对象。
<script>
class Foo {
constructor() {
return Object.create(null); //去掉这行下面就是true
}
}
//instanceof 判断 左边的 是否是 右边的 实例对象
console.log(new Foo() instanceof Foo);
// false
</script>
分析:constructor
函数返回一个全新的对象,结果导致实例对象不是Foo
类的实例。类的实例是通过类中的constructor创建的对象,并不是constructor方法返回的对象。
注意点:类必须使用new
调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new
也可以执行
<script>
class Foo {
constructor() {
return Object.create(null);
}
}
Foo()
// TypeError: Class constructor Foo cannot be invoked without 'new'
</script>
3.类的实例
生成类的实例的写法,与 ES5 完全一样,也是使用new
命令。前面说过,如果忘记加上new
,像函数那样调用Class
,将会报错。
class Point {
// ...
}
// 报错
var point = Point(2, 3);
// 正确
var point = new Point(2, 3);
注意点:与 ES5 一样,实例的属性除非显式定义在其本身(即定义在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
分析:上面代码中,x
和y
都是实例对象point
自身的属性(因为定义在this对象
上),所以hasOwnProperty
方法返回true
,而toString
是原型对象的属性(因为定义在Point
类上),所以hasOwnProperty
方法返回false
。这些都与 ES5 的行为保持一致。
注意点:与 ES5 一样,类的所有实例共享一个原型对象。
<script>
class Point{}
var p1 = new Point(2, 3);
var p2 = new Point(3, 2);
console.log(p1.__proto__ === p2.__proto__);
//true
</script>
分析:上面代码中,p1
和p2
都是Point
的实例,它们的原型都是Point.prototype
,所以__proto__
属性是相等的。这也意味着,可以通过实例的__proto__
属性为“类”添加方法。
__proto__
并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。生产环境中,我们可以使用Object.getPrototypeOf
方法来获取实例对象的原型,然后再来为原型添加方法/属性。
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"
分析:上面代码在p1
的原型上添加了一个printName
方法,由于p1
的原型就是p2
的原型,因此p2
也可以调用这个方法。而且,此后新建的实例p3
也可以调用这个方法。这意味着,使用实例的__proto__
属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例。
注意点
1.严格模式
类和模块的内部,默认就是严格模式,所以不需要使用use strict
指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上把整个语言升级到了严格模式。
2.不存在提升
类不存在变量提升(hoist),这一点与 ES5 完全不同
<script>
var f = new Foo(); //ReferenceError: Cannot access 'Foo' before initialization
class Foo {}
</script>
分析:上面代码中,Foo
类使用在前,定义在后,这样会报错,因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下面要提到的继承有关,必须保证子类在父类之后定义。
<script>
{
let Far = class {};
class Son extends Far {}
}
</script>
分析:上面的代码不会报错,因为Son继承Far的时候,Far已经有定义了。但是,如果存在class
的提升,上面代码就会报错,因为class
会被提升到代码头部,而let
命令是不提升的,所以导致Son继承Far的时候,Far
还没有定义。
3.name属性
由于本质上,ES6 的类只是 ES5 的构造函数的一层包装,所以函数的许多特性都被Class
继承,包括name
属性。
class Point {}
Point.name // "Point"
分析:name
属性总是返回紧跟在class
关键字后面的类名。
4.this指向
类的方法内部如果含有this
,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。
class Logger {
printName(name = 'there') {
this.print(`Hello ${name}`);
}
print(text) {
console.log(text);
}
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined
分析:上面代码中,printName
方法中的this
,默认指向Logger
类的实例。但是,如果将这个方法提取出来单独使用,this
会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是undefined
),从而导致找不到print
方法而报错。
解决方法1:一个比较简单的解决方法是,在构造方法中绑定this
,这样就不会找不到print
方法了
class Logger {
constructor() {
this.printName = this.printName.bind(this);
}
// ...
}
解决方法2:使用箭头函数
class Obj {
constructor() {
this.getThis = () => this;
}
}
const myObj = new Obj();
myObj.getThis() === myObj // true
分析:箭头函数内部的this
总是指向定义时所在的对象。上面代码中,箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。这时,箭头函数所在的运行环境,肯定是实例对象,所以this
会总是指向实例对象