Site updated: 2019-06-01 11:56:40

2019/05/22/2 字符串/index.html

@@ -216,11 +216,11 @@ <h1 id="Base64-转码"><a href="#Base64-转码" class="headerlink" title="Base64
 
 <nav id="article-nav">
 
-    <a href="/2019/05/22/关于 this 指针/" id="article-nav-newer" class="article-nav-link-wrap">
+    <a href="/2019/05/22/Call与Apply/" id="article-nav-newer" class="article-nav-link-wrap">
       <i class="icon-circle-left"></i>
       <div class="article-nav-title">
 
-          ECMA5 this指针
+          ECMA5 CALL APPLY 模拟
 
       </div>
     </a>

2019/05/22/3 对象/index.html

@@ -260,8 +260,8 @@ <h1 id="遍历总结"><a href="#遍历总结" class="headerlink" title="遍历
     </a>
 
 
-    <a href="/2019/05/22/Call与Apply/" id="article-nav-older" class="article-nav-link-wrap">
-      <div class="article-nav-title">ECMA5 CALL APPLY 模拟</div>
+    <a href="/2019/05/22/9 JavaScript Classes/" id="article-nav-older" class="article-nav-link-wrap">
+      <div class="article-nav-title">ECMA6 类</div>
       <i class="icon-circle-right"></i>
     </a>
 

2019/05/22/4 函数/index.html

@@ -275,8 +275,8 @@ <h1 id="6-立即调用的函数表达式-IIFE"><a href="#6-立即调用的函数
     </a>
 
 
-    <a href="/2019/05/22/9 JavaScript Classes/" id="article-nav-older" class="article-nav-link-wrap">
-      <div class="article-nav-title">ECMA6 类</div>
+    <a href="/2019/05/22/关于 this 指针/" id="article-nav-older" class="article-nav-link-wrap">
+      <div class="article-nav-title">ECMA5 this指针</div>
       <i class="icon-circle-right"></i>
     </a>
 

2019/05/22/9 JavaScript Classes/index.html

@@ -236,18 +236,18 @@ <h1 id="Questions"><a href="#Questions" class="headerlink" title="Questions"></a
 
 <nav id="article-nav">
 
-    <a href="/2019/05/22/4 函数/" id="article-nav-newer" class="article-nav-link-wrap">
+    <a href="/2019/05/22/3 对象/" id="article-nav-newer" class="article-nav-link-wrap">
       <i class="icon-circle-left"></i>
       <div class="article-nav-title">
 
-          ECMA5 函数
+          ECMA5 对象
 
       </div>
     </a>
 
 
-    <a href="/2019/05/22/9 面向对象编程/" id="article-nav-older" class="article-nav-link-wrap">
-      <div class="article-nav-title">ECMA5 面向对象编程</div>
+    <a href="/2019/05/22/Call与Apply/" id="article-nav-older" class="article-nav-link-wrap">
+      <div class="article-nav-title">ECMA5 CALL APPLY 模拟</div>
       <i class="icon-circle-right"></i>
     </a>
 

2019/05/22/9 面向对象编程/index.html

@@ -277,11 +277,11 @@ <h1 id="跳-对象的相关方法"><a href="#跳-对象的相关方法" class="h
 
 <nav id="article-nav">
 
-    <a href="/2019/05/22/9 JavaScript Classes/" id="article-nav-newer" class="article-nav-link-wrap">
+    <a href="/2019/05/22/关于 this 指针/" id="article-nav-newer" class="article-nav-link-wrap">
       <i class="icon-circle-left"></i>
       <div class="article-nav-title">
 
-          ECMA6 类
+          ECMA5 this指针
 
       </div>
     </a>

2019/05/22/Call与Apply/index.html

@@ -234,18 +234,18 @@ <h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考
 
 <nav id="article-nav">
 
