一、插件化

1.1、需要立即执行的插件「比如轮播图」

  1.         // 插件化
  2.         // 需要立即执行的插件，比如轮播图
  3.         ;(functin(){
  4.             var Slider = function(){};
  6.             Slider.prototype = {
  8.             }
  10.             window.Slider = Slider;
  11.         })();

1.2、不需要立即执行的插件

不需要立即执行的插件，我们在全局声明一个变量将其保存起来，需要执行的时候再随时调用即可

  1.         // 插件化
  2.         // 不需要立即执行的插件，只需要在全局声明一个变量将其保存起来；后期什么时候需要执行再调用即可
  3.         var inherit = (function(){
  4.             var Buffer = function(){};
  5.             return function(origin, target){
  6.                 Buffer.prototype = origin.prototype;
  7.                 target.prototype = new Buffer();
  8.                 target.prototype.constructor = origin;
  9.                 target.prototype.supper_class = origin;
  10.             }
  11.         })();

二、三目运算符「三元运算符」

  • 基本语法： 条件判断 ? 条件成立要做的事情 ：条件不成立要做的事情；

    1.       var a = 5;
    2.       if(a > 0){
    3.           console.log('大于0');
    4.       }else{
    5.           console.log('小于0');
    6.       }
    8.       // 改为三目运算符
    9.       var a = 5;
    10.       a > 0 ? console.log('大于0')
    11.                   : console.log('小于0');

  • 三元运算符有return的作用

    1.       // 三元运算符有return的作用
    2.       var a = 5,
    3.               str;
    5.       if(a > 0){
    6.           str = '大于0';
    7.       }else{
    8.           str = '小于0'
    9.       }
    11.       // 改为三目运算符
    12.       var a = 5;
    13.       var str = a > 0 ? str = '大于0'
    14.                                       : str = '小于0';
    15.       console.log(str);

    三元运算符练习

    1.       // 三元运算符的练习
    2.       var a = 5,
    3.               str;
    5.       if(a > 0){
    6.           if(a > 3){
    7.               str = '大于3';
    8.           }else{
    9.               str = '小于等于3';
    10.           }
    11.       }else{
    12.           str = '小于等于0'
    13.       }
    15.       console.log(str);
    17.       // 改为三目运算符
    18.       var a = 5;
    20.       var str = a > 0 ? (a > 3 ? str = '大于3' 
    21.                                                        : str = '小于等于3') 
    22.                                       : str = '小于等于0';
    24.       console.log(str);

    三、关于字符串比较的面试题

    字符串和字符换比较，是逐位比较字符串对应的ASCII码所对应的十进制值的大小

  1.         // 一道关于字符串的面试题
  2.         // 字符串和字符换比较，是逐位比较字符串对应的ASCII码所对应的十进制值的大小
  3.         var str = 89 > 9 ? ('89' > '9' ? '内层通过了' 
  4.                                                                      : '内层未通过') 
  5.                                          : '外层通过了' ;
  7.         console.log(str);

四、对象的浅克隆

