一、原型和原型链总结

  • 原型是构造函数身上的一个属性，构造函数实例化以后就可以继承原型上的公有属性和方法
  • 原型是定义构造函数所构造出实例对象的公共祖先
  • 所有被该构造函数构造出的实例对象都会继承原型上的属性和方法
  • 原型上有一个constructor属性，它指向的是当前这个构造器，也就是构造函数本身
  • 原型的最顶端是Object.prototype

  • 原型其实也是一个对象，原型的原型一定是有Object构造出来的

    1.   // 原型和原型链总结
    2.   // 原型是构造函数身上的一个属性，构造函数实例化以后可以继承原型上的属性和方法
    3.   // 原型是定义构造函数所构造出每一个实例对象的公共祖先
    4.   // 所有被该构造函数所构造出的实例化对象都会继承原型上的属性和方法
    5.   // 原型也是对象，原型的原型一定是由Object所构造出来的
    6.   // 原型的最顶端是Object.prototype
    7.   // 构造函数原型上有一个属性，constructor，指向的是构造器，也就是当前这个构造函数本身
    8.   function Person(){}
    10.   Person.prototype.name = 'Lucy';
    12.   var p = new Person();
    14.   console.log(p);

    二、几种对象继承的方式

    2.1、原型链继承

  • 缺点：会继承祖先身上的的所有属性和方法，同时也会继承祖先原型链上的所有属性和方法

    1.    // 对象的几种继承方式
    2.   // 原型链继承：缺点就是会继承祖先身上的所有的属性和方法，同时也会继承祖先原型链上所有的属性和方法
    3.   Professor.prototype = {
    4.     name: '张教授',
    5.     tSkill: 'JAVA'
    6.   }
    7.   function Professor(){}
    9.   var professor = new Professor();
    11.   Teacher.prototype = professor;
    12.   function Teacher(){
    13.     this.name = '王老师';
    14.     this.mSkill = 'JS/JQ';
    15.   }
    17.   var teacher = new Teacher();
    19.   Student.prototype = teacher;
    20.   function Student(){
    21.     this.name = '李同学';
    22.     this.pSkill = 'HTML/CSS';
    23.   }
    25.   var student = new Student();
    27.   console.log(student);

    image.png

    2.2、call和apply继承

  • 缺点：call和apply继承，严格意义上来说只是通过改变this指向来借用方法或者是属性；它的缺点是无法继承原型上的属性或者是方法

  • call和apply两者都可以改变其this指向
  • call传递参数是一项一项传递的

  • apply传递参数是以数组的形式传递的

    1.   // call和apply继承
    2.   // call和apply继承，严格意义上来说只是通过改变其this指向，来借用属性或者方法；它不能继承原型上的属性或者是方法
    3.   Teacher.prototype.wife = '李女士';
    4.   function Teacher(name, mSkill){
    5.     this.name = name;
    6.     this.mSkill = mSkill;
    7.   }
    9.   function Student(name, mSkill, age, major){
    10.     Teacher.apply(this, [name, mSkill]);
    11.     this.age = age;
    12.     this.major = major;
    13.   }
    15.   var student = new Student('王先生', 'JS/JQ', 18, 'computer');
    17.   console.log(student);

    image.png

    2.3、公共原型的方法

  • 缺点：只要其中一个原型更改了属性，那么被关联的原型上的属性就会受到影响

    1.   // 公共原型继承法
    2.   // 只要其中一个原型更改了属性，被关联的原型上的属性就会受到影响
    3.   function Teacher(){
    4.     this.name = '王老师';
    5.     this.tSkill = 'JAVA';
    6.   }
    7.   Teacher.prototype = {
    8.     pSkill: 'JS/JQ'
    9.   }
    11.   var teacher = new Teacher();
    12.   console.log(teacher);
    14.   function Student(){
    15.     this.name = '李同学';
    16.   }
    17.   Student.prototype = Teacher.prototype;
    18.   Student.prototype.age = 20;
    20.   var student = new Student();
    22.   console.log(student);
    23.   console.log(teacher);
    24.   console.log(Teacher.prototype);

    image.png

    2.4、圣杯模式解决继承所产生的问题「企业级解决方案」

    原理：定义一个中间件「空的构造函数」；让中间件这个构造函数的原型等于需要被继承的这个构造函数的原型；然后实例化这个中间件对象，最后让需要继承的这个构造函数的原型等于被实例出来的这个中间件的对象