-    <a href="/2019/05/22/3 对象/" id="article-nav-newer" class="article-nav-link-wrap">
+    <a href="/2019/05/22/9 JavaScript Classes/" id="article-nav-newer" class="article-nav-link-wrap">
       <i class="icon-circle-left"></i>
       <div class="article-nav-title">
 
-          ECMA5 对象
+          ECMA6 类
 
       </div>
     </a>
 
 
-    <a href="/2019/05/22/关于 this 指针/" id="article-nav-older" class="article-nav-link-wrap">
-      <div class="article-nav-title">ECMA5 this指针</div>
+    <a href="/2019/05/22/2 字符串/" id="article-nav-older" class="article-nav-link-wrap">
+      <div class="article-nav-title">ECMA5 字符串</div>
       <i class="icon-circle-right"></i>
     </a>
 

2019/05/22/关于 this 指针/index.html

@@ -219,18 +219,18 @@ <h2 id="2-加一个关于箭头函数的this指针"><a href="#2-加一个关于
 
 <nav id="article-nav">
 
-    <a href="/2019/05/22/Call与Apply/" id="article-nav-newer" class="article-nav-link-wrap">
+    <a href="/2019/05/22/4 函数/" id="article-nav-newer" class="article-nav-link-wrap">
       <i class="icon-circle-left"></i>
       <div class="article-nav-title">
 
-          ECMA5 CALL APPLY 模拟
+          ECMA5 函数
 
       </div>
     </a>
 
 
-    <a href="/2019/05/22/2 字符串/" id="article-nav-older" class="article-nav-link-wrap">
-      <div class="article-nav-title">ECMA5 字符串</div>
+    <a href="/2019/05/22/9 面向对象编程/" id="article-nav-older" class="article-nav-link-wrap">
+      <div class="article-nav-title">ECMA5 面向对象编程</div>
       <i class="icon-circle-right"></i>
     </a>
 

2019/05/22/继承/index.html

@@ -16,7 +16,7 @@
 <meta property="og:site_name" content="chochi&#39;s workshop">
 <meta property="og:description" content="2 继承ECMAScript 只支持实现继承，不支持接口继承。  继承方法类型： 原型链继承 借用构造函数 组合继承 原型式继承 寄生式继承 寄生组合式继承">
 <meta property="og:locale" content="default">
-<meta property="og:updated_time" content="2019-05-24T14:25:25.675Z">
+<meta property="og:updated_time" content="2019-06-01T03:56:26.277Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="ECMA5 继承">
 <meta name="twitter:description" content="2 继承ECMAScript 只支持实现继承，不支持接口继承。  继承方法类型： 原型链继承 借用构造函数 组合继承 原型式继承 寄生式继承 寄生组合式继承">
@@ -177,12 +177,12 @@ <h2 id="2-继承"><a href="#2-继承" class="headerlink" title="2 继承"></a>2
 </ul>
 <h3 id="2-1-原型链继承"><a href="#2-1-原型链继承" class="headerlink" title="2.1 原型链继承"></a>2.1 原型链继承</h3><ul>
 <li>基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法，实现的本质是重写原型对象，代之一个新类型的<strong>实例</strong><ul>
-<li>原型对象可以算是是一个‘实例’，有用constructor指针，指向其构造函数</li>
-<li>构造函数有prototype指针指向原型对象</li>
-<li>实例有<strong>proto</strong>指针执行其原型对象</li>
-<li>Father().prototype —&gt; Father.prototype [原型对象]</li>
-<li>Father.prototype.constructor –&gt; Father() [构造函数]</li>
-<li>InstanceOfFather.<strong> proto</strong> –&gt; Father.prototype</li>
+<li>原型对象可以算是是一个‘实例’，拥有<code>constructor</code>指针，指向其构造函数</li>
+<li>构造函数有<code>prototype</code>指针指向原型对象</li>
+<li>实例有<code>__proto__</code>指针执行其原型对象</li>
+<li><code>Father().prototype</code> —&gt; <code>Father.prototype</code> [原型对象]</li>
+<li><code>Father.prototype.constructor</code> –&gt; <code>Father()</code> [构造函数]</li>
+<li><code>InstanceOfFather.__ proto__</code> –&gt; <code>Father.prototype</code></li>
 </ul>
 </li>
 <li>问题：<ul>

