diff --git "a/2019/05/22/2 \345\255\227\347\254\246\344\270\262/index.html" "b/2019/05/22/2 \345\255\227\347\254\246\344\270\262/index.html" index 68561ff..2278772 100644 --- "a/2019/05/22/2 \345\255\227\347\254\246\344\270\262/index.html" +++ "b/2019/05/22/2 \345\255\227\347\254\246\344\270\262/index.html" @@ -216,11 +216,11 @@

- +
- ECMA5 对象 + ECMA5 面向对象编程
diff --git "a/2019/05/22/3 \345\257\271\350\261\241/index.html" "b/2019/05/22/3 \345\257\271\350\261\241/index.html" index 2fab8a1..82713bb 100644 --- "a/2019/05/22/3 \345\257\271\350\261\241/index.html" +++ "b/2019/05/22/3 \345\257\271\350\261\241/index.html" @@ -250,18 +250,18 @@

- +
- ECMA6 类 + ECMA5 包装对象
- -
ECMA5 字符串
+ +
ECMA5 函数
 diff --git "a/2019/05/22/4 \345\207\275\346\225\260/index.html" "b/2019/05/22/4 \345\207\275\346\225\260/index.html" index 4d65edb..fa3a3bf 100644 --- "a/2019/05/22/4 \345\207\275\346\225\260/index.html" +++ "b/2019/05/22/4 \345\207\275\346\225\260/index.html" @@ -265,18 +265,18 @@

- +
- ECMA5 CALL APPLY 模拟 + ECMA5 对象
- -
ECMA5 数组
+ +
ECMA5 CALL APPLY 模拟
 diff --git "a/2019/05/22/5 \346\240\207\345\207\206\345\272\223/index.html" "b/2019/05/22/5 \346\240\207\345\207\206\345\272\223/index.html" index f275b1b..ec8ca88 100644 --- "a/2019/05/22/5 \346\240\207\345\207\206\345\272\223/index.html" +++ "b/2019/05/22/5 \346\240\207\345\207\206\345\272\223/index.html" @@ -239,18 +239,18 @@

- +
- ECMA5 this指针 + ECMA5 CALL APPLY 模拟
- -
ECMA5 面向对象编程
+ +
ECMA5 数组
 diff --git a/2019/05/22/6 Array/index.html b/2019/05/22/6 Array/index.html index eb77e86..aee25e0 100644 --- a/2019/05/22/6 Array/index.html +++ b/2019/05/22/6 Array/index.html @@ -249,18 +249,18 @@

- +
- ECMA5 函数 + ECMA5 标准库
- -
ECMA5 包装对象
+ +
ECMA5 this指针
 diff --git "a/2019/05/22/7 \345\214\205\350\243\205\345\257\271\350\261\241 wrapper/index.html" "b/2019/05/22/7 \345\214\205\350\243\205\345\257\271\350\261\241 wrapper/index.html" index c33e207..c70bd45 100644 --- "a/2019/05/22/7 \345\214\205\350\243\205\345\257\271\350\261\241 wrapper/index.html" +++ "b/2019/05/22/7 \345\214\205\350\243\205\345\257\271\350\261\241 wrapper/index.html" @@ -256,18 +256,18 @@

- +
- ECMA5 数组 + ECMA5 继承
- -
ECMA6 类
+ +
ECMA5 对象
 diff --git a/2019/05/22/9 JavaScript Classes/index.html b/2019/05/22/9 JavaScript Classes/index.html index ae29127..8c0598d 100644 --- a/2019/05/22/9 JavaScript Classes/index.html +++ b/2019/05/22/9 JavaScript Classes/index.html @@ -236,18 +236,18 @@

- +
- ECMA5 包装对象 + ECMA5 this指针
- -
ECMA5 对象
+ +
ECMA5 面向对象编程
 diff --git "a/2019/05/22/9 \351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" "b/2019/05/22/9 \351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" index 37d0eb7..59c2a3e 100644 --- "a/2019/05/22/9 \351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" +++ "b/2019/05/22/9 \351\235\242\345\220\221\345\257\271\350\261\241\347\274\226\347\250\213/index.html" @@ -277,18 +277,18 @@