image.png

  1.     // 圣杯模式继承原型
  2.     function Teacher(){
  3.       this.name = '王老师';
  4.       this.tSkill = 'JAVA';
  5.     }
  6.     Teacher.prototype = {
  7.       pSkill: 'JS/JQ'
  8.     }
  10.     var teacher = new Teacher();
  11.     console.log(teacher);
  13.     function Student(){
  14.       this.name = '李同学';
  15.     }
  17.     // 定义中空的间件
  18.     function Buffer(){}
  19.     // 公共原型一定要在实例化对象之前
  20.     Buffer.prototype = Teacher.prototype;
  21.     var buffer = new Buffer();
  22.     Student.prototype = buffer;
  24.     Student.prototype.age = 22;
  26.     var student = new Student();
  27.     console.log(student.pSkill);
  28.     console.log(student);

2.4.1、圣杯模式初级封装

  1.     // 圣杯模式初级封装
  2.     Teacher.prototype.name = '颜老师';
  3.     function Teacher(){}
  4.     function Student(){}
  5.     inherit(Student, Teacher);
  7.     // 这部分每次都需要使用，每次写代码就会过于冗余；不利用后期维护
  8.     // function Buffer(){}
  9.     // Buffer.prototype = Teacher.prototype;
  10.     // var buffer = new Buffer();
  11.     // Student.prototype = buffer;
  12.     function inherit(Target, Origin){
  13.       function Buffer(){}
  14.       Buffer.prototype = Origin.prototype;
  15.       Target.prototype = new Buffer();
  16.       // 还原构造器指向
  17.       Target.prototype.constructor = Target;
  18.       // 定义原始的继承类
  19.       Target.prototype.supper_class = Origin;
  20.     }
  22.     var teacher = new Teacher();
  23.     var student = new Student();
  25.     console.log(student);
  26.     console.log(teacher);
  27.     console.log(student.name);

image.png

2.4.2、复习闭包

  1.    // 复习闭包
  2.     // 普通闭包
  3.     function test(){
  4.       var num = 1;
  6.       function add(){
  7.         num++;
  8.         console.log(num);
  9.       }
  11.       return add;
  12.     }
  14.     var add = test();
  15.     add();
  16.     add();
  17.     add();
  19.     // 普通闭包
  20.     function test(){
  21.       var num = 1;
  23.       var compute = {
  24.         add: function(){
  25.           num++;
  26.           console.log(num);
  27.         },
  28.         minus: function(){
  29.           num--;
  30.           console.log(num);
  31.         }
  32.       }
  34.       return compute;
  35.     }
  37.     var compute = test();
  38.     compute.add();
  39.     compute.minus();
  42.     // 构造函数也能形成闭包
  43.     function Compute(){
  44.       // 在实例化对象的时候系统隐式创建this对象
  45.       // var this = {
  46.       //   add: function(){...}
  47.       //   minus: function(){...}
  48.       // }
  50.       var num = 0;
  52.       this.add = function(){
  53.         num++;
  54.         console.log(num);
  55.       }
  57.       this.minus = function(){
  58.         num--;
  59.         console.log(num);
  60.       }
  62.       // 系统会隐式返回this
  63.       // return this；
  64.     }
  66.     var compute = new Compute();
  67.     compute.add();
  68.     compute.minus();

2.4.3、圣杯模式进阶封装

  1.     // 需要在全局定义变量，并且需要手动去执行所封装的函数
  2.     var inherit = initInherit();
  4.     Teacher.prototype.name = '颜老师';
  5.     function Teacher(){}
  6.     function Student(){}
  7.     inherit(Student, Teacher);
  9.     var teacher = new Teacher();
  10.     var student = new Student();
  12.     console.log(student);
  13.     console.log(teacher);
  14.     console.log(student.name);
  18.     // 圣杯模式终极封装
  19.     function initInherit(){
  20.       var Buffer = function(){}
  22.       function inherit(Target, Origin){
  23.         Buffer.prototype = Origin.prototype;
  24.         Target.prototype = new Buffer();
  25.         // 还原构造器
  26.         Target.prototype.constructor = Target;
  27.         Target.prototype.supper_class = Origin;
  28.       }
  30.       return inherit;
  31.     }

2.4.4、圣杯模式终极封装

  1.     // 圣杯模式终极封装
  2.     // 使用模块化思想来进行封装
  3.     var inherit = (function(){
  4.       var Buffer = function(){}
  6.       return function(Target, Origin){
  7.         Buffer.prototype = Origin.prototype;
  8.         Target.prototype = new Buffer();
  9.         // 还原构造器
  10.         Target.prototype.constructor = Target;
  11.         // 定义终极继承的超类
  12.         Target.prototype.supper_class = Origin;
  13.       }
  14.     })();
  16.     Teacher.prototype.name = '颜老师';
  17.     function Teacher(){}
  18.     function Student(){}
  19.     inherit(Student, Teacher);
  21.     var teacher = new Teacher();
  22.     var student = new Student();
  24.     console.log(student);
  25.     console.log(teacher);
  26.     console.log(student.name);

三、模块化开发

3.1、按需启动

