JS中的面向对象

最近在复习JS基础，对于JS中的面向对象写法在此总结一下。

第一种：TS写法（ES6写法）

这种写法是在做项目里经常遇到的。特别是最近我参与的一个NG4的项目，全程TS，爽的不要不要的。

• 先声明一个Car类(为了保证在ES6环境也可以运行，我没写TS的类型注解)

//ES6，使用传统的类、继承、多态和构造函数
class Car {
    constructor(name) {
        this.name = name;
        this.gear = 0;
        this.speed = 0;
    }

    drive() {
        clearInterval(this.driving);
        this.gear++;
        this.driving = setInterval(() => {
            this.speed += this.gear * 10;
            console.log(`老司机的${this.name}车速到了${this.speed}`);
            if (this.speed >= 200) {
                this.stop();
            }
        }, 100);
    }

    stop() {
        console.log("翻车了！");
        this.gear = 0;
        clearInterval(this.driving);
    }
}
let car = new Car("五菱宏光");
car.drive();

• 这种风格和后端语言的风格非常接近，构造函数+自有方法。
• 里面使用的模板字符串和箭头函数都是ES6的新特性，有兴趣的可以去看文档。
• 接下来我们声明一个YunNanCar类,并实例化它。

class YunNanCar extends Car {
    constructor(name, personName) {
        super(name);
        this.personName = personName;
    }

    drive() {
        clearInterval(this.driving);
        this.gear++;
        this.driving = setInterval(() => {
            this.speed += this.gear * 10;
            console.log(`${this.personName}的${this.name}车速到了${this.speed}`);
            if (this.speed >= 300) {
                this.stop();
            }
        }, 100);
    }
}
let kunmingCar = new YunNanCar("昆明车", "樛木");
kunmingCar.drive();

• 运行代码，毫无违和感。

第二种：ES5写法

第二种就是传统的ES5实现OOP，高级程序设计那本书推崇的方法。

//ES5，(高级程序设计书)使用原型链+构造函数
function Car(name) {
    this.name = name;
    this.gear = 0;
    this.speed = 0;
}
Car.prototype.drive = function () {
    clearInterval(this.driving);
    this.gear++;
    this.driving = setInterval(function () {
        //这里可以用self,但是不好
        this.speed += this.gear * 10;
        console.log("老司机的" + this.name + "车速到了" + this.speed);
        if (this.speed >= 200) {
            this.stop();
        }
    }.bind(this), 100);
};
Car.prototype.stop = function () {
    console.log("翻车了！");
    this.gear = 0;
    clearInterval(this.driving);
};
// var car = new Car("五菱宏光");
// car.drive();
function YunNanCar(name, personName) {
    //继承
    Car.call(this, name);
    this.personName = personName;
}
YunNanCar.prototype = Object.create(Car.prototype);
// 高程上的，会有意想不到的bug
// YunNanCar.prototype = new Car();
// YunNanCar.prototype.constructor = Car;
YunNanCar.prototype.drive = function () {
    clearInterval(this.driving);
    this.gear++;
    this.driving = setInterval(function () {
        //这里可以用self,但是不好
        this.speed += this.gear * 10;
        console.log(this.personName + this.name + "车速到了" + this.speed);
        if (this.speed >= 300) {
            this.stop();
        }
    }.bind(this), 100);
}
var kunmingCar = new YunNanCar("昆明车", "樛木");
kunmingCar.drive();

• 这是前端们在艰难探索后找到的模仿传统类式OOP的方法，构造+原型链方法。
• 和属性有关的用构造，和方法有关的添在原型上。目的是防止只用构造函数的时候不能复用函数，和只用原型链的时候会共享引用类型属性。
• 没有箭头函数的时候，this会有问题，优雅的方法是采用bind强绑定，还有一种方法是使用self变量存放this。
• 在设置原型链关联的时候，我没有使用高程的用法，原来需要指定YunNanCar的prototype为Car的实例，还要指定YunNanCar的prototype的constructor为Car，但其一那样关联原型链如果Car出了事YunNanCar也会跟着倒霉，其二是constructor根本不靠谱。所以使用更加靠谱的Object.create，如果要兼容旧式浏览器，就写段Polyfill代码。

第三种：纯面向对象写法

第三种方法是为JS量身定做的，和传统的OOP思想完全不一样，没有类，也没有继承，这种模式里没有父类，子类继承父类的概念。只有对象之间互相关联的关系。
比如说，传统OOP：我要一辆车，肯定是从车的基类继承，我要滑板鞋 肯定是从鞋的基类继承。
而行为委托根本不需要基类，在只有车和滑板鞋的情况下，滑板鞋也想飙车怎么办？于是滑板鞋和云南车关联起来，借用它的drive方法就可以了。

//JS中的纯面向对象,这里的三个方法可以分开写(ES5语法)比如init:function(name){..}
let Car = {
    init(name) {
        this.name = name;
        this.gear = 0;
        this.speed = 0;
    },
    drive() {
        clearInterval(this.driving);
        this.gear++;
        this.driving = setInterval(() => {
            this.speed += this.gear * 10;
            console.log(`老司机的${this.name}车速到了${this.speed}`);
            if (this.speed >= 200) {
                this.stop();
            }
        }, 100);
    },
    stop() {
        console.log("翻车了！");
        this.gear = 0;
        clearInterval(this.driving);
    }
}
let Shoe = Object.create(Car);
Shoe.product = function (name, personName) {
    this.init(name);
    this.personName = personName;
}
//独特的飙车方法
Shoe.racing = function () {
    clearInterval(this.driving);
    this.gear++;
    this.driving = setInterval(() => {
        this.speed += this.gear * 10;
        console.log(`${this.personName}的${this.name}滑板鞋速度到了${this.speed}`);
        if (this.speed >= 300) {
            this.stop();
        }
    }, 100);
}
let kunmingShoe = Object.create(Shoe);
kunmingShoe.product("滑板鞋", "樛木");
kunmingShoe.racing();

• 这里我为了节省力气用了es6语法,es5语法使用传统的方法声明就好了,像init:function(name){..}这样。
• Car对象里面有三个方法。是特有的。
• 让滑板鞋关联这个车，接着给滑板鞋对象添加两个方法。
• produce和racing方法和车毛关系都没有，但是它们的实现借用了车的三个方法，所以达到了滑板鞋也能飙车的目的。