- +
- ECMA5 标准库 + ECMA6 类
- -
ECMA5 CALL APPLY 模拟
+ +
ECMA5 字符串
 diff --git "a/2019/05/22/Call\344\270\216Apply/index.html" "b/2019/05/22/Call\344\270\216Apply/index.html" index 3111308..0823074 100644 --- "a/2019/05/22/Call\344\270\216Apply/index.html" +++ "b/2019/05/22/Call\344\270\216Apply/index.html" @@ -234,18 +234,18 @@

- +
- ECMA5 面向对象编程 + ECMA5 函数
- -
ECMA5 函数
+ +
ECMA5 标准库
 diff --git "a/2019/05/22/\345\205\263\344\272\216 this \346\214\207\351\222\210/index.html" "b/2019/05/22/\345\205\263\344\272\216 this \346\214\207\351\222\210/index.html" index db4617e..25b8ca7 100644 --- "a/2019/05/22/\345\205\263\344\272\216 this \346\214\207\351\222\210/index.html" +++ "b/2019/05/22/\345\205\263\344\272\216 this \346\214\207\351\222\210/index.html" @@ -219,18 +219,18 @@

- +
- ECMA5 继承 + ECMA5 数组
- -
ECMA5 标准库
+ +
ECMA6 类
 diff --git "a/2019/05/22/\347\273\247\346\211\277/index.html" "b/2019/05/22/\347\273\247\346\211\277/index.html" index 4e06e45..d689e00 100644 --- "a/2019/05/22/\347\273\247\346\211\277/index.html" +++ "b/2019/05/22/\347\273\247\346\211\277/index.html" @@ -275,8 +275,8 @@

-
ECMA5 this指针
+ +
ECMA5 包装对象
 diff --git "a/2019/05/29/003\345\256\232\344\275\215\346\265\256\345\212\250\345\270\203\345\261\200/index.html" "b/2019/05/29/003\345\256\232\344\275\215\346\265\256\345\212\250\345\270\203\345\261\200/index.html" index 219c40a..f80fe53 100644 --- "a/2019/05/29/003\345\256\232\344\275\215\346\265\256\345\212\250\345\270\203\345\261\200/index.html" +++ "b/2019/05/29/003\345\256\232\344\275\215\346\265\256\345\212\250\345\270\203\345\261\200/index.html" @@ -15,7 +15,7 @@ - + @@ -171,7 +171,7 @@

1.2 relative

1.3 absolute

1.2 relative

-

1.3 absolute

-
-

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

-

relative和static方式在最外层时是以< body> 标签为定位原点的，而absoulte方式在无父级是position非static定位时是以 作为原点定位。

-
-

1.3 fixed

-

2 float

2.1 使用 float

-

2.2 清除float

1 使用 clear 规定元素的哪一侧不允许其他浮动元素。

1
clear: none | left | right | both
- -

2 利用伪元素

1
2
3
4
5
<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>
-
1
2
3
4
5
6
.clearfix:after {
    content: '';
    height: 0;
    display: block;// or table
    clear: both;
}
-

2 BFC 块级格式化上下文

将父元素设定为BFC可以消除浮动带来的影响

-

资料引用

    -
  1. 定位属性position使用详解
    2. -
  2. 学习CSS布局
    3. -
  3. CSS深入理解值float浮动
    4. -
  4. 清除浮动的四种方式及其原理理解
    5. -