4.1、浅克隆之对象赋值

  • 对象浅克隆之对象赋值，这种方式严格来说不叫克隆

  • 使用对象赋值的方法，两个对象共用的是同一个堆内存地址

    1.       // 对象的浅克隆和深克隆 clone
    2.       // 对象的浅克隆
    3.       // 对象的赋值，不叫克隆
    4.       var person1 = {
    5.           name: '良雨',
    6.           age: 10,
    7.           sex: 'male',
    8.       }
    10.       // 对象的赋值，共用同一个堆内存地址
    11.       var person2 = person1;
    13.       console.log(person2);
    14.       console.log(person1 == person2);
    16.       person2.age = 20;
    17.       console.log(person1, person2);

    4.2、浅克隆之循环「for in」

  • 先创建一个空对象，然后把原始对象进行循环，把属性赋值给新对象

  • 注意：for in 循环会把原型及其原型链上的自定义属性或者是方法循环到 「 hasOwnProperty」

  • 浅拷贝只能处理第一层，而且并没有深层次的处理对象中的引用值

    1.       // 浅克隆 for in循环的方式
    2.       // 创建一个空对象，用for in循环原始对象，然后将属性名和值存入到新的对象之中
    3.       // 注意：for in循环是会把原型及其原型链上的自定义的属性和方法都循环出来的
    5.       var obj1 = {
    6.           name: 'kola',
    7.           age: 10,
    8.           sex: 'male'
    9.       }
    11.       var obj2 = {};
    12.       for(var key in obj1){
    13.           obj2[key] = obj1[key];
    14.       }
    16.       console.log(obj2);
    18.       obj2.name = 'Lucy';
    19.       console.log(obj1, obj2);

  • 浅拷贝只能处理第一层，而且不能深层次处理引用值；在用for in循环的时候，会把原型及其原型链上的自定义属性和方法循环到

    1.   // 浅克隆 for in循环的方式
    2.       // 创建一个空对象，用for in循环原始对象，然后将属性名和值存入到新的对象之中
    3.       // 注意：for in循环是会把原型及其原型链上的自定义的属性和方法都循环出来的
    5.       var obj1 = {
    6.           name: 'kola',
    7.           age: 10,
    8.           sex: 'male'
    9.       }
    11.       // 可能会多次用到，进行封装
    12.       var obj2 = {};
    13.       // for(var key in obj1){
    14.       //     obj2[key] = obj1[key];
    15.       // }
    17.       // 执行封装的clone方法
    18.       clone(obj1, obj2);
    20.       console.log(obj2);
    22.       obj2.name = 'Lucy';
    23.       console.log(obj1, obj2);
    25.       // 对象浅拷贝 第一版封装
    26.       // 没有考虑用户不新建空对象的情况，也没有考虑到for in的缺陷
    27.       function clone(origin, target){
    28.           for(var key in origin){
    29.               target[key] = origin[key]
    30.           }
    31.       }
    33.       // 浅克隆第二版封装
    34.       function clone(origin, target){
    35.           var target = target || {};
    37.           for(var key in origin){
    38.               // 提出原型及其原型链上的自定义属性和方法
    39.               if(origin.hasOwnProperty(key)){
    40.                   target[key] = origin[key];
    41.               }
    42.           }
    44.           return target;
    45.       }

    4.3、浅克隆封装

    1.       function clone(origin, target){
    2.           var target = target || {};
    4.           for(var key in origin){
    5.               if(origin.hasOwnProperty(key)){
    6.                   target[key] = origin[key];
    7.               }
    8.           }
    10.           return target;
    11.       }

    4.4、浅克隆存在的问题

  • 不能深层次处理引用值

  • 只能处理第一层，出现对象嵌套的情况就无法处理了 ```javascript

    1.   // 浅拷贝的问题：
    2.   //     + 不能深层次处理引用值
    3.   //     + 只能处理第一层，出现对象嵌套的情况就无法处理了
    4.   Object.prototype.num = '11';
    5.   var person1 = {
    6.       name: 'kola',
    7.       age: 18,
    8.       sex: 'male',
    9.       son: {
    10.           first: 'Jenny',
    11.           second: 'Lucy',
    12.           third: 'Tone'
    13.       }
    14.   }
    16.   // 浅克隆封装
    17.   function clone(origin, target){
    18.       var target = target || {};
    20.       for(var key in origin){
    21.           if(origin.hasOwnProperty(key)){
    22.               target[key] = origin[key];
    23.           }
    24.       }
    26.       return target;
    27.   }
  1.     // 调用封装好的浅克隆方法
  2.     var person2 = clone(person1);
  4.     console.log(person1, person2);
  6.     // 浅克隆无法处理深层次的引用值
  7.     person2.name = '李四';
  8.     person2.son = {
  9.         forth: '李小明',
  10.         five: '李华'
  11.     };
  12.     console.log(person1, person2);
  1. <a name="Q5i7f"></a>
  2. # 五、对象的深克隆
  3. <a name="BFv2R"></a>
  4. ## 5.1、对象深克隆思路分析及其封装
  6. - 先处理用户体验 target = target || {}
  7. - 用for in遍历原始对象的属性
  8. - 在遍历原始对象属性的时候，要注意排除原型及其原型链上的自定义属性和方法「for in」会遍历到原型及其原型链上的自定义的属性和方法，可以用「hasOwnProperty」来解决
  9. - 排除完原型和原型链上的自定义方法以后，先判断对象的属性是否是引用数据类型「注意排除null」
  10. - 判断是对象之后，再看是不是数组，如果是数组就创建一个空数组，如果是对象就创建一个空对象
  11. - 使用递归，调用自己封装的这个深克隆的方法，来循环深层次的对象
  12. - 如果不是引用数据类型值，那就 target[key] = origin[key]
  13. - 最后将target返回出去
  14. ```javascript
  15.         // 对象的深克隆
  16.         //     + 先处理用户体验 var target = target || {}
  17.         //     + 用for in循环原始对象，注意for in在循环的时候会把原型及其原型链上的自定义属性或者是方法循环出来，可以用hasOwnProperty来解决
  18.         //     + 循环完以后先判断其是否为对象，注意排除null
  19.         //     + 判断是否为对象以后，再判断是否是数组，如果是数组就创建一个空数组，如果是对象就创建一个空对象
  20.         //     + 递归循环深层次的对象 deepClone(origin[key], target[key])
  21.         //     + 如果不是对象就 target[key] = origin[key]
  22.         //     + 最后 return target
  24.         // 深克隆方法封装
  25.         function deepClone(origin, target){
  26.             var target = target || {},
  27.                     toStr = Object.prototype.toString,
  28.                     arrType = '[object Array]';
  30.             for(var key in origin){
  31.                 if(origin.hasOwnProperty(key)){
  32.                     if(typeof(origin[key]) === 'object' && origin[key] !== null){
  33.                         if(toStr.call(origin[key]) === arrType){
  34.                             target[key] = [];
  35.                         }else{
  36.                             target[key] = {};
  37.                         }
  39.                         deepClone(origin[key], target[key]);
  40.                     }else{
  41.                         target[key] = origin[key];
  42.                     }
  43.                 }
  44.             }
  46.             return target;
  47.         }
  50.         Object.prototype.num = '11';
  51.         var person1 = {
  52.             name: '张三',
  53.             age: 18,
  54.             sex: 'male',
  55.             height: 180,
  56.             children: {
  57.                 first: {
  58.                     name: '张一',
  59.                     age: 22
  60.                 },
  61.                 second: {
  62.                     name: '张二',
  63.                     age: 20
  64.                 },
  65.                 third: {
  66.                     name: '张三',
  67.                     age: 10
  68.                 },
  69.             },
  70.             car: ['Benz', 'Mazda']
  71.         };
  73.         var person2 = deepClone(person1);
  74.         person2.name = '李四';
  75.         person2.children.forth = {
  76.             name: '李五',
  77.             age: 8
  78.         }
  79.         person2.car.push('BYD');
  81.         console.log(person1, person2);

