javascript 基礎攻關（二）—— 原型和原型鏈

1. 如何判斷一個變量是數組類型
2. 寫一個原型鏈繼承的例子
3. 描述new一個對象的過程

構造函數

// 聲明構造函數
function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    return this; //隱示創建
}
// 創建對象
var f =new Foo('yao',25);

構造函數擴展

• var a = {} 其實是 var a = new Object()的語法糖
• var a = [] 其實是 var a = new Array()的語法糖
• function Foo(){...} 其實是 var Foo = new Function(){...}
• 使用instanceof判斷一個函數是否是一個變量的構造函數

原型規則

1. 所有的引用類型（數組、對象、函數），都具有對象的特性，即可以自由擴展屬性（除了null）
2. 所有的引用類型（數組、對象、函數），都有一個__proto__屬性（隱式原型），屬性值是一個普通的對象
3. 所有的函數，都有一個prototype屬性（顯式原型），屬性值也是一個普通的對象
4. 所有的引用類型（數組、對象、函數），__proto__屬性指向它的構造函數的prototype屬性值
5. 當試圖得到一個對象的屬性時，如果這個對象本身沒有這個屬性，那么它回去它的__proto__(即它的構造函數的prototype)中尋找

原型鏈

// 聲明構造函數
function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    return this; //隱示創建
}
// 創建對象
var f =new Foo('yao',25);
f.toString()    要去f.__proto__.__proto__中查找，也就是它的構造函數的object中找

2-8原鏈-0002.png

instanceof

f instanceof Foo的判斷邏輯是:

1. f 的 __proto__ 一層一層往上，能否對應到 Foo.prototype
2. 再試著判斷 f instanceof Object

題目解答：

1. 如何判斷一個變量是數組類型

```js
    var arr=[];
    arr instanceof Array;   //true
    typeof arr;     //Object, typeof 是無法判斷數組的
```
    這里要使用`instanceof` 而不是`typeof`，`typeof`判斷出來是Object。

2. 寫一個原型鏈繼承的例子

   ```js
   function Elem(id) {
       this.elem = document.getElementById(id)
   }
   
   Elem.prototype.html = function(val) {
       var elem = this.elem;
       if (val) {
           elem.innerHtml = val;
           return this; //鏈式操作
       } else {
           return elem.innerHtml;
       }
   }
   Elem.prototype.on = function(type, fn) {
       var elem = this.elem;
       elem.addEventListener(type, fn)
   }
   
   // 使用
   var div1 = new Elem('div1');
   console.log(div1.html());
   div1.html("<p>hello</p>");
   div1.on('click', function() {
       alert('clicked');
   })
   
   ```
   

3. 描述new一個對象的過程

   1. 創建一個新對象
   2. this指向這個新對象
   3. 執行代碼，對this賦值
   4. 返回this（隱式返回）

補充：

image.png