5. 面向对象编程
5.1 ES5面向对象编程
a. 构造函数
var Vehicle = function () {
this.price = 1000;
};
构造函数就是一个普通的函数,但是有自己的特征和用法****:
- 构造函数名字的第一个字母通常大写
- 函数体内部使用了this关键字,代表了所要生成的对象实例。
- 构造函数不可以有返回值
- 生成对象的时候,必须使用new命令。
var v = new Vehicle();
v.price // 1000
b. this使用场景
(1)全局环境
全局环境使用this,它指的就是顶层对象window。
(2)构造函数
构造函数中的this,指的是实例对象。
(3)对象的方法
对象方法中使用this非常乱,初学者不建议使用
c. 继承
JavaScript 语言的继承是通过“原型对象”(prototype)实现的
function Animal(name) {
[this.name](http://this.name/) = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // ‘white'
JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。也就是说,如果属性和方法定义在原型上,那么所有实例对象就能共享,不仅节省了内存,还体现了实例对象之间的联系
构造函数Animal的prototype属性,就是实例对象cat1和cat2的原型对象。原型对象上添加一个color属性,结果,实例对象都共享了该属性
JS关于原型和继承有无数种写法,我们尽量统一使用如下方法
继承示例:
//父类
function Shape() {
this.x = 0;
this.y = 0;
}
Shape.prototype.move = function (x, y) {
this.x += x;
this.y += y;
[console.info](http://console.info/)('Shape moved.');
};
//子类继承
// 第一步,子类继承父类的实例
function Rectangle() {
Shape.call(this); // 调用父类构造函数
}
// 第二步,子类继承父类的原型
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
使用:
var rect = new Rectangle();
rect.move(1, 1) // 'Shape moved.'
rect instanceof Rectangle // true
rect instanceof Shape // true
5.2 ES6面向对象编程
a. Class
//定义类
class Point {
myProp = 42;
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
b. 静态方法与继承:
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod() + ', too';
}
}
Bar.classMethod() // "hello, too"