27-第二十七章 面向对象 OOP 继承(二)

一、对象 与 函数的关系

1、Object 函数是 Function 的一个实例

        Object.constructor  == Function  // true

2、 函数即是 Function 的实例，也是 Object 的实例

        function fn(){}
        fn.constructor  == Function  // true
        fn.constructor  == Object    // false 

3、{} 与 Object 的关系

        var obj = {};
        obj.constructor  === Object   // true

总结，对象是由函数构造出来的

二、原型链

原型链：当前原型上没有去上一层原型上找
obj.prototype.isPrototypeOf( fn.prototype )
// fn.prototype 是否继承自 obj.prototype

        function fn(){}
        var  obj = new fn();
        Object.prototype.isPrototypeOf( fn.prototype ) //  true
        Function.prototype.isPrototypeOf( Object.prototype ) // true

三、 对象继承

在上面例子中 可以发现,给对象的 constructor.prototype 添加方法属性 对象就会继承 如果要实现一个对象继承其他对象我们这样做

一 、利用 call() 及 for in 继承

        function inherit() {
            fn.call(obj3, '旺财');
            for (key in fn.prototype) {
                if (!obj3[key]) {
                    obj3[key] = fn.prototype[key];
                }
            }
        }
        
        function inherit(constructor, obj, ownAttr) {
            constructor.call(obj3, ownAttr);
            for (key in constructor.prototype) {
                if (!obj[key]) {
                    obj[key] = constructor.prototype[key];
                }
            }
        }   

二、 构造函数实例方式继承

1、 利用obj.constructor.prototype 继承对象 自身属性及 继承属性

        function fn(name) {
            this.name = name;
        }
        fn.prototype.index = '88';
        function fn2(age) {
            this.age = age;
        }
        fn2.prototype = new fn('旺财');
        var obj2 = new fn2(66);
        console.log(obj2.name); // 旺财
        console.log(obj2.index); // 88
        console.log(obj2.age); // 88    

2、 利用 prototype 继承对象 自身属性及 继承属性

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

        fn.prototype.index = '88';

        function fn2(age) {
            this.age = age;
        }

        var obj = new fn('二狗');

        fn.prototype = Object.create(fn.prototype);
        
        console.log(obj2.name);//二狗
        console.log(obj2.index);//88

在上面例子中 可以发现,给对象的 constructor.prototype 添加方法属性 对象就会继承 如果要实现一个对象继承其他对象我们这样做

三、obj.constructor.prototype 与 对象 obj.__proto__ 的关系 ,带__为非标准属性

        function fn(name) {
            this.name = name;
        }
        var obj = new fn('二狗');
        console.log(obj.__proto__ === fn.prototype) // true，    

四、 对象继承对象

        // 父类模板
        function Father(obj) {
            this.name = obj.name,
            this.age = obj.age
            this.eat = obj.eat
        }

        // 父类原型
        Father.prototype = {
            constructor : Father,
            add(){
                console.log(this.name);
            }
        }

        // 子类继承父类
        function Son(obj) {
            // 指向自己类生成的实例对象，继承父类私有属性
            Father.call(this, obj);
        }

        // 第一种继承 引用值类型，内存地址相同，继承原型
        // son.prototype = Father.prototype;

        // 第二种继承 继承原型 和 私有属性
        // Son.prototype = new Father({});

        // 第三种继承 
        function middle() {}; // 中间商
        middle.prototype = Father.prototype; // 继承原型
        Son.prototype = new middle(); // 过滤私有属性

        // 第四种继承 for in 遍历 只拷贝一层 不会遍历原型链
        // for (var key in Father.prototype) {
        //     Son.prototype[key] = Father.prototype[key];
        // }
        
        // 子类原型
        Son.prototype = {
            constructor : Son,
            add(){
                console.log(this.name);
            }
        }

        // 实例对象       
        const boss = new Father({
            "name" : '帅逼',
            "age" : '18',
            'eat' : '豆豆'
        });
        
        // 实例对象
        const small = new Son({
            "name" : '大帅逼',
            "age" : '130'
        });

        // console.log(boss);
        // console.log(small);
        // console.log(boss.name, boss.age, boss.eat);
        // console.log(small.name, small.age, small.eat);

案例：用面向对象改写 限制范围拖拽
案例：用面向对象改写 自动轮播