ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化

本文链接：https://blog.csdn.net/weixin_43503511/article/details/116971680

继承深入

这两种方式继承不够合理（为什么）

将实例作为子类的原型
在子类的构造函数内部借用父类的构造函数
将父类的原型作为子类的原型（会修改父类的原型）

css圣杯布局（左右宽度固定、中间自适应）

目标效果
左中右div左浮动、相对定位（一行显示，宽度由内容撑开）
中间宽度100%：铺满整行
左left设置为自己宽度的负值
中间上移
给main（外部容器）加padding
右加负左外边距，右上移至同行，中、右重叠
右设置left
中间内容增加时
给左中右设置很大的下内外边距
main清除浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 50px;
        }

        .wrap {
            border: 1px solid #000;
            width: 80%;
        }

        .top,
        .foot {
            height: 50px;
            background-color: pink;
        }

        .main {
            padding: 0 50px;
            overflow: hidden;
        }

        .main .left,
        .main .content,
        .main .right {
            float: left;
            position: relative;
            background-color: cornflowerblue;
            width: 50px;
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }

        .main .content {
            background-color: crimson;
            width: 100%;
            margin-left: -50px;

        }

        .main .left {
            left: -50px;
        }

        .main .right {
            margin-left: -50px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="top"></div>
        <div class="main">
            <div class="left">123</div>
            <div class="content">456<br>556</div>
            <div class="right">789</div>
        </div>
        <div class="foot"></div>
    </div>

    <script type="text/javascript">
    </script>
</body>

</html>

JS圣杯模式

用buffer实例来隔绝父构造函数的原型和子构造函数的实例

在这里插入图片描述

封装

在这里插入图片描述

自执行函数里隔绝作用域

var inherit = (function () {
    function Buffer() { }
    function inherit(Target, Origin) {
        Buffer.prototype = Origin.prototype
        Target.prototype = new Buffer()
        Target.prototype.constructor = Target
        Target.prototype.super_class = Origin
    }
    return inherit
})();
function Teacher() {
    this.tName = 't'
}
function Student() {
    this.sName = 's'
}
inherit(Student,Teacher)
console.log(new Student())

在这里插入图片描述

var inherit = (function () {
    function Buffer() { }
    function inherit(Target, Origin) {
        Buffer.prototype = Origin.prototype
        Target.prototype = new Buffer()
        Target.prototype.constructor = Target
        Target.prototype.super_class = Origin
    }
    return inherit
})();
var Common = function () {}
// 继承父类原型上的属性和方法 实例中的属性和方法则不继承
Common.prototype = {
    time: '8小时',
    range: '周一至周五'
}
Common.prototype.printFn = function () {
    console.log(this.name + ":每天工作" + this.time + ',工作时间' + this.range)
}
var Worker = function (name) {
    this.name = name
}
inherit(Worker, Common)
var p1 = new Worker('桐壶更衣')
console.log(p1)
var p2 = new Worker('紫姬')
p1.printFn()
p2.printFn()

用于多人协作开发、模块化开发，有自己的命名空间，作用域和外界隔离了。在多人协作时，能防止全局污染。

模块化开发、初始自执行

创造独立作用域空间
将函数保存在GO、随时调用

window.onload = function () {
    init()
}
function init() {
    console.log(initFb(10))
    console.log(initDiv(100))
}
// 协同开发
var initFb = (function () {
    function fb(n) {
        if (n <= 0) {
            return 0
        } else if (n <= 2) {
            return 1
        } else {
            return fb(n - 1) + fb(n - 2)
        }
    }
    return fb
})();
var initDiv = (function () {
    function div(n) {
        var arr = []
        for (var i = 0; i <= n; i++) {
            if (i % 3 == 0 || i % 5 == 0 || i % 7 == 0) {
                arr.push(i)
            }
        }
        return arr
    }
    return div
})();