大部分前端开发是做一些交互处理，基本是面向过程的，一溜烟的写下去，但是在游戏开发和插件编写的时候是需要运用面向对象的思想实现的。接下来，就简单介绍一下ES5和ES6中面向对象的实现方法。

写在前面——声明函数function的方式、‘use strict’

声明函数function时有两种方式：

方式一：函数声明

function fn2 {}

函数声明是Google不推荐的写法，因为它会把function的作用域提升到所有的变量之前
即js一加载的时候就初始化function，不管你的function写在什么位置

这种函数声明在用条件判断function是否创造或者给function赋不同的执行体的时候是不可取的

方式二：函数表达式

var fn1 = function() {}

声明一个变量，将function赋给这个变量，必须在声明之后被调用。Google前端规范推荐使用函数表达式来声明函数

‘use strict’:

ES5如果不使用严格模式，会出现很多错误写法，这些写法会造成一些潜在的错误
ES6中默认使用严格模式，在ES6中使用就不需要加 'use strict'

ES5中的面向对象和继承

面向对象事例：

(function() {
    'use strict';
    var Class1 = function() {
        this.fun1 = function() {
            console.log('test1');
        }
    };
    Class1.prototype.fun2 = function() {
        console.log('test2');
    }
    new Class1().fun1() // test1
    new Class1().fun2() // test2
})();

继承事例：

(function() {
    'use strict';
    // 可以理解为，ES5的类其实就是一个构造方法，
    // 通过 new 关键字 就把构造方法复制了一个副本，并且赋予它新的值
    // 就是偷懒版的Java或者C#的类，它只有一个构造方法，并且就是它自己
    var Animal = function(name, age) {
        this.name = name;
        this.age = age;
        this.say1 = function() {
            console.log('say1' + this.name + '  ' + this.age);
        }
    };
    // 直接给原型链赋值
    Animal.prototype.say2 = function() {
        console.log('say2' + this.name + '  ' + this.age);
    };

    var cat = new Animal('小猫', 3);
    cat.say1(); // 输出 say1小猫  3
    cat.say2(); // 输出 say2小猫  3

    // Javascript中国际公认也是真正靠谱的继承方式：寄生组合继承
    // call() apply() 定义：调用一个对象的一个方法，用另一个对象替换当前对象

    Animal.prototype.say2.apply(cat); // 输出 say2小猫  3
    // 也可以使用call Animal.prototype.say1.call(cat);
    var params = {
        name: '小猫2',
        age: 4
    };
    
    cat.say2.call(params); // 输出 say2小猫2  4

    // 寄生组合继承
    var Cat = function(name, age) {
        // Animal.apply(this, arguments); // arguments是一个全局对象，代表了一个数组
        Animal.apply(this, [name, age]);
        // Animal.call(this, name, age); // apply和call传值不一样
    };
    // 浅克隆 创建了Animal对象赋值给Cat的原型链中；属于寄生组合继承
    // Object.create()是一种浅克隆的方式，相当于New，但是跟New不一样，是进行了一次浅克隆
    // 区分 Cat.prototype = new Animal(); 属于组合继承
    Cat.prototype = Object.create(Animal.prototype);
    
    Cat.prototype.say1 = function() {
        var p = {
            name: '父类名字',
            age: 10
        };
        Animal.prototype.say1.apply(p);
        console.log('这是子类的名字' + this.name + this.age);
    };

    var cat1 = new Cat('子猫', 5);
    cat1.say1(); // 输出 say1子猫  5
})();

ES6中的面向对象和继承

面向对象事例：

class ClassTest {
    constructor() {
        console.log('test');
    }
    fun1() {
        console.log('fun1');
    }
    static fun2() { // 使用static静态方法
        console.log('fun2');
    }
}
new ClassTest(); // test
new ClassTest().fun1(); // test // fun1
ClassTest.fun2(); // fun2

继承事例：

class Animal {
    constructor(name = '无姓名', age = 0) {
        this.name = name;
        this.age = age;
    }

    say() {
        console.log('这是父类的say' + this.name + this.age);
    }
}
// Cat 继承 Animal
class Cat extends Animal {
    constructor(name, age) {
        super(name, age);
    }

    say() { // 子类say覆盖父类say 默认调用子类say，加上super关键字可以执行父类say
        super.say(); // 调用父类的方法
        console.log('这是子类的say' + this.name + this.age);
    }
}

const cat = new Cat('小猫', 2);
cat.say(); // 输出 这是父类的say小猫2 // 输出 这是子类的say小猫2

总结

ES6的class就是语法糖而已，ES6的class的本质还是原型继承，理解JavaScript的原型继承，才能hold住ES6的class实现
ES6中除了几个核心特性外，其他的几乎都是语法糖
ES6只是在帮你更方便的编程，JS基础很重要，只有把ES5弄懂，什么ES6和ES7，只不过是强化版的语法而已
也推荐用ES6写代码，通过Babel那样的转译工具转译成ES5代码，Babel转译出的代码几乎是ES5的最佳实践，充分考虑了最佳性能和最佳执行

概述ES5和ES6中面向对象的实现方法

写在前面——声明函数function的方式、‘use strict’

ES5中的面向对象和继承

ES6中的面向对象和继承

总结

猜你喜欢