1.原型链继承

1.1 通过操作构造函数的prototype属性可以实现继承

  1. Professor.prototype = {
  2.   name: 'Mr. zhang',
  3.   tSkill: 'JAVA'
  4. }
  5. function Professor(){}
  6. var professor = new Professor();
  8. Teacher.prototype = professor;
  9. function Teacher(){
  10.   this.name = 'Mr. wang',
  11.   this.mSkill = 'JS/JQ'
  12. }
  13. var teacher = new Teacher();
  15. Student.prototype = teacher;
  16. function Student(){
  17.   this.name = 'Mr. Li',
  18.   this.pSkill = 'HTML/CSS'
  19. }
  21. var student = new Student();
  22. console.log(student);

image.png

1.2 call/apply只是在借用Teacher()属性而不是继承

  1. function Teacher(name, mSkill){
  2.   this.name = name;
  3.   this.mSkill = mSkill;
  4. }
  5. function Student(name, mSkill, age, major) {
  6.   Teacher.apply(this, [name, mSkill]);
  7.   this.age = age;
  8.   this.major = major;
  9. }
  10. var student = new Student(
  11.   'Mr.zhang', 'JS/JQ', 18, 'Computer'
  12. );
  13. console.log(student);

image.png

2. 圣杯模式

2.1 企业级方法 -> Buffer初级

  1. function Teacher(){
  2.   this.name = 'Mr.Li';
  3.   this.tSkill = 'JAVA';
  4. }
  6. Teacher.prototype = {
  7.   pSkill: 'JS/JQ';
  8. }
  9. var t = new Teacher();
  11. function Student(){
  12.   this.name = 'Mr. wang';
  13. }
  14. function Buffer(){}
  15. Buffer.prototype = Teacher.prototype;
  16. var buffer = new Buffer();
  17. Student.prototype = buffer;
  18. Student.prototype.age = 18;
  20. var s = new Student();
  21. console.log(s);
  22. console.log(s.pSkill);
  23. console.log(Student.prototype, Teacher.prototype);

image.png

2.2 标准写法

  1. Teacher.prototype.name = 'Mr. zhang';
  2. function Teacher(){}
  3. function Student(){}
  4. function Buffer(){}
  5. inherit(Student, Teacher);
  6. var s = new Student();
  7. var t = new Teacher();
  9. // inherit继承
  10. function inherit(Target, Origin){
  11.   function Buffer(){}
  12.   Buffer.prototype = Origin.prototype;
  13.   Target.prototype = new Buffer();
  14.   // 构造器指向自己
  15.   Target.prototype.constructor = Target;
  16.   // 设置继承源
  17.   Target.prototype.super_class = Origin;
  18. }

2.3 企业级写法(模块化开发IIFE)

  1. var inherit = (function(){
  2.   // 1.声明一个Buffer构造函数
  3.   var Buffer = function(){}
  4.   return fucntion (Target, Origin){
  5.     // 2.将被继承对象Origin的原型赋值给Buffer构造函数的原型
  6.     Buffer.prototype = Origin.prototype;
  7.     // 3.将实例化Buffer构造函数,作为继承对象Target的原型
  8.     Target.prototype = new Buffer();
  9.     // 构造器指向自己
  10.     Target.prototype.constructor = Target;
  11.     // 设置继承源
  12.     Target.prototype.super_class = Origin;
  13.   }
  14. })();
  15. Teacher.prototype.name = 'Mr.zhang';
  16. function Teacher(){}
  17. function Student(){}
  19. inherit(Student, Teacher);
  20. Student.prototype.age = 18;
  21. var s = new Student();
  22. var t = new Teacher();
  23. console.log(s);
  24. console.log(t);

image.png

3. CSS圣杯模式 双飞翼

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>Document</title>
  5.     <style>
  6.         .clearfix::after {
  7.             content: "";
  8.             display: block;
  9.             clear: both;
  10.         }
  12.         .wrap {
  13.             margin: 0 auto;
  14.             width: 700px;
  15.             border: 1px solid #000;
  16.         }
  18.         .top,
  19.         .foot {
  20.             height: 50px;
  21.             background-color: #000;
  22.         }
  24.         .main {
  25.             padding: 0 100px;
  26.             overflow: hidden;
  27.         }
  29.         .main .left,
  30.         .main .content,
  31.         .main .right {
  32.             float: left;
  33.             position: relative;
  34.             margin-bottom: -2000px;
  35.             padding-bottom: 2000px;
  36.             background-color: green;
  37.         }
  39.         .main .left {
  40.             left: -100px;
  41.             width: 100px;
  42.         }
  44.         .main .content {
  45.             width: 100%;
  46.             margin-left: -100px;
  47.             background-color: red;
  48.         }
  50.         .main .right {
  51.             margin-left: -100px;
  52.             left: 100px;
  53.             width: 100px;
  54.         }
  55.     </style>
  56. </head>
  58. <body>
  59.     <div class="wrap">
  60.         <div class="top"></div>
  61.         <div class="main clearfix">
  62.             <div class="left">123</div>
  63.             <div class="content">234<br />123</div>
  64.             <div class="right">123</div>
  65.         </div>
  66.         <div class="foot"></div>
  67.     </div>
  68. </body>

4. 模块化

  • 优点
    • 防止全局污染
    • 利于后期的维护
    • 二次开发 ```javascript function inherit(Target, Origin){ function Buffer(){} Buffer.prototype = Origin.prototype; var buffer = new Buffer(); Target.prototype = 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.myName = ‘前端’; FrontEnd.prototype.lang = [‘HTML’, ‘CSS’, ‘JavaScript’];

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();

<a name="Rl2Pq"></a>
# 5. 作业
运用模块化开发的方法实现:

1. 打印一个参数值以内,参数能被3/5/7整除的数
1. 打印斐波那契数列的第N位
1. 打印从0到一个数的累加值
```javascript
var initDiv = (function(){
    function div(num){
      var arr = [];
      for(var i = 0; i <= num; i++){
        if(i % 3 === 0 || i % 5 === 0 || i % 7 === 0){
          arr.push(i);
        }
      }
      return arr
    }
    return div
  })()

  // console.log(initDiv(100));

  // 1 1 2 3 5 8
  var initFibinacci = (function(){
    var num1 = 1;
    var num2 = 1;
    function fib(n){
      if(n === 1){
        return 1
      }
      if(n === 2){
        return 1
      }
      if(n > 2){  
        return fib(n - 1) + fib(n - 2)
      }
    }
    return fib
  })()

  // var res = initFibinacci(6);
  // console.log(res);

  // 1 2 3 4 5
var cumulative = (function(){
  var sum = 0;
  function add(n){
    for(var i = 0; i <= n; i++){
      sum += i;
    }
    return sum
  }
  return add
})()