5.2、对象深克隆封装的优化 「三目运算符版本」

  1.         function deepClone(origin, target){
  2.             var target = target || {},
  3.                     toStr = Object.prototype.toString,
  4.                     arrType = '[object Array]';
  6.             for(var key in origin){
  7.                 if(origin.hasOwnProperty(key)){
  8.                     if(typeof(origin[key]) === 'object' && origin[key] !== null){
  9.                         toStr.call(origin[key]) === arrType ? target[key] = [] 
  10.                                                                                                 : target[key] = {};
  11.                         deepClone(origin[key], target[key]);
  12.                      }        
  13.                 }else{
  14.                     target[key] = origin[key]; 
  15.                 }
  16.             }
  18.             return target;
  19.         }

5.3、利用JSON的方法

  • JSON方法是不能克隆对象上的方法的

    1.       // 利用JSON的方法实现对象的克隆
    2.       // JSON这个方法，是不能克隆对象上的方法的
    3.       var str = JSON.stringify(person1);
    4.       var person2 = JSON.perse(str);

    六、面试题

    1.       // 面试题
    2.       function test(){
    3.           console.log(foo);
    4.           var foo = 2;
    5.           console.log(foo);
    6.           console.log(a);
    7.       }
    9.       test();
    11.       console.log(a);
    12.       console.log(typeof(a));

    函数预编译

  • 寻找形参和变量声明

  • 统一形参和实参的值
  • 寻找函数声明并赋值

  • 执行

    1.       // 面试题
    2.       // 预编译阶段
    3.       //     + 寻找形参和变量声明
    4.       //     + 统一形参和实参的值
    5.       //     + 寻找函数声明并赋值
    6.       //     + 执行
    7.       function a(){
    8.           var test;
    9.           test();
    10.           function test(){
    11.               console.log(1);
    12.           }
    13.       }
    15.       a();

    this指向的面试题「做错两遍了重点注意」

    1.       // 面试题
    2.       var name = '222';
    3.       var a = {
    4.           name: '111',
    5.           say: function(){
    6.               console.log(this.name);
    7.           }
    8.       }
    10.       var func = a.say;
    11.       // say: function(){
    12.       //         console.log(this.name);
    13.       //     }
    14.       func(); // '222'
    15.       a.say(); // '111'
    17.       var b = {
    18.           name: '333',
    19.           say: function(){
    20.               func();
    21.           }
    22.       }
    24.       b.say(a.say); // '333' 错的
    25.       b.say = a.say;
    26.       b.say(); // '333'

    this指向和call/apply面试题

    1.       // this指向和call/apply面试题
    2.       function test(){
    3.           var marty = {
    4.               name: 'marty',
    5.               printName: function(){
    6.                   console.log(this.name);
    7.               }
    8.           }
    10.           var test1 = {
    11.               name: 'test1'
    12.           };
    13.           var test2 = {
    14.               name: 'test2'
    15.           };
    16.           var test3 = {
    17.               name: 'test'
    18.           };
    20.           test3.printName = marty.printName;
    21.           marty.printName.call(test1);
    22.           marty.printName.call(test2);
    23.           marty.printName();
    24.           test3.printName();
    26.       }
    28.       test();

    面试题「做错了留意一下」

    1.       // 面试题
    2.       var bar = {
    3.           a: '1'
    4.       };
    6.       function test(){
    7.           bar.a = 'a';
    8.           Object.prototype.b = 'b';
    9.           return function inner(){
    10.               console.log(bar.a);
    11.               console.log(bar.b);
    12.           }
    13.       }
    15.       test()();

    七、一道超难的面试题

    做错了无数遍，需要留意 ```javascript

    1.   // 作业：说出为什么
    2.   function Foo(){
    3.       getName = function(){
    4.           console.log(1);
    5.       };
    6.       return this;
    7.   }
    9.   Foo.getName = function(){
    10.       console.log(2);
    11.   };
    13.   Foo.prototype.getName = function(){
    14.       console.log(3);
    15.   };
    17.   var getName = function(){
    18.       console.log(4);
    19.   };
    21.   function getName(){
    22.       console.log(5);
    23.   }
  1.     Foo.getName(); // 2
  2.     getName(); // 4
  3.     Foo().getName(); // 1
  4.     getName(); // 1 
  5.     new Foo.getName(); // 2
  6.     new Foo().getName(); // 3
  7.     new new Foo().getName(); // 3
  10.     // 1. 寻找变量声明
  11.     // 2. 寻找函数声明并赋值
  12.     // 3. 执行赋值
  13.     // 优先级问题： () > . > new
  15.     GO = {
  16.         Foo: function(){...}
  17.         getName:  // undefined
  18.                             // function (){console.log(1)}
  19.     }
  1. [JS运算符优先级](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#%E6%B1%87%E6%80%BB%E8%A1%A8)
  2. <a name="vlkUQ"></a>
  3. # 八、作业
  4. 从window.prompt输入一个年份，判断其是否是闰年「请用三目运算符」
  5. ```javascript
  6.         // 第十四课时作业：从wp输入一个年份，判断是否是闰年
  7.         var year = window.prompt('请输入年份');
  8.         function isLeapYear(year){
  9.             var year = Number(year);
  10.             if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
  11.                 return '闰年';
  12.             }else{
  13.                 return '不是闰年';
  14.             }
  15.         }
  17.         console.log(isLeapYear(year));
  20.         // 三目运算符版
  21.         var year = window.prompt('请输入年份');
  22.         function isLeapYear(year){
  23.             var year = Number(year);
  24.             return year = ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) ? '闰年'
  25.                                                                                                                                                              : '不是闰年';
  27.         }
  29.         console.log(isLeapYear(year));