12-继承深入、call/apply、圣杯模式、模块化

最新推荐文章于 2024-08-18 10:54:05 发布

valueyear

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量111

点赞数

分类专栏： ECMAScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43714814/article/details/121768230

版权

ECMAScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

(一)、继承深入

原型链继承

Professor.prototype = {
  name: 'Mr. Zhang',
  tSkill: 'JAVA'
}
function Professor(){}

var professor = new Professor();

Teacher.prototype = professor;
function Teacher(){
    this.name = 'Mr. Wang';
    this.mSkill = 'JS/JQ';
}

var teacher = new Teacher();

console.log(teacher);

声明了Professor这个构造函数，这个构造函数上的原型上加了name属性和tSkill属性

实例化一个professor对象，这个professor对象可以访问到原型，

将professor对象给了Teacher.prototype的时候也就把professor的原型也给了Teacher.prototype

Teacher.prototype这个原型里面除了Professor的原型外什么都没有，因为Professor这个构造函数里没有属性和方法。

Student.prototype = teacher;
function Student(){
  this.name = 'Mr. Li';
  this.pSkill = 'HTML/CSS';
}
var student = new Student();

console.log(student);

(二)、apply

这种写法不是继承，是借用，当需要用到别人的属性和方法时可以这样写

Teacher.prototype.wife = 'Ms. Liu';

function Teacher(name, mSkill){
    this.name = name;
    this.mSkill = mSkill;
}
function Student(name,mSkill,age,major){
  Teacher.apply(this,[name,mSkill]);
  this.age = age;
  this.major = major;
}
var student = new Student(
  'Mr. Zhang', 'JS/JQ', 18, 'Computer'
);

console.log(student.wife);//访问不到teacher的原型prototype

(三)、圣杯模式

1、认识圣杯模式

这种方法完美的解决了继承和隔离的问题(企业级的方法，企业就是这么做的)

function Teacher(){
  this.name = 'Mr. Li';
  this.tSkill = 'JAVA';
}
Teacher.prototype = {
 pSkill: 'JS/JQ'
}

var t = new Teacher();
console.log(t);

function Student(){
  this.name = 'Mr. Wang';
}

function Buffer(){}
Buffer.prototype = Teacher.prototype;
var buffer = new Buffer();
Student.prototype = buffer;
Student.prototype.age = 18;

var s = new Student();
console.log(s);

2、CSS圣杯布局

<!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 type="text/css">
      .clearfix::after{
         content: "";
         display: table;
         clear:both;
      }
      .wrap{
         width: 700px;
         margin: 0 auto;
         border: 1px solid #000;
      }
      .top, .foot{
            height: 50px;
            background-color: #000;
      }
      .main{
        padding: 0 100px;
        overflow: hidden;
      }
      .main .left,
      .main .content,
      .main .right{
         float: left;
         position: relative;
         background-color: green;
         margin-bottom: -4000px;
         padding-bottom: 4000px;
      }
      .main .left{
        left: -100px;
        width: 100px;
      }
      .main .content{
         width: 100%;
         margin-left: -100px;
            background-color:red;
      }
      .main .right{
         left: 100px;
         width: 100px;
         margin-left: -100px;
      }
   </style>
</head>

<body>
   <div class="wrap">
     <div class="top"></div>
     <div class="main clearfix">
       <div class="left">123</div>
       <div class="content">234<br />123</div>
       <div class="right">123</div>
     </div>
     <div class="foot"></div>
   </div>
 </body>
</html>

3、封装圣杯模式实现继承

Teacher.prototype.name = 'Mr. Zhang';
function Teacher(){}
function Student(){}
function Buffer(){}
inherit(Student,Teacher);
var s = new Student();
var t = new Teacher();

console.log(s);
console.log(t);

function inherit(Target,Origin){
  function Buffer(){}
  Buffer.prototype = Origin.prototype;
  Target.prototype = new Buffer();
  Target.prototype.constructor = Target;
  Target.prototype.super_class = Origin;   //super是javascript的保留字
}

(四)、模块化开发

1、前置知识-闭包

(1)、闭包-基本写法

num这个变量实际上成为了add()的私有变量，外界访问不到

function test(){
  var num = 0;
 
  function add(){
     num++;
     console.log(num);
  }
  
  return add;
}

var add = test();

add();
add();
add();

(2)、闭包-对象写法

function test(){
  var num = 0;
  
  var compute = {
    add: function(){
      num++;
      console.log(num);
    },
    minus: function(){
      num--;
      console.log(num);
    }
  }
  return compute;
}

var compute = test();

compute.add();
compute.add();
compute.add();
compute.add();
compute.minus();

(3)、闭表-构造函数写法

构造函数也可以形成闭包

function Compute(){
   var num = 0;
   
   this.add = function(){
      num++;
      console.log(num);
   }
   
   this.minus = function(){
      num--;
      console.log(num);
   }
   
   //这个闭包是怎么形成的，在new的时候 这里return了this   //return this
}

var compute = new Compute();

compute.add();
compute.add();
compute.minus();

2、模块化

1、企业级的写法：

将圣杯模式借助立即执行函数并用闭包的形式包装一下

//立即执行函数有一个好处就是把作用域封闭到一个空间里了
var inherit = (function(){
  var Buffer = function(){}
  return function(Target,Origin){
    Buffer.prototype = Origin.prototype;
    Target.prototype = new Buffer();
    Target.prototype.constructor = Target;
    Target.prototype.super_class = Origin;
  }
})();

Teacher.prototype.name = 'Mr. Zhang';
function Teacher(){}
function Student(){}
function Buffer(){}
inherit(Student,Teacher);
Student.prototype.age = 18;
var s = new Student();
var t = new Teacher();

console.log(s);
console.log(t);

2、案例

var inherit = (function(){
  var Buffer = function(){}
  return function(Target,Origin){
    Buffer.prototype = Origin.prototype;
    Target.prototype = new Buffer();
    Target.prototype.constructor = Target;
    Target.prototype.super_class = Origin;
  }
})();

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() + '。'
      );
    }
  }
  
  function FrontEnd(){}
  function BackEnd(){}
  
  inherit(FrontEnd,Programmer);
  inherit(BackEnd,Programmer);
  
  FrontEnd.prototype.lang = ['HTML','CSS','Javascript'];
  FrontEnd.prototype.myName = '前端';
  
  BackEnd.prototype.lang = ['Node','Java','SQL'];
  BackEnd.prototype.myName = '后端';
  
  return {
    FrontEnd: FrontEnd,
    BackEnd: BackEnd
  }
})();

var frontEnd = new initProgrammer.FrontEnd();
var backEnd = new initProgrammer.BackEnd();

frontEnd.say();
backEnd.say();

3、企业中的协同开发

window.onload = function(){
  init();
}

function init(){
  initCompute();
  initFunctions();
}

var initFunctions = (function(){
 return function(){
    console.log('同事写的代码');
 }
})();

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();
    mul();
    div();
  }
})();