- +
  • 然后相对于static生成的位置位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙（即保持文档流）。 + + more >> + - +
    • @@ -671,19 +614,19 @@

    2 -
    +

    - ECMA5 this指针 + ECMA5 包装对象

    - + @@ -691,14 +634,16 @@

    -

    1 概念

      -
    • this 对象时运行时基于函数的执行环节绑定的，在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。
      • -
    • 匿名函数的执行环节具有全局性，因此this指针对象通常指向window
      • -
    • +

      1 定义

        +
      • 数值、字符串、布尔值这三种原型类型的值，在一听条件下也会自动转化为对象，也就是原始类型的包装对象。
        • +
      • Number String Boolean
        • +
      • 包装对象的目的，是得对象模型覆盖js所优质，正门语言都有一个通用的数据模型，其次是得原始类型的值也有可以调动自己的方法。
        • +
      • 原始类型的值会自动当做包装对象调用，即调用包装对象的属性和方法。JS引擎糊自动将原始类型的值转换为包装对象实例，并在使用后立即销毁。
        • +
      • 自动转换生成的包装对象是只读的，无法修改。
      -
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      let obj = {
         fun : function(){
             console.log(this);//obj

             return function(){

              console.log(this);//window 匿名函数有全局性
             };  
         }
      };
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      var str = 'abc';
      str.length; // 3

      // 等同于
      var strObj = new String(str);
      /*
          String{
              0:"1",1:"b",2;"c",length:3[[PrimitiveValue]]:"abc"
          }
          strObj.length;//3
      */
      - more >> + more >> @@ -733,7 +678,7 @@

      1

      - 展开全文 >> + 展开全文 >>

      @@ -763,19 +708,19 @@

      1 -
      +

      - ECMA5 标准库 + ECMA5 对象

      - + @@ -783,10 +728,14 @@

      -

      1 判断某个变量是否为函数

      1
      2
      3
      function isObject(value){
              return value === Object(value);
          }
      -

      2 对象的键名

      +

      1 键名

        +
      • 对象的所有键名都是字符串，若键名不符合标识符的条件，则必须加上引号。
        • +
      • 如果使用方运算符，键名必须放在引号里，否则会被当做变量处理。
        • +
      • 数字键可以不加引号，会自动转成字符串。
        1
        2
        3
        4
        5
        6
        let obj  = { flag: true };
        obj[flag]       // undefined
        obj.flag        // true
        obj.['flag']    // true
        flag ='flag';
        obj[flag]       // ture
        +
        • +
      - more >> + more >> @@ -821,7 +770,7 @@

      - 展开全文 >> + 展开全文 >>

      @@ -851,19 +800,19 @@

      +

      - ECMA5 面向对象编程 + ECMA5 函数

      - + @@ -871,17 +820,12 @@

      -

      1 实例对象与new 命令

      1.1 构造函数

        -
      • 函数体内部使用了 this 关键字，代表了所要生成的对象实例。
        • -
      • 生成对象的时候，必须使用 new 命令
        • -
      • 函数名首字母大写，以示区别。
        • -
      -

      1.2 new 命令

        -
      • 执行构造函数，返回一个对象实例。
        • +

        1 概述

        1.1 重复声明

          +
        • 函数的声明会提升到函数定义时所在的作用域的头部。故同名函数会被后来的函数替代。
        -

        1.2.1 new 原理

        1
        2
        3
        4
        graph TB
            A[1.创建一个空对象作为将要返回的对象实例]--> B[2.将这个空对象的原型指向构造函数的prototype属性]
            B-->C[3.将空对象赋值给函数内部的this关键字]
            C-->D[4.开始执行构造函数内部的代码]
        +
        1
        2
        3
        4
        5
        6
        7
        8
        function f(){
            console.log('one');
        }
        f();    //two
        function f(){
            console.log('two');
        }
        f();    //two
        - more >> + more >> @@ -916,7 +860,7 @@

        - 展开全文 >> + 展开全文 >>

        @@ -1051,19 +995,19 @@

        +

        - ECMA5 函数 + ECMA5 标准库

        - + @@ -1071,12 +1015,10 @@

        -

        1 概述

        1.1 重复声明

          -
        • 函数的声明会提升到函数定义时所在的作用域的头部。故同名函数会被后来的函数替代。
          • -
        -
        1
        2
        3
        4
        5
        6
        7
        8
        function f(){
            console.log('one');
        }
        f();    //two
        function f(){
            console.log('two');
        }
        f();    //two
        +

        1 判断某个变量是否为函数

        1
        2
        3
        function isObject(value){
                return value === Object(value);
            }
        +

        2 对象的键名

        - more >> + more >> @@ -1111,7 +1053,7 @@

        1

        - 展开全文 >> + 展开全文 >>

        diff --git a/page/2/index.html b/page/2/index.html index ffff2db..00f9d70 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -232,19 +232,19 @@

        +

        - ECMA5 包装对象 + ECMA5 this指针

        - + @@ -252,16 +252,14 @@

        -

        1 定义

          -
        • 数值、字符串、布尔值这三种原型类型的值，在一听条件下也会自动转化为对象，也就是原始类型的包装对象。
          • -
        • Number String Boolean
          • -
        • 包装对象的目的，是得对象模型覆盖js所优质，正门语言都有一个通用的数据模型，其次是得原始类型的值也有可以调动自己的方法。
          • -
        • 原始类型的值会自动当做包装对象调用，即调用包装对象的属性和方法。JS引擎糊自动将原始类型的值转换为包装对象实例，并在使用后立即销毁。
          • -
        • 自动转换生成的包装对象是只读的，无法修改。
          • +

          1 概念

            +
          • this 对象时运行时基于函数的执行环节绑定的，在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。
            • +
          • 匿名函数的执行环节具有全局性，因此this指针对象通常指向window
            • +
          -
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          var str = 'abc';
          str.length; // 3

          // 等同于
          var strObj = new String(str);
          /*
              String{
                  0:"1",1:"b",2;"c",length:3[[PrimitiveValue]]:"abc"
              }
              strObj.length;//3
          */
          +
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          let obj = {
             fun : function(){
                 console.log(this);//obj

                 return function(){

                  console.log(this);//window 匿名函数有全局性
                 };  
             }
          };
          - more >> + more >> @@ -296,7 +294,7 @@

          1

          - 展开全文 >> + 展开全文 >>

          @@ -413,19 +411,19 @@

          Class -
          +

          - ECMA5 对象 + ECMA5 面向对象编程

          - + @@ -433,14 +431,17 @@

          -

          1 键名

            -
          • 对象的所有键名都是字符串，若键名不符合标识符的条件，则必须加上引号。
            • -
          • 如果使用方运算符，键名必须放在引号里，否则会被当做变量处理。
            • -
          • 数字键可以不加引号，会自动转成字符串。
            1
            2
            3
            4
            5
            6
            let obj  = { flag: true };
            obj[flag]       // undefined
            obj.flag        // true
            obj.['flag']    // true
            flag ='flag';
            obj[flag]       // ture
            -
            • +

            1 实例对象与new 命令

            1.1 构造函数

              +
            • 函数体内部使用了 this 关键字，代表了所要生成的对象实例。
              • +
            • 生成对象的时候，必须使用 new 命令
              • +
            • 函数名首字母大写，以示区别。
              • +
            +

            1.2 new 命令

              +
            • 执行构造函数，返回一个对象实例。
            +

            1.2.1 new 原理

            1
            2
            3
            4
            graph TB
                A[1.创建一个空对象作为将要返回的对象实例]--> B[2.将这个空对象的原型指向构造函数的prototype属性]
                B-->C[3.将空对象赋值给函数内部的this关键字]
                C-->D[4.开始执行构造函数内部的代码]
            - more >> + more >> @@ -475,7 +476,7 @@

            1

            - 展开全文 >> + 展开全文 >>

            diff --git a/tags/JS/index.html b/tags/JS/index.html index 711e8b7..2688e7b 100644 --- a/tags/JS/index.html +++ b/tags/JS/index.html @@ -204,14 +204,14 @@

            - +

            - ECMA5 this指针 + ECMA5 CALL APPLY 模拟

            @@ -253,14 +253,14 @@

            - +

            - ECMA5 CALL APPLY 模拟 + ECMA5 函数

            @@ -351,14 +351,14 @@

            - +

            - ECMA5 函数 + ECMA5 标准库

            @@ -400,14 +400,14 @@

            - +

            - ECMA5 标准库 + ECMA5 this指针