JavaScript面向对象——封装及相关原理解析

《JavaScript设计模式》面向对象编程——封装及相关原理解析

说明：本人编写js习惯不写分号；文章中的源码可根据自己的编程风格修改。

面向对象

    面向对象编程就是将你的需求抽象成一个对象，然后针对这个对象分析其特征（属性）与动作（方法），学过C++、Java等语言的伙伴应该比较好理解。

封装

1：创建一个类

方法：

    声明一个函数保存在一个变量里，风格上一般开头大写，然后在这个函数（类）的内部通过this（函数内部自带的一个变量，用于指向当前这个对象）变量添加属性或者方法来实现对类添加属性或者方法

    var College = function (id, name, address) {
        this.id = id
        this.name = name
        this.address = address
    }

这个类其实也可以写成function College ()，所以是有prototype属性的，也可通过原型prototype添加属性和方法。

    College.prototype.showInfo = function () {
        console.log('showInfo')
    }
    或者
    College.prototype = {
        showInfo: function () {
            console.log('showInfo')
        }
    }

使用：

    至今，我们已经把需要的方法和属性都封装到College类里边，使用时需要使用new关键字实例化（创建）新的对象，并通过该对象调用属性或者方法。

    var haida = new College(1, 'gdou', '广东省湛江市')
    console.log(haida.address)

运行结果：

问题：this添加的属性和方法与通过prototype添加的属性和方法有什么不同？

问题解答：每当我们new一个对象时，this添加的属性和方法都会重新创建一次；而通过prototype添加的方法不会重新创建，使用一个对象调用一个非this定义的属性或者函数时，需要通过原型来查找，比如：

    var haida = new College(1, 'gdou', '广东省湛江市')
    haida.showInfo()

最后之所以能打印出showInfo，是因为新创建的对象会包含__proto__属性，实行到haida.showInfo()时，this中没有这个方法的话，就会通过__proto__来查找，因为新创建的对象的__proto__指向的是类prototype所在的对象，而该方法正是定义在类的prototype上，所以haida.showInfo()其实也可以写成haida.__proto__.showInfo()，运行结果一样。

2：属性与方法的封装

JavaScript的面向对象中如何实现私有属性、公有属性、公有方法等？

举个例子：

    function College(id, name, address) {
        // 私有属性
        let num = 1
        // 私有方法
        function checkId() {}
        // 特权方法
        this.setName = function () {}
        this.getName = function () {}
        this.setAddress = function () {}
        this.getAddress = function () {}
        // 对象公有属性
        this.id = id
        // 对象公有方法
        this.copy = function () {}
        // 构造器
        this.setName(name)
        this.setAddress(address)
    }

解释：当使用new关键字创建一个对象时，由于对类执行一次，所以类的内部this上定义的属性和方法自然就可以复制到新建的对象上，成为对象公有的属性和方法；而其中一些方法能访问到类的私有属性和方法，所以成为特权方法。通过new关键字创建的对象实质上是对新对象this的不断赋值，并将新创建的对象的prototype指向类的prototype。

    // 类静态公有属性(对象不能访问)
    College.inChina = true
    // 类静态公有方法(对象不能访问)
    College.resetTime = function () {
        console.log('new Time')
    }
    College.prototype = {
        // 公有属性
        isHaida: false,
        // 公有方法
        display: function () {}
    }

类静态公有属性字可以通过类自身访问，比如：Console.log(College.inChina) // true

3：创建对象的安全模式

假设书写方式如下：

    var College = function (id, name, address) {
        this.id = id
        this.name = name
        this.address = address
    }
    var haida = College(1, 'haida', '广东省湛江市')

也就是实例化是忘了写new，会怎样？

console.log(haida.address)，发现会报undefined错误，再console.log(window.address)，发现会是'广东省湛江市'。

为什么呢？

答：new关键字的作用可以看做是当前对象的this不停地赋值，没有new的话，只相当于调用了College函数，函数中的this此时指向的是window，所以值都被赋到window对象上去了。

安全模式登场：（这次忘记写new也没问题了）

    var College = function (id, name, address) {
        // 检测this是否是当前这个对象(是的话证明是通过new创建的),不是的话重新创建一个
        if (this instanceof College) {
            this.id = id
            this.name = name
            this.address = address
        } else {
            return new College(id, name, address)
        }
    }

测试：

var haida = College(1, 'haida', '广东省湛江市')

console.log(haida.address)

再也不用担心粗心忘记new造成的问题。

水文完结。看场NBA压压惊(雷霆VS快船)#周六#