2019/05/26/001react_state_update/index.html

@@ -16,7 +16,7 @@
 <meta property="og:site_name" content="chochi&#39;s workshop">
 <meta property="og:description" content="1 state组件 私有组件 正确的修改方式是使用setState()，触发render函数刷新12// 正确this.setState(&amp;#123;title: &apos;React&apos;&amp;#125;);   2 state更新2.1 state 更新 setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。setState的“异步”并不是说内部由异步代码实">
 <meta property="og:locale" content="default">
-<meta property="og:updated_time" content="2019-05-26T13:43:30.103Z">
+<meta property="og:updated_time" content="2019-06-01T03:32:10.767Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="React state更新">
 <meta name="twitter:description" content="1 state组件 私有组件 正确的修改方式是使用setState()，触发render函数刷新12// 正确this.setState(&amp;#123;title: &apos;React&apos;&amp;#125;);   2 state更新2.1 state 更新 setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。setState的“异步”并不是说内部由异步代码实">
@@ -180,7 +180,7 @@ <h3 id="2-2-state更新是一个浅合并的过程"><a href="#2-2-state更新是
 <h3 id="2-3-demo-说明-个人理解有错就改！"><a href="#2-3-demo-说明-个人理解有错就改！" class="headerlink" title="2.3 demo 说明 | 个人理解有错就改！"></a>2.3 demo 说明 | 个人理解有错就改！</h3><ul>
 <li><p><code>setState</code>只是把要修改的状态放入一个队列中，React会优化真正的执行时机，并且React会出于性能原因，<strong>可能</strong>会将多次<code>setState</code>的状态修改合并成一次状态修改。</p>
 </li>
