CoffeeScript—面向对象

概述

自从面向对象的编程思想出现以来，这个概念已经被炒烂了，只要编程开发大家都会拿面向对象来说事，好像只要跟面向对象沾边就会显得逼格很高一样，不过确实逼格提高了。要知道，面向对象只是一种手段，最终目的是为了提高我们项目的重用性、灵活性和扩展性。

为了迎合面向对象的程序设计思想，JavaScript也通过自己的语法实现了自己的一套面向对象机制。不过我想问下，前端开发当中有多少人使用过面向对象当中的继承？

JavaScript面向对象的实现确实有点不伦不类的感觉。下面先简单说明下JavaScript当中面向对象的实现，涉及的东西比较深，要对constructor、prototype有一定的理解，不然看起来会很吃力，或者你也可以跳开这部分内容，直接看CoffeeScript面向对象的实现。

JavaScript面向对象编程

类

JavaScript的实现一个类，可以采用下面的方式：

function Animal(name) {
    this.name = name;
}

Animal.prototype.printName = function () {
    console.log(this.name);
};

var animal = new Animal('animal');

animal.printName();

C++、Java...某些程序员可能就吐槽了，我TM都连个关键字class都没看到，这就是类了？

图片描述

作为一个前端开发，我竟无言以对。。。

继承

选取JavaScript当中几种继承方式，作一个简单的说明，想要学习更深的内容，请通过搜索引擎吧。

对象冒充

function Animal(name) {
    this.name = name;

    this.printName = function () {
        console.log(this.name);
    };
}


function Cat(name) {
    this.inherit = Animal;
    this.inherit(name);

    //Animal.call(this, name);
    //Animal.apply(this, [name]);
}

var cat = new Cat('cat');

cat.printName();//cat

注释是通过call和apply实现的方式，其实本质是一样的。继承实现了，闲着无聊，我们来打印下：


console.log(cat instanceof Animal);//false

这次别说后端开发看不下去，我都忍不了了。这种方式只能说是通过JavaScript的语法机制，模拟实现继承，看起来好像是那么回事，不然怎么叫对象冒充呢。

原型链实现

function Animal(name) {
    this.name = name;
}

Animal.prototype.printName = function () {
    console.log(this.name);
};

function Cat() {
}

Cat.prototype = new Animal('cat');

var cat = new Cat();

cat.printName();//cat

打印：

console.log(cat instanceof Animal);//true

这次对了，cat也是Animal类的实例了，有点面向对象的的意思了。我又闲着无聊了（约么？），再来打印


console.log(cat.constructor); //[Function: Animal]

咦，又不对了，为啥cat的constructor指向Animal，不应该指向Cat么？

问题出在Cat.prototype = new Animal('cat')上，直接给prototype赋值，改变了constructor的指向，这个时候，我们还要做个处理

function Animal(name) {
    this.name = name;
}

Animal.prototype.printName = function () {
    console.log(this.name);
};

function Cat() {
}

Cat.prototype = new Animal('cat');
Cat.prototype.constructor = Cat;

var cat = new Cat();


console.log(cat.constructor); //[Function: Cat]

但是又有人吐槽了，new Cat()为啥把名称放到new Animal()里面，看起来太奇怪了，综合一下就有了第三中——混合型。

实际上instanceof的判断原理是跟原型链是相关的。大家自行脑洞！

混合实现

function Animal(name) {
    this.name = name;
}

Animal.prototype.printName = function () {
    console.log(this.name);
};

function Cat(name) {
    Animal.call(this, name);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat = new Cat('cat');

cat.printName();//cat

看起来舒服点了，也就是舒服那么一点点。

多态

直接拿混合型的继承来说明了，这个比较简单

function Animal(name) {
    this.name = name;
}

Animal.prototype.printName = function () {
    console.log(this.name);
};

function Cat(name) {
    Animal.call(this, name);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

Cat.prototype.printName = function () {
    console.log('The name is:' + this.name);
};

var cat = new Cat('cat');
cat.printName();//The name is:cat