zoukankan      html  css  js  c++  java
  • 08-五种继承

    1. 混入式继承 -- extend  拷贝

    2. 原型链继承   原型替换  constructor

    3. 混入+原形链继承
    4. 经典继承 :Object.create()  传入的作为新创建出来对象的原型。新创建的对象继承了传入的
    5. 用call/apply 改变this让成为自己,继承别人的属性

    1.混入继承

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
        <script>
            // 继承
    
            // 面向对象三大特征:
            //     1. 封装  render move
            //     2. 继承:在js中,指的是对象与对象之间的关系。一个对象没有的成员,另外一个对象有,拿过来直接使用就实现了继承。
            //     3. 多态
    
            var dacongge = {
                skill: "liaomei",
                car: "法拉利",
                moeny: 10000000,
                house: "蒙古海景房",
            }
    
            var lianjie = {
                son: "二狗子",
            }
    
            // lianjie ==> Object.prototype ==> null;
    
            var xm = {
                name: "小明"
            }
    
    
            // 第一种继承方式: 混入式继承: 拷贝一个对象的属性(成员)
            // xm.skill = dacongge.skill;
            // xm.car = dacongge.car;
            // xm.moeny = dacongge.moeny;
    
            // 上面的写法比较麻烦,直接遍历dacongge,给xm添加即可
    
            /*for(var k in dacongge){
                xm[k] = dacongge[k];
            }
    
            for(var k in lianjie){
                xm[k] = lianjie[k];
            }*/
    
            Object.prototype.gender = "male";
    
            // 把上面的代码直接封装作为xm的一个方法
            // extend 拓展
            xm.extend = function (obj) {
                for(var k in obj){
                    // 把obj对象自身的成员添加给this即可
                    if(obj.hasOwnProperty(k)){
                        // k 是对象自己本身的
                        this[k] = obj[k];
                    }
                }
            }
    
            xm.extend(dacongge);
            xm.extend(lianjie);
    
            console.log(xm);
        </script>
    </body>
    </html>

     2.原形链继承:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script>
            // 原型链继承
    
            function Person(){
    
            }
    
            // 原型对象
            /*Person.prototype.color = "lime";
            Person.prototype.sayHi = function () {
                console.log("sayHi");
            }
            Person.prototype.render = function () {
                console.log("render");
            }
            Person.prototype.move = function () {
                console.log("move");
            }*/
            // ....
    
    
            // 上面给原型添加的成员,实例对象p都可以访问到,但是写法麻烦 -- 优化
            // 原型替换
            //  造成一个问题: constructor 属性丢失
            //  解决办法: 就是手动添加constructor 属性
            /*Person.prototype = {
                constructor: Person,
    
                color : "lime",
                sayHi : function () {
                    console.log("sayHi");
                },
                render : function () {
                    console.log("render");
                },
                move : function () {
                    console.log("move");
                }
            }*/
    
            // 实例对象
            var p = new Person();
    
            // 实例对象可以直接访问原型对象上的所有成员 --- 原型链继承
            // console.log(p.color);
            // p.sayHi();
    
            // p的原型链:
    
            // 没有原型替换的原型链:
            //     p ==> Person.prototype(默认的原型对象{constructor: Person}) ==> Object.prototype ==> null
    
            // 原型替换后的原型链:
            //     p ==> Person.prototype(新的对象) ==> Object.prototype ==> null
                                                     // constructor  ==> Object
    
            // 原型替换后,constructor 属性访问得到的结果是 Object,原因是因为 替换后的原型对象上没有constructor属性。
            console.log(p.constructor); // Object
    
    
            // 小结:
            //     原型链继承:
            //         写法有两种:
                //  给原型对象添加属性
                //  原型替换, 把一个新的对象赋值给原型对象
                //      问题: constructor 属性丢失了
                //      办法: 手动添加constructor属性
    
        </script>
    </body>
    </html>

    3.原型继承+混入继承:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <script>
    
            // 需求: 让Person所有的实例对象可以访问到lw  dacongge的成员
    
            function Person(){
    
            }
    
    
            // 混入 + 原型链继承
            // 思路: 把lw dacongge的成员添加到Person的原型上,所有的实例对象都可以继承到原型上.
    
    
            // 混入式继承
            Person.prototype.extend = function (obj) {
                for(var k in obj){
                    if(obj.hasOwnProperty(k)){
                        this[k] = obj[k];
                    }
                }
            }
    
            var p = new Person();
    
            var lw = {
                skill: "FQ",
                handsome: "very handsome",
                healthy: "都说好"
            }
    
            var dacongge = {
                money: 10000000,
                house: "新疆海景房"
            }
    
            // 原型上就有了lw的成员
            Person.prototype.extend(lw);
            Person.prototype.extend(dacongge);
            // console.log(Person.prototype);
    
            // 原型链继承
            console.log(p.handsome);
            console.log(p.house);
    
        </script>
    </body>
    </html>

    4. 经典继承:

    就是用一个方法创建了一个空对象(下图中的对象o),这个空对象把传入create()的那个对象作为了自己的原型。那么就自然可以调用传入对象上的“自己原型”)属性和方法(当成自己的了)

     


     5.借用构造函数继承:

     

     

     

     

     

  • 相关阅读:
    图的广度优先搜索
    图的深度遍历
    图的邻接表的实现
    求1+2!+3!+...+20!的和。
    CSS用户界面样式
    CSS三角
    CSS字体图标技术
    CSS精灵技术
    CSS元素的显示和隐藏
    CSS定位
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14563464.html
Copyright © 2011-2022 走看看