按需启动，不让它立即执行，那就交给一个全局变量让它等待执行即可

  1.     // 模块化开发
  2.     // 按需启动，不让它立即执行，把它交给一个全局变量让其等待执行
  3.     // 页面一加载就执行
  4.     window.onload = function(){
  5.       init();
  6.     }
  8.     // 初始化函数
  9.     function init(){
  10.       initCompute();
  11.       initFuncs();
  12.     }
  14.     // // 功能函数，模块化
  15.     var initCompute = (function(){
  16.       var a = 1,
  17.           b = 2;
  19.       this.add = function(){
  20.         return a + b;
  21.       }
  22.       this.minus =function(){
  23.         return a - b;
  24.       }
  25.       this.mul =function(){
  26.         return a * b;
  27.       }
  28.       this.div = function(){
  29.         return a / b;
  30.       }
  32.       return function(){
  33.         add();
  34.         minus();
  35.         mul();
  36.         div();
  37.       }
  38.     })();
  40.     // 功能函数，模块化
  41.     var initFuncs = (function(){
  43.     })();
  45.     // 功能函数，模块化
  46.     var initFuncs = (function(){
  48.     })();

3.2、插件化开发

插件化开发，页面加载的时候就需要执行

  1.     // 插件化开发
  2.     // 页面加载的时候就需要执行
  3.     ;function(){
  4.       var Slider = function(){}
  5.       // function Slider(){}
  7.       Slider.prototype = {
  9.       }
  11.       window.Slider = Slider;
  12.     }();
  14.     var slider = new Slider({
  15.       // 传入配置
  16.     });

四、作业

把三个JS文件合并成一个

1、打印一个参数值能够同时被3或者是5或者是7同时整除的数
2、打印斐波拉契数列
3、打印从0到一个数的累加值

  1. var initCompute = (function () {
  2.   // 传统闭包的模式
  3.   // return function (agr) {
  4.   //     if (agr % 2 === 0 || agr % 3 === 0 || agr % 5 === 0) {
  5.   //       console.log('这个数能够同时被2或者是3或者是5整除');
  6.   //     }else{
  7.   //       console.log('小主，这个数不能够同时被2或者是3或者是5整除哦!');
  8.   //     }
  9.   // }
  11.   this.compute = function (agr) {
  12.     if (agr % 2 === 0 || agr % 3 === 0 || agr % 5 === 0) {
  13.       console.log('这个数能够同时被2或者是3或者是5整除');
  14.     } else {
  15.       console.log('小主，这个数不能够同时被2或者是3或者是5整除哦!');
  16.     }
  17.   }
  19.   return function(){
  20.     compute()
  21.   }
  22. })();
  24. window.onload = function () {
  25.   init();
  26. }
  28. function init() {
  29.   initCompute(77);
  30. }
  1.         // 课时十二作业
  2.         // 1、打印一个参数值能够同时被3或者是5或者是7同时整除的数
  3.         // 2、打印斐波拉契数列
  4.         // 3、打印从0到一个数的累加值
  5.         // 使用模块化开发
  6.         window.onload = function(){
  7.             init();
  8.         }
  10.         function init(){
  11.             console.log(initDiv(10));
  12.             console.log(initFb(12));
  13.             console.log(initAdd(100));
  14.             isLeapYear();
  15.         }
  18.         // 打印一个参数值能够同时被3或者是5或者是7同时整除的数
  19.         var initDiv = (function(){
  20.             var arr = [];
  22.             return function(val){
  23.                 for(var i = 0; i < val; i++){
  24.                     if(i % 3 === 0 && i % 5 === 0 || i % 7 === 0){
  25.                         arr.push(i);
  26.                     }
  27.                 }
  28.                 return arr;
  29.             }
  30.         })();
  32.         // 打印斐波拉契数列
  33.         var initFb = (function(){
  34.             function fb(num){
  35.                 var num = num || 0;
  36.                 if(num < 0){
  37.                     return 0;
  38.                 }
  39.                 if(num <= 2){
  40.                     return 1;
  41.                 }
  43.                 return fb(num - 1) + fb(num - 2);
  44.             }
  46.             return fb;
  47.         })();
  49.         // 打印从0到一个数的累加值
  50.         var initAdd = (function(){
  51.             return function add(num){
  52.                 var num = num || 0;
  53.                 if(num === 1){
  54.                     return 1;
  55.                 }
  57.                 return num + add(num -1);
  58.             }
  59.         })();
  61.         // 从window.prompt输入一个年份判断是不是闰年，用三目运算符
  62.         var isLeapYear = (function(){
  63.             return function(){
  64.                 var year = Number(window.prompt('请输入年份'));
  65.                 // if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
  66.                 //     console.log('是闰年');
  67.                 // }else{
  68.                 //     console.log('是平年');
  69.                 // }
  71.                 return year = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0 ? console.log('是闰年')
  72.                                                                                                                                                          : console.log('是平年')
  73.             }
  74.         })();