520 面向对象的方法

## 面向对象的语法
1. 面向对象思维的实现方式
2. 创建对象
    - ...
3. 工厂模式创建对象
    - 自定义工厂模式，放弃，自己封装对象，返回对象
        ```js
        function fn(n){
            var obj = {};
            obj.name = n;
            return obj;
        }
        var o = fn("admin");
        ```
    - 内置的工厂模式(自定义的构造函数)，推荐，new执行函数
        ```js
        function Fn(n){
            // 自动创建的对象：通过this拿到
            this.name = n;
        }
        var o = new Fn("root");
        ```
4. 构造函数的缺陷
    ```js
    function Fn(n){
        // 自动创建的对象：通过this拿到
        this.name = n;
        this.show = function(){
            console.log(this.name)
        }
    }
    var o1 = new Fn("admin");
    var o2 = new Fn("root");
    console.log(o1.show === o2.show);       // f
    ```
    - 以上代码，会在内存中产生大量的冗余功能(show)
    - 解决方式：不把show写给每个具体的对象(实例)，写给父级数据
        - 有技术短板
            - 学习原型

5. 原型
    - 原型是一种概念
        - 在js中所有的对象（O），都一个内置属性：`__proto__`
            - 是个指针，用来指向当前对象（O）的父级数据，必然是对象
        - 在除了箭头函数之外的任何函数（F）身上，都有一个默认属性：`prototype`
            - 是个对象类型的属性，用来作为当前函数（F）被new执行后，创建出来的对象，做父级对象使用
            - 被new创建出来的对象的`__proto__`，被强行指向了new的函数的`prototype`
    - 对象读取属性的原则
        - 向上查找：顺着自身的`__proto__`属性，查找，找到了就使用，没找到，继续向上，到头还没找到，就抛出`undefined`，相当于报错

    - 目前，就可以解决，之前方法冗余的问题：
        ```js
        function Fn(n){
            // 自动创建的对象：通过this拿到
            this.name = n;
        }
        Fn.prototype.show = function(){
            console.log(this.name)
            // this=======实例
            var that = this;
            obox.onclick = function(){
                // this======当前函数的执行对象obox
                // that======实例
            }
        }
        var o1 = new Fn("admin");
        var o2 = new Fn("root");
        console.log(o1.show === o2.show);       // t
        ```
    - 小提示：
        - 在构造函数中的this，原型上方法中的this，都是将来的实例
        - 如果在构造函数或原型上方法中，出现了新的函数，注意其内部this指向的改变

6. 应用技巧
    - 并不是熟练了语法，就会面向对象编程
    - 但是如果this不熟练，不清楚this的指向，必然做不了面向对象编程
    - 当然，必须得先有面向对象的思维方式
    - 面向对象三大特点之一：封装
        - 封装：只要某个功能可以作为独立运行的模块，将来有可能被重复调用，就可以封装，封装成方法
    - 属性写在构造函数内，方法写在原型上

7. 作业
- 面向对象的轮播图

# 面向对象的应用
1. 左右按钮的无缝轮播

# ES6新增的class语法
```js
class Tab{
    constructor(n){
        // 相当于老语法的构造函数部分
        this.name = n;
    }
    // 以下方法都 相当于 被绑定到构造函数的原型对象上
    show(){
        console.log(this.name)
    }
}
var t = new Tab("root");
console.log(t)
t.show();
```