对象继承深入、call_apply、圣杯模式、构造函数和闭包，企业模块化

来源：cnblogs　　作者：麻花的野望　　时间：2021/4/6 10:09:19　　对本文有异议

一个实现加减乘除的插件：

原型其实是在构造函数之上的，构造函数变成实例化函数的时候才会有原型，

原型实际上是构造函数的一个属性

原型无非就是2个字：继承

原型中继承父类所有方法是很不合理的，因为没有实际的必要

针对call、apply方法都只是借用指定函数的一个借用this的指向，而不会继承指定函数的原型

下面的优化是针对Student.prototype()=Teacher.prototype,这样就不会继承Teacher的方法，并能使用Teacher.prototype的属性与方法：

但这就形成了公共的原型更加不合理了

圣杯模式：

企业级解决继承的方法：中间的空对象的prototype指向我们需要的xxx.prototype，使用中间的空对象来进行变换值不会让xxx.prototype的值进行变换

CSS中也有圣杯模式、双飞翼

圣杯布局：

HTML：

CSS:

<style>
//清除浮动 在main里面添加进去
.clearfix::after{
 content:"";
 display:table;
 clear:both;
}
.wrap{
width:700px;
margin:0 auto;
}
.top ,.foot{
    height:50px;
    background-color:#000;
 }
.main {
    padding:0 100px;
overflow:hidden;
}
.main .left ,
.main .right{
background-color:green;
}
.main .left ,
.main .content,
.main .right{
float:left;
positin:releative;
background-color:green:
margin-bottom:-2000px;
padding-bottom:2000px;
}
.main .left{
width:100px;
}
.main .content{
wdith:100%;
margin-left:-100;
background-color:red;
}
.main .right{
 left:100px;   
 width:100px;
 margin-left:-100px;
}
</style>

效果：中间谁占的高，旁边的也会升高。

圣杯的布局方式：主要逻辑是通过赋值在进行布局

进行圣杯模式的一个封装:

刚开始：

封装后：（super_class超级继承源）

对于闭包形成的私有变量的一个定义：如下面num只能通过add来去访问，那么num就是add方法的私有变量

函数的闭包：

构造函数的闭包：

这里如果return原始值没有影响的，但是不能返回一个啥数组，对象，针对的是原始值是没有影响的，如果是引用值的化就会报错

将圣杯模式用闭包来实现：

将其封装成一个立即执行函数：（曾经雅虎在yos3实现的一个方法）

这样是模块化开发的一种形式，多人开发是这样做的

一个很牛逼的案例：

企业级的圣杯模式的具体代码：

      var inhert = (function () {
        var Buffer = function () {}
        return function (Target, Orgin) {
          Buffer.prototype = Orgin.prototype
          Target.prototype = new Buffer()
          Target.prototype.constructor = Target
          Target.prototype.sup_class = Orgin
        }
      })()
      var InitProgrammer = (function () {
        var Programmer = function () {}
        Programmer.prototype = {
          name: '程序',
          tool: '计算机',
          work: '编写应用程序',
          duration: '10个小时',
          say: function () {
            console.log(
              '我是一名' +
                this.myName +
                this.name +
                ',我的工作是用' +
                this.tool +
                this.work +
                ',我每天工作' +
                this.duration +
                ',我工作需要用到' +
                this.lang.toString() +
                '。'
            )
          },
        }
        var FrontEnd = function () {}
        var BackEnd = function () {}
        inhert(FrontEnd, Programmer)
        inhert(BackEnd, Programmer)
        FrontEnd.prototype.lang = ['HTML', 'CSS', 'JavaScript']
        FrontEnd.prototype.myName = '前端'
        BackEnd.prototype.lang = ['NODE', 'java', 'Python']
        BackEnd.prototype.myName = '后端'
 
        return {
          FrontEnd,
          BackEnd,
        }
      })()
      var frontEnd = new InitProgrammer.FrontEnd()
      var backEnd = new InitProgrammer.BackEnd()
      frontEnd.say()
      backEnd.say()

企业级的协同开发：

模块化开发：

  //模块化开发
 
      //这样是按需执行
      window.onload = function () {
        init()
      }
      function init() {
        initCompute()
        initFunctions()
      }
      var initCompute = (function () {
        var a = 1,
          b = 2
        function add() {
          console.log(a + b)
        }
        function minus() {
          console.log(a - b)
        }
        function mul() {
          console.log(a * b)
        }
        function div() {
          console.log(a / b)
        }
        return function () {
          add(), minus(), num()
        }
      })()
      var initFunctions = (function () {})()

插件化开发：

      //   插件化开发
      ;(function () {
        var Silder = function (opt) {}
        Slider.prototype = {}
        window.Slider = Slider
      })()
      var slider = new Slider({})