-<li><p>JS的eventloop简单的来说可以划分执行顺序为 同步-&gt; 异步-&gt;回调</p>
+<li><p>JS的顺序简单的来说可以划分执行顺序为 同步-&gt; 异步-&gt;回调</p>
 </li>
 </ul>
 <figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.setState(&#123; <span class="attr">count</span>: <span class="keyword">this</span>.state.count + <span class="number">1</span> &#125;); <span class="comment">// 异步1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"console: "</span> + <span class="keyword">this</span>.state.count); <span class="comment">// 同步1</span></span><br><span class="line"><span class="keyword">this</span>.setState(</span><br><span class="line">    &#123; <span class="attr">count</span>: <span class="keyword">this</span>.state.count + <span class="number">1</span> &#125;,<span class="comment">//异步2</span></span><br><span class="line">    () =&gt; &#123;<span class="built_in">console</span>.log(<span class="string">"console from callback: "</span> + <span class="keyword">this</span>.state.count); <span class="comment">//回调1</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">this</span>.setState(</span><br><span class="line">   prevState =&gt; &#123;<span class="built_in">console</span>.log(<span class="string">"console from func: "</span> + prevState.count); </span><br><span class="line">   <span class="keyword">return</span> &#123;<span class="attr">count</span>: prevState.count + <span class="number">1</span>&#125;;</span><br><span class="line">&#125;,<span class="comment">//异步3</span></span><br><span class="line">   ()=&gt;&#123;<span class="built_in">console</span>.log(<span class="string">'last console: '</span>+ <span class="keyword">this</span>.state.count)</span><br><span class="line">&#125;);<span class="comment">// 回调2</span></span><br></pre></td></tr></table></figure>

2019/05/29/003定位浮动布局/index.html

@@ -8,17 +8,17 @@
   <link rel="dns-prefetch" href="http://yoursite.com">
   <title>定位、浮动 布局 | chochi&#39;s workshop</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta name="description" content="1 position position 的可选值有四个：static、relative、absolute、fixed，tricky 是被定位的元素层次(z-index)会得到提高  1.1 static 如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）">
+  <meta name="description" content="1 position position 的可选值有四个：static、relative、absolute、fixed，tricky 是被定位的元素层次(z-index)会得到提高 元素脱离文档流后不会撑开父元素高度  1.1 static 如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, ri">
 <meta property="og:type" content="article">
 <meta property="og:title" content="定位、浮动 布局">
 <meta property="og:url" content="http://yoursite.com/2019/05/29/003定位浮动布局/index.html">
 <meta property="og:site_name" content="chochi&#39;s workshop">
-<meta property="og:description" content="1 position position 的可选值有四个：static、relative、absolute、fixed，tricky 是被定位的元素层次(z-index)会得到提高  1.1 static 如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）">
+<meta property="og:description" content="1 position position 的可选值有四个：static、relative、absolute、fixed，tricky 是被定位的元素层次(z-index)会得到提高 元素脱离文档流后不会撑开父元素高度  1.1 static 如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, ri">
 <meta property="og:locale" content="default">
-<meta property="og:updated_time" content="2019-06-01T02:40:29.643Z">
+<meta property="og:updated_time" content="2019-06-01T03:31:51.333Z">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="定位、浮动 布局">
-<meta name="twitter:description" content="1 position position 的可选值有四个：static、relative、absolute、fixed，tricky 是被定位的元素层次(z-index)会得到提高  1.1 static 如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）">
+<meta name="twitter:description" content="1 position position 的可选值有四个：static、relative、absolute、fixed，tricky 是被定位的元素层次(z-index)会得到提高 元素脱离文档流后不会撑开父元素高度  1.1 static 如果元素 position 属性值为 static（或者未设 position 属性），该元素出现在正常的流中（忽略 top, bottom, left, ri">
 
     <link rel="alternative" href="/atom.xml" title="chochi&#39;s workshop" type="application/atom+xml">
 
@@ -165,6 +165,7 @@ <h1 class="article-title" itemprop="name">
         <h1 id="1-position"><a href="#1-position" class="headerlink" title="1 position"></a>1 position</h1><ul>
 <li><strong>position</strong> 的可选值有四个：<strong>static</strong>、<strong>relative</strong>、<strong>absolute</strong>、<strong>fixed</strong>，<strong>tricky</strong></li>
 <li>是被定位的元素层次(z-index)会得到提高</li>
+<li>元素脱离文档流后不会撑开父元素高度</li>
 </ul>
 <h2 id="1-1-static"><a href="#1-1-static" class="headerlink" title="1.1 static"></a>1.1 static</h2><ul>
 <li>如果元素 <strong>position</strong> 属性值为 <strong>static</strong>（或者未设 <strong>position</strong> 属性），该元素出现在正常的流中（忽略 <strong>top</strong>, <strong>bottom</strong>, <strong>left</strong>, <strong>right</strong> 或者 <strong>z-index</strong> 声明）。</li>

archives/2019/05/index.html

@@ -541,14 +541,14 @@ <h1 itemprop="name">
   <div class="archive-article-inner">
     <header class="archive-article-header">
       	<div class="article-meta">
-	      	<a href="/2019/05/22/9 JavaScript Classes/" class="archive-article-date">
+	      	<a href="/2019/05/22/关于 this 指针/" class="archive-article-date">
   	<time datetime="2019-05-22T14:38:04.268Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-05-22</time>
 </a>
         </div>
 
 
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/2019/05/22/9 JavaScript Classes/">ECMA6 类</a>
+      <a class="archive-article-title" href="/2019/05/22/关于 this 指针/">ECMA5 this指针</a>
     </h1>
 
 

archives/2019/05/page/2/index.html

@@ -302,14 +302,14 @@ <h1 itemprop="name">
   <div class="archive-article-inner">
     <header class="archive-article-header">
       	<div class="article-meta">
-	      	<a href="/2019/05/22/Call与Apply/" class="archive-article-date">
+	      	<a href="/2019/05/22/9 JavaScript Classes/" class="archive-article-date">
   	<time datetime="2019-05-22T14:38:04.268Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-05-22</time>
 </a>
         </div>
 
 
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/2019/05/22/Call与Apply/">ECMA5 CALL APPLY 模拟</a>
+      <a class="archive-article-title" href="/2019/05/22/9 JavaScript Classes/">ECMA6 类</a>
     </h1>
 
 
@@ -351,14 +351,14 @@ <h1 itemprop="name">
   <div class="archive-article-inner">
     <header class="archive-article-header">
       	<div class="article-meta">
-	      	<a href="/2019/05/22/关于 this 指针/" class="archive-article-date">
+	      	<a href="/2019/05/22/Call与Apply/" class="archive-article-date">
   	<time datetime="2019-05-22T14:38:04.268Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-05-22</time>
 </a>
         </div>
 
 
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/2019/05/22/关于 this 指针/">ECMA5 this指针</a>
+      <a class="archive-article-title" href="/2019/05/22/Call与Apply/">ECMA5 CALL APPLY 模拟</a>
     </h1>
 
 

archives/2019/index.html

@@ -541,14 +541,14 @@ <h1 itemprop="name">
   <div class="archive-article-inner">
     <header class="archive-article-header">
       	<div class="article-meta">
-	      	<a href="/2019/05/22/9 JavaScript Classes/" class="archive-article-date">
+	      	<a href="/2019/05/22/关于 this 指针/" class="archive-article-date">
   	<time datetime="2019-05-22T14:38:04.268Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-05-22</time>
 </a>
         </div>
 
 
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/2019/05/22/9 JavaScript Classes/">ECMA6 类</a>
+      <a class="archive-article-title" href="/2019/05/22/关于 this 指针/">ECMA5 this指针</a>
     </h1>
 
 

archives/2019/page/2/index.html

@@ -302,14 +302,14 @@ <h1 itemprop="name">
   <div class="archive-article-inner">
     <header class="archive-article-header">
       	<div class="article-meta">
-	      	<a href="/2019/05/22/Call与Apply/" class="archive-article-date">
+	      	<a href="/2019/05/22/9 JavaScript Classes/" class="archive-article-date">
   	<time datetime="2019-05-22T14:38:04.268Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-05-22</time>
 </a>
         </div>
 
 
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/2019/05/22/Call与Apply/">ECMA5 CALL APPLY 模拟</a>
+      <a class="archive-article-title" href="/2019/05/22/9 JavaScript Classes/">ECMA6 类</a>
     </h1>
 
 
@@ -351,14 +351,14 @@ <h1 itemprop="name">
   <div class="archive-article-inner">
     <header class="archive-article-header">
       	<div class="article-meta">
-	      	<a href="/2019/05/22/关于 this 指针/" class="archive-article-date">
+	      	<a href="/2019/05/22/Call与Apply/" class="archive-article-date">
   	<time datetime="2019-05-22T14:38:04.268Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-05-22</time>
 </a>
         </div>
 
 
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/2019/05/22/关于 this 指针/">ECMA5 this指针</a>
+      <a class="archive-article-title" href="/2019/05/22/Call与Apply/">ECMA5 CALL APPLY 模拟</a>
     </h1>
 
 

archives/index.html

@@ -541,14 +541,14 @@ <h1 itemprop="name">
   <div class="archive-article-inner">
     <header class="archive-article-header">
       	<div class="article-meta">
-	      	<a href="/2019/05/22/9 JavaScript Classes/" class="archive-article-date">
+	      	<a href="/2019/05/22/关于 this 指针/" class="archive-article-date">
   	<time datetime="2019-05-22T14:38:04.268Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-05-22</time>
 </a>
         </div>
 
 
     <h1 itemprop="name">
-      <a class="archive-article-title" href="/2019/05/22/9 JavaScript Classes/">ECMA6 类</a>
+      <a class="archive-article-title" href="/2019/05/22/关于 this 指针/">ECMA5 this指针</a>
     </h1>