1-2-4.html

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./public/favicon.ico" />
    <meta http-equiv="cache-control" content="no-cache" />
    <title></title>
    <link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
    <link rel="stylesheet" href="./hightlight/default.min.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./css/copybutton.css" />
    <link rel="stylesheet" href="./css/hightlight.css" />
    <script src="./hightlight/hightlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
    <script src="./js/gtag.js"></script>
  </head>

  <body>
    <header>
      <nav>
        <h1>
          <span id="toggle-menu"></span>
          <a href="index.html"></a>
        </h1>
      </nav>
    </header>
    <main>
      <aside>
        <nav></nav>
      </aside>
      <article>
        <h2 id="1-2-4">1-2-4 高頻考點及基礎題庫</h2>
        <h3>JavaScript 資料類型及其判斷</h3>
        <p>
          對於類型判斷，常用的方法有 typeof、instanceof、Object.prototype.toString、 constructor。
        </p>
        <h3>使用 typeof 判斷資料類型</h3>
        <pre><code class="language-js">
typeof 5 // "number"
typeof 'lucas' // "string"
typeof undefined // "undefined"
typeof true // "boolean"
        </code></pre>
        <p>但是也存在一些特例，如用 typeof 判斷 null，程式如下。</p>
        <pre><code class="language-js">
typeof null // "object"
        </code></pre>
        <p>判斷複雜資料類型的範例。</p>
        <pre><code class="language-js">
const foo = () => 1
typeof foo // "function"

const too = {}
typeof foo // "object"

const Foo = []
typeof foo // "object"

const foo = new Date ()
typeof too // "object"

const foo = Symbol("foo")
typeof Foo // "symbol"
        </code></pre>
        <p>
          透過以上範例，我們可以知道，使用 typeof 可以準確判斯出除 null 以外的基底資料型態，以及
          function 類型、symbol 類型；null 會被 typeof 判斷為 object 。
        </p>
        <h3>使用 instanceof 判斷資料類型</h3>
        <p>
          a instanceof B 判斷的是，a 是否為 B 的實例，即a 的原型鏈上是否存在 B
          的建構函數，範例程式如下。
        </p>
        <pre><code class="language-js">
function Person (name) {
  this.name = name
}
const p = new Person('lucas')
p instanceof Person
// true
        </code></pre>
        <p>
          p 是 Person 創建出來的實體。同時順著 p 的原型鏈也能找到 Object 的建構函數，範例程式如下。
        </p>
        <pre><code class="language-js">
p.__proto__.__proto__=== Object.prototype
        </code></pre>
        <p>再來看一個範例。如果我們判斷的是以下關係，則傳回 false。</p>
        <pre><code class="language-js">
5 instanceof Number // false
        </code></pre>
        <p>
          因為 5 是基本類型，它並不是 Number
          建構函數建置出來的實例物件。而如果稍加修改，使其變為判斷以下關係，則傳回 true
        </p>
        <pre><code class="language-js">
new Number(5) instanceof Number // true
        </code></pre>
        <p>關於 instanceof 的原理，可以用以下程式來模擬。</p>
        <pre><code class="language-js">
// L表示左運算式， R表示右運算式

const instanceofMock = (L, R) => {
  if (typeof L !== 'object') {
    return false
  }
  while (true) {
    if (L === null) {
      //已經檢查到了頂端
      return false
    }
    if (R.prototype === L.__proto__) {
      return true
    }
    L = L.__proto__
  }
}
        </code></pre>
        <p>根據 L 表示左運算式， R 表示右運算式， instanceofMock 的用法如下。</p>
        <pre><code class="language-js">
instanceofMock('', String)
// false

function Person(name){
  this.name = name
}
const p = new Person('lucas')
instanceofMock(p, Person)
// true
        </code></pre>
        <h3>使用 constructor 和 Object.prototype.toString 判斷資料類型</h3>
        <p>透過 toString 判斷資料類型好用的方法如下所示。</p>
        <pre><code class="language-js">
console.log(Object.prototype.toString.call(1))
// [object Number]
console.log(Object.prototype.toString.call('lucas'))
// [object String]
console.log(Object.prototype.toString.call(undefined))
/ [object Undefined]
console.log(Object.prototype.toString. call(true))
// [object Boolean]
console.log(Object.prototype.toString.call({}))
// [object Object]
console.log(Object.prototype.toString.call([]))
// [object Array]
console.log(Object.prototype.toString.call(function(){}))
// [object Function]
console.log(Object.prototype.toString.call(null))
// [object Null]
console.log(Object.prototype.toString.call(Symbol('lucas')))
// [object Symbol]
        </code></pre>
        <p>
          使用 constructor
          可以檢視目標的建構函數，也可以進行資料類型判斷，但其中也存在問題，實際請看以下範例。
        </p>

        <pre><code class="language-js">
var foo = 5
foo.constructor
// f Number(){ [native code] }
var foo = 'Lucas'
foo.constructor
// f String(){ [native code] }
var foo = true
foo.constructor
// f Boolean(){ [native code] }
var foo = []
foo.constructor
// f Array () { [native code] }
var foo = {}
foo.constructor
// f Object(){ [native code] } 
var foo = () => {}
foo.constructor
// f Function () { [native code] }
var foo = new Date()
foo. constructor
// f Date(){ [native code] }
var foo = Symbol("foo")
foo.constructor
// f Symbol(){ [native code] }
var foo = undefined
foo.constructor
// VM257:1 Uncaught TypeError: Cannot read property 'constructor' of undefined at &lt;anonymous&gt;: 1:5
var foo = null
foo.constructor
// VM334:1 Uncaught TypeError: Cannot read property 'constructor' of null at &lt;anonymous&gt;： 1:5

        </code></pre>
        <p>
          我們發現對於 undefined 和 null，如果嘗試讀取其 constructor 屬性，則會顯示出錯，並且
          constructor 傳回的是建構函數本身，一般使用它來判斷資料類型 的情況並不多見。
        </p>
        <h3>JavaScript 資料類型及其轉換</h3>
        <p>
          先看一個有趣的網站。
          <a href="https://jsfuck.com/" target="_blank" rel="noopener noreferrer">
            https://jsfuck.com/
          </a>
        </p>
        <p>挖掘源代碼可以看到作者利用了 JS 弱型別自動轉換的原理做了一個轉譯器。</p>
        <pre><code class="language-js">
/*! JSFuck 0.5.0 - http://jsfuck.com */

(function(self){
  const MIN = 32, MAX = 126;

  const SIMPLE = {
    'false':      '![]',
    'true':       '!![]',
    'undefined':  '[][[]]',
    'NaN':        '+[![]]',
    'Infinity':   '+(+!+[]+(!+[]+[])[!+[]+!+[]+!+[]]+[+!+[]]+[+[]]+[+[]]+[+[]])' // +"1e1000"
  };

  const CONSTRUCTORS = {
    'Array':    '[]',
    'Number':   '(+[])',
    'String':   '([]+[])',
    'Boolean':  '(![])',
    'Function': '[]["flat"]',
    'RegExp':   'Function("return/"+false+"/")()',
    'Object':	'[]["entries"]()'
  };

  const MAPPING = {
    'a':   '(false+"")[1]',
    'b':   '([]["entries"]()+"")[2]',
    'c':   '([]["flat"]+"")[3]',
    'd':   '(undefined+"")[2]',
    'e':   '(true+"")[3]',
    'f':   '(false+"")[0]',
    'g':   '(false+[0]+String)[20]',
    'h':   '(+(101))["to"+String["name"]](21)[1]',
    'i':   '([false]+undefined)[10]',
    'j':   '([]["entries"]()+"")[3]',
    'k':   '(+(20))["to"+String["name"]](21)',
    'l':   '(false+"")[2]',
    'm':   '(Number+"")[11]',
    'n':   '(undefined+"")[1]',
    'o':   '(true+[]["flat"])[10]',
    'p':   '(+(211))["to"+String["name"]](31)[1]',
    'q':   '("")["fontcolor"]([0]+false+")[20]',
    'r':   '(true+"")[1]',
    's':   '(false+"")[3]',
    't':   '(true+"")[0]',
    'u':   '(undefined+"")[0]',
    'v':   '(+(31))["to"+String["name"]](32)',
    'w':   '(+(32))["to"+String["name"]](33)',
    'x':   '(+(101))["to"+String["name"]](34)[1]',
    'y':   '(NaN+[Infinity])[10]',
    'z':   '(+(35))["to"+String["name"]](36)',

    'A':   '(NaN+[]["entries"]())[11]',
    'B':   '(+[]+Boolean)[10]',
    'C':   'Function("return escape")()(("")["italics"]())[2]',
    'D':   'Function("return escape")()([]["flat"])["slice"]("-1")',
    'E':   '(RegExp+"")[12]',
    'F':   '(+[]+Function)[10]',
    'G':   '(false+Function("return Date")()())[30]',
    'H':   null,
    'I':   '(Infinity+"")[0]',
    'J':   null,
    'K':   null,
    'L':   null,
    'M':   '(true+Function("return Date")()())[30]',
    'N':   '(NaN+"")[0]',
    'O':   '(+[]+Object)[10]',
    'P':   null,
    'Q':   null,
    'R':   '(+[]+RegExp)[10]',
    'S':   '(+[]+String)[10]',
    'T':   '(NaN+Function("return Date")()())[30]',
    'U':   '(NaN+Object()["to"+String["name"]]["call"]())[11]',
    'V':   null,
    'W':   null,
    'X':   null,
    'Y':   null,
    'Z':   null,

    ' ':   '(NaN+[]["flat"])[11]',
    '!':   null,
    '"':   '("")["fontcolor"]()[12]',
    '#':   null,
    '$':   null,
    '%':   'Function("return escape")()([]["flat"])[21]',
    '&':   '("")["fontcolor"](")[13]',
    '\'':  null,
    '(':   '([]["flat"]+"")[13]',
    ')':   '([0]+false+[]["flat"])[20]',
    '*':   null,
    '+':   '(+(+!+[]+(!+[]+[])[!+[]+!+[]+!+[]]+[+!+[]]+[+[]]+[+[]])+[])[2]',
    ',':   '[[]]["concat"]([[]])+""',
    '-':   '(+(.+[0000001])+"")[2]',
    '.':   '(+(+!+[]+[+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+[!+[]+!+[]]+[+[]])+[])[+!+[]]',
    '/':   '(false+[0])["italics"]()[10]',
    ':':   '(RegExp()+"")[3]',
    ';':   '("")["fontcolor"](NaN+")[21]',
    '<':   '("")["italics"]()[0]',
    '=':   '("")["fontcolor"]()[11]',
    '>':   '("")["italics"]()[2]',
    '?':   '(RegExp()+"")[2]',
    '@':   null,
    '[':   '([]["entries"]()+"")[0]',
    '\\':  '(RegExp("/")+"")[1]',
    ']':   '([]["entries"]()+"")[22]',
    '^':   null,
    '_':   null,
    '`':   null,
    '{':   '(true+[]["flat"])[20]',
    '|':   null,
    '}':   '([]["flat"]+"")["slice"]("-1")',
    '~':   null
  };

  const GLOBAL = 'Function("return this")()';

  function fillMissingDigits(){
    var output, number, i;

    for (number = 0; number < 10; number++){

      output = "+[]";

      if (number > 0){ output = "+!" + output; }
      for (i = 1; i < number; i++){ output = "+!+[]" + output; }
      if (number > 1){ output = output.substr(1); }

      MAPPING[number] = "[" + output + "]";
    }
  }

  function replaceMap(){
    var character = "", value, i, key;

    function replace(pattern, replacement){
      value = value.replace(
        new RegExp(pattern, "gi"),
        replacement
      );
    }

    function digitReplacer(_,x) { return MAPPING[x]; }

    function numberReplacer(_,y) {
      var values = y.split("");
      var head = +(values.shift());
      var output = "+[]";

      if (head > 0){ output = "+!" + output; }
      for (i = 1; i < head; i++){ output = "+!+[]" + output; }
      if (head > 1){ output = output.substr(1); }

      return [output].concat(values).join("+").replace(/(\d)/g, digitReplacer);
    }

    for (i = MIN; i <= MAX; i++){
      character = String.fromCharCode(i);
      value = MAPPING[character];
      if(!value) {continue;}

      for (key in CONSTRUCTORS){
        replace("\\b" + key, CONSTRUCTORS[key] + '["constructor"]');
      }

      for (key in SIMPLE){
        replace(key, SIMPLE[key]);
      }

      replace('(\\d\\d+)', numberReplacer);
      replace('\\((\\d)\\)', digitReplacer);
      replace('\\[(\\d)\\]', digitReplacer);

      replace("GLOBAL", GLOBAL);
      replace('\\+""', "+[]");
      replace('""', "[]+[]");

      MAPPING[character] = value;
    }
  }

  function replaceStrings(){
    var regEx = /[^\[\]\(\)\!\+]{1}/g,
      all, value, missing,
      count = MAX - MIN;

    function findMissing(){
      var all, value, done = false;

      missing = {};

      for (all in MAPPING){

        value = MAPPING[all];

        if (value && value.match(regEx)){
          missing[all] = value;
          done = true;
        }
      }

      return done;
    }

    function mappingReplacer(a, b) {
      return b.split("").join("+");
    }

    function valueReplacer(c) {
      return missing[c] ? c : MAPPING[c];
    }

    for (all in MAPPING){
      if (MAPPING[all]){
        MAPPING[all] = MAPPING[all].replace(/\"([^\"]+)\"/gi, mappingReplacer);
      }
    }

    while (findMissing()){
      for (all in missing){
        value = MAPPING[all];
        value = value.replace(regEx, valueReplacer);

        MAPPING[all] = value;
        missing[all] = value;
      }

      if (count-- === 0){
        console.error("Could not compile the following chars:", missing);
      }
    }
  }

  function escapeSequence(c) {
    var cc = c.charCodeAt(0);
    if (cc < 256) {
      return '\\' + cc.toString(8);
    } else {
      var cc16 = cc.toString(16);
      return '\\u' + ('0000' + cc16).substring(cc16.length);  
    }
  }

  function escapeSequenceForReplace(c) {
    return escapeSequence(c).replace('\\', 't');
  }

  function encode(input, wrapWithEval, runInParentScope){
    var output = [];

    if (!input){
      return "";
    }

    var unmappped = ''
    for(var k in MAPPING) {
      if (MAPPING[k]){
        unmappped += k;
      }
    }
    unmappped = unmappped.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    unmappped = new RegExp('[^' + unmappped + ']','g');
    var unmappedCharactersCount = (input.match(unmappped) || []).length;
    if (unmappedCharactersCount > 1) {
      // Without this optimization one unmapped caracter has encoded length
      // of about 3600 characters. Every additional unmapped character adds 
      // 2000 to the total length. For example, the lenght of `~` is 3605, 
      // `~~` is 5600, and `~~~` is 7595.
      // 
      // The loader with replace has encoded length of about 5300 characters
      // and every additional character adds 100 to the total length. 
      // In the same example the length of `~~` becomes 5371 and `~~~` -- 5463.
      // 
      // So, when we have more than one unmapped character we want to encode whole input
      // except select characters (that have encoded length less than about 70)
      // into an escape sequence.
      //
      // NOTE: `t` should be escaped!
      input = input.replace(/[^0123456789.adefilnrsuN]/g, escapeSequenceForReplace);
    } else if (unmappedCharactersCount > 0) {
      //Because we will wrap the input into a string we need to escape Backslash 
      // and Double quote characters (we do not need to worry about other characters 
      // because they are not mapped explicitly).
      // The JSFuck-encoded representation of `\` is 2121 symbols,
      // so esacped `\` is 4243 symbols and escaped `"` is 2261 symbols
      // however the escape sequence of that characters are 
      // 2168 and 2155 symbols respectively, so it's more practical to 
      // rewrite them as escape sequences.
      input = input.replace(/["\\]/g, escapeSequence);
      //Convert all unmapped characters to escape sequence
      input = input.replace(unmappped, escapeSequence);
    }

    var r = "";
    for (var i in SIMPLE) {
      r += i + "|";
    }
    r+= ".";

    input.replace(new RegExp(r, 'g'), function(c) {
      var replacement = SIMPLE[c];
      if (replacement) {
        output.push("(" + replacement + "+[])");
      } else {
        replacement = MAPPING[c];
        if (replacement){
          output.push(replacement);
        } else {
          throw new Error('Found unmapped character: ' + c);
        }
      }
    });

    output = output.join("+");

    if (/^\d$/.test(input)){
      output += "+[]";
    }

    if (unmappedCharactersCount > 1) {
      // replace `t` with `\\`
      output = "(" + output + ")[" + encode("split") + "](" + encode ("t") + ")[" + encode("join") +"](" + encode("\\") + ")";
    }

    if (unmappedCharactersCount > 0) {
      output = "[][" + encode("flat") + "]"+
      "[" + encode("constructor") + "]" +
      "(" + encode("return\"") + "+" + output + "+" + encode("\"") + ")()";
    }

    if (wrapWithEval){
      if (runInParentScope){
        output = "[][" + encode("flat") + "]" +
          "[" + encode("constructor") + "]" +
          "(" + encode("return eval") + ")()" +
          "(" + output + ")";
      } else {
        output = "[][" + encode("flat") + "]" +
          "[" + encode("constructor") + "]" +
          "(" + output + ")()";
      }
    }

    return output;
  }

  fillMissingDigits();
  replaceMap();
  replaceStrings();

  self.JSFuck = {
    encode: encode
  };
})(typeof(exports) === "undefined" ? window : exports);

        </code></pre>
        <p>如需用在自己的小功能可以這樣使用。當然這是一個很鬧的展示，不可能用在正式產品上。</p>
        <pre><code class="language-js">
function $(id){
  return document.getElementById(id);
}

function encode(){
  var output = JSFuck.encode($("input").value, $("eval").checked, $("scope").checked);
  $("output").value = output;
  $("stats").innerHTML = output.length + " chars";
}

$("encode").onclick = encode;
$("eval").onchange = encode;
$("scope").onchange = encode;

encode();

$("run").onclick = function(){
  value = eval($("output").value)
  if (!$("eval").checked){
    alert('"' + value + '"');
  }
  return false;
};
        </code></pre>
        <p>
          用以上轉譯器轉出來的一串怪怪的符號組合，拿到執行環境去跑還真的可以執行。只能說 JS
          真的是太神奇了。
        </p>
        <p>
          JavaScript
          是一種弱類型，或說是一種動態語言。這表示你不用提前宣告變數的資料類型，在程式執行過程中，變數的資料類型會被自動確定。
        </p>
        <p>如果覺得上面的例子太過燒腦，下面有列舉一些基本案例。</p>
        <pre><code class="language-js">
console.log( 1 + '1' )
// 11
console.log( 1 + true )
// 2
console.log( 1 + false )
// 1
console.log( 1 + undefined )
// NaN
console.log( 'lucas' + true )
// lucastrue
console.log( 1+ true )
// 2
console.log( 1 + false )
// 1
console.log( {} + true )
// [object Object]true
console.log( [] + {} )
// [object Object]
console.log( [] + [] )
// ''
console.log( [] + 1 )
// '1'
console.log( [] + 0 )
// '0'

        </code></pre>
        <p>在＋運算子兩側，如果存在複雜資料類型，例如物件，會遵循的一套轉換規則。</p>
        <p>
          當使用＋運算子計算時，如果存在複雜資料類型，那麼它將被轉為基底資料型態再進行運算。這就有關「物件類型轉基本類型」這個過程。這個過程的實際規則是，在轉換時，會呼叫該物件上的
          valueOf或 toString 方法，這兩個方法的傳回值是轉換後的結果。
        </p>
        <p>
          那實際呼叫 valueOf 還是 toString 呢？這是 ES 標準所決定的，實際上，這取決於內建的
          toPrimitive
          的呼叫結果。從主觀上說，這個物件偏好轉換成什麼，就會優先呼叫哪個方法。如果偏好轉為 number
          類型，就優先呼叫valueOf；如果偏好轉為 string 類型，就只呼叫
          toString。這裡建議大家了解一些常用的轉換結果，對於其他特例情況，會尋找標準即可。
        </p>
        <p>
          很多經典教科書中介紹將物件轉為基底資料型態時，會先呼叫 valueOf，再呼叫
          toString，這裡引用的「這個物件偏好轉換成什麼，就會優先呼叫哪個方法」其實取自標準中的
          PreferredType 概念，這個概念在這些書中並沒有被提到。事實上，瀏覽器對 PreferredType的
          了解比較一致，「物件類型轉為基本類型時，先呼叫 valueOf，再呼叫
          toString」也沒有問題。對此有興趣或更加嚴謹可以翻閱相關標準。
        </p>
        <p>valueOf 及 toString 是可以被開發者重新定義的，範例如下。</p>
        <pre><code class="language-js">
const foo = {
  toString(){
    return 'lucas'
  },
  valueOf(){
    return 1
  }
}
        </code></pre>
        <p>
          我們對 foo 物件的 valueOf及 toSting 進行了重新定義，這時候呼叫 alert(foo)將輸出
          lucas。這裡就有關自動轉型，在呼叫 alert 列印輸出時，偏好使用 foo 物件的toString 方法，將
          foo 轉為基底資料型態，以列印出結果。
        </p>
        <p>
          然而，執行 console.log(1 + foo)將輸出 2 ，這時候的自動轉型則偏好使用 foo 物件的 valueOf
          方法，將 foo 轉為基底資料型態，以執行相加操作。
        </p>
        <p>我們再全面歸納一下，對於加法操作，如果＋運算子兩邊都是 number 類型，則其規則如下。</p>
        <ul>
          <li>如果 + 運算子兩邊存在 NaN ，則結果為 NaN ( 對 NaN 進行 typeof 求值，傳回 number)</li>
          <li>如果是 Infinity + Infinity，則結果是 Infinity 。</li>
          <li>如果是 -Infinity + (-Infinity)，則結果是 -Infinity。</li>
          <li>如果是 Infinity + (-Infinity)，則結果是 NaN 。</li>
        </ul>
        <p>如果 + 運算子兩邊有至少一個是字串，則其規則如下。</p>
        <ul>
          <li>如果 + 運算子兩邊都是字串，則執行字串連接操作。</li>
          <li>如果 + 運算子兩邊只有一個是字串，則將另外的值轉為字串，再執行字串連接操作。</li>
          <li>
            如果 + 運算子兩邊有一個是物件，則呼叫 valueOf 或 toString
            方法取得值，將其轉為基底資料型態再進行字串連接。
          </li>
        </ul>
        <h3>JavaScript 函數參數傳遞</h3>
        <p>
          JavaScript
          中有參考設定值和基底資料型態設定值的區別，並了解由此引出的相關話題：深拷貝和淺拷貝。
        </p>
        <pre><code class="language-js">
let foo = 1
  const bar = value => {
  value = 2
  console.log(value) // 2
}
bar(foo)
console.log(foo) // 1

        </code></pre>
        <pre><code class="language-js">
let foo = {bar: 1}
const func = obj =>{
  obj.bar = 2
  console.log(obj.bar) // 2
}
func(foo)
console.log(foo) // { bar : 2 }
        </code></pre>
        <p>
          也就是說，如果函數參數是一個參考類型，那麼當在函數本體內修改這個參考類型參數的某個屬性值時，也將對原來的參數進行修改，因為此時函數本體內的參考位址指向了原來的參數。(簡單說就是控制記憶體位置的指向。)
        </p>
        <p>但是，如果在函數本體內直接修改對參數的參考，則情況又不一樣，範例如下。</p>
        <pre><code class="language-js">
let foo = { bar: 1}
const func = obj => {
  obj = 2
  console.log(obj) // 2
}
func(foo)
console.log(foo) // { bar: 1}
        </code></pre>
        <p>這樣的情況了解起來此較困難，分析原因歸納了幾點規則，如下：</p>
        <ul>
          <li>
            函數參數為基底資料型態時，函數本體內複製了一份參數值，任何操作都不會影響原參數的實際值。
          </li>
          <li>
            函數參數是參考類型時，當在函數本體內修改這個值的某個屬性值時，將對原來的參數進行修改。
          </li>
          <li>
            函數參數是參考類型時，如果直接修改這個值的參考位址，則相當於在函數本體內新建立了一個參考，任何操作都不會影響原參數的實際值。
          </li>
        </ul>
        <h3>cannot read property of undefined 問題解決方案</h3>
        <p>意外獲得一個空白物件或空值這樣惱人的問題是在所難免的，面對這樣的問題該怎麼辦。</p>
        <pre><code class="language-js">
const obj = {
  user: {
    posts: [
      { title: 'Foo', comments: [ 'Good one!', 'Interesting…..' ] },
      { title: 'Bar' , comments: [ 'Ok' ] }, 
      { title: 'Baz' , comments: []}
    ],
    comments: []
  }
}
        </code></pre>
        <p>
          為了能夠在物件中安全地設定值，需要驗證物件中每一個鍵的存在性。常見的處理方案有以下幾種。
        </p>
        <h4>1. 透過 && 短路運算子進行可存取性偵測。</h4>
        <p>以下為透過 &&短路運算子進行可存取性偵測的實現程式。</p>
        <pre><code class="language-js">
obj.user &&
obj.user.posts && 
obj.user.posts[0] && 
obj.user.posts[0].comments
        </code></pre>
        <h4>2. 透過 || 單元設定預設保底值。</h4>
        <p>以下為透過 || 單元設定預設保底值的實現程式。</p>
        <pre><code class="language-js">
(((obj.user || {}).posts ||{})[0]||{}).comments
        </code></pre>
        <h4>3. 使用 try...catch方法</h4>
        <p>以下為使用 try…catch 方法的實現程式。</p>
        <pre><code class="language-js">
var result try {
  result = obj.user.posts[0].comments
}
catch {
  result = null
}
        </code></pre>
        <h4>4.使用 lodash get API</h4>
        <p>以下為使用 lodash get API 的實現程式。</p>
        <pre><code class="language-js">
function get(object, path, defaultValue) {
  const result = object == null ? undefined : baseGet(object, path)
  return result === undefined ? defaultValue : result
}

function baseGet(object, path) {
  path = castPath(path, object)
  let index = 0

  const length = path.length
  while (object != null && index < length) {
    object = object[toKey(path[index++])]
  }
  return (index && index == length) ? object : undefined
}
        </code></pre>
        <p>簡易的 get 方法</p>
        <pre><code class="language-js">
const get = (p, o)=> p.reduce((xs, x) => (xs && xs[x]) ? xs[x] : null, o)

console.log(get(['user', 'posts', 0, 'comments'], obj)) 
// ['Good one!','Interesting...' ]

console.log(get(['user', 'post', 0, 'comments'], obj])) // null
        </code></pre>
        <p>
          我們實現的方法可以接收兩個參數，第一個參數表示取得值的路徑(path)，第二個參數表示目標物件。
        </p>
        <p>同樣，為了在設計上顯得更加靈活和抽象，我們可以對方法進行柯里化，程式如下。</p>
        <pre><code class="language-js">
const get = p => o => 
    p.reduce((xs, x) =>
      (xs && xs[x]) ? xs[x] : null, o)

const getUserComments = get(['user', 'posts', 0, 'comments'])

console.log(getUserComments(obj))
// [ 'Good one!','Interesting...' ]

console.log(getUserComments({user:{posts:[]}}))
// null
        </code></pre>
        <p>
          TC39 中有一個新的提案，支援
          console.log(obj?.user?.posts[0]?.comments)，由此可見，JavaScript 語言也在不斷演進。
        </p>
        <p>
          目前已經實裝。可以參考章節：
          <a href="14-4.html">14-4 Operators-Optional chaining (?.)</a>
        </p>
        <h3>type.js 原始程式解讀</h3>
        <p>
          type.js 是由顏海鏡撰寫的用於判斷資料類型的方法函數庫，其相容 IE6
          瀏覽器，靈活運用了多種判斷資料類型方式。以下是其實現程式。
        </p>
        <pre><code class="language-js">
const toString = Object.prototype.toString
export function type(x, strict = false) {
  strict = !!strict
  // fix typeof null = object
  if (x === null) {
    return 'null'
  }
  const t = typeof x
  // number string boolean undefined symbol
  if (t !== 'object') {
    return t
  }
  
  let cls
  let clsLow
  try {
    cls = toString.call(x).slice(8, -1)
    clsLow = cls.toLowerCase()
  } catch (e) {
    // IE覽器下的 activex 物件
    return 'object'
  }
  if (clsLow !== 'object') {
    // 區分 String() 和 new String()
    if (strict && (clsLow === 'number' || clsLow === 'boolean' || clsLow === 'string')) {
      return cls
    }
    return clsLow
  }
  if (x.constructor == Object) {
    return clsLow
  }
  // Object.create(null)
  try {
    // __proto__ 部分的早期Firefox瀏覽
    if (Object.getPrototypeof(x) === null || x.__proto__ === null) {
      return 'object'
    }
  } catch (e) {
    // 瀏覽器下無Object.getPrototypeOf會顯示出錯
  }
  // function A() {}; new A
  try {
    const cname = x.constructor.name
    if (typeof cname === 'string') {
      return cname
    }
  } catch (e) {
    //無constructor
  }
  // function A() {}; A.prototype. constructor = null; new A
  return 'unknown'
}
        </code></pre>
        <p>以上程式中的關鍵點有以下幾個。</p>
        <ul>
          <li>透過 x === null 來判斷 null 類型。</li>
          <li>
            對於 typeof x 不為 object 的情況，直接傳回 typeof x的結果，這時可以判斷其是否為
            number、string、boolean、undefined、symbol 類型。
          </li>
          <li>
            對於其他情況，瀏覽器為 IE6 以上版本時，使用 Object.prototype.toString
            方法進行資料類型判斷。
          </li>
          <li>
            相容性處理，舉例來說，對於不支援 Object.prototype.toString 方法的情況，會傳回
            object。對於其他相容性處理，此處不再一一多作說明。
          </li>
        </ul>
        <p>
          這裡特別注意一下 Object,prototype.toString
          方法，該方法確實可以稱得上是「終極方案」，它最後會傳回一個格式形如 [object
          XXXX]的結果，這個結果中的 XXXX
          部分就是我們需要的變數資料類型，因此對傳回結果使用，slice(8, -1)方法，切分出結果中的XXXX
          部分，就可以更加方便地獲得結果，程式如下。
        </p>
        <pre><code class="language-js">
Object.prototype.toString.call(true).slice(8,-1)
// "Boolean"
        </code></pre>
        <pre><code class="language-js">

        </code></pre>
        <pre><code class="language-js">

        </code></pre>
        <pre><code class="language-js">

        </code></pre>
      </article>
    </main>
  </body>
  <script type="module" src="./js/main.js"></script>
  <script></script>
</html>