javascript 基礎(chǔ)攻關(guān)（二）—— 原型和原型鏈
- 如何判斷一個變量是數(shù)組類型
- 寫一個原型鏈繼承的例子
- 描述new一個對象的過程
構(gòu)造函數(shù)
// 聲明構(gòu)造函數(shù)
function Foo(name, age) {
this.name = name;
this.age = age;
this.class = "class-1";
return this; //隱示創(chuàng)建
}
// 創(chuàng)建對象
var f =new Foo('yao',25);
構(gòu)造函數(shù)擴(kuò)展
- var a = {} 其實是 var a = new Object()的語法糖
- var a = [] 其實是 var a = new Array()的語法糖
- function Foo(){...} 其實是 var Foo = new Function(){...}
- 使用
instanceof判斷一個函數(shù)是否是一個變量的構(gòu)造函數(shù)
原型規(guī)則
- 所有的引用類型（數(shù)組津函、對象、函數(shù)）牍汹，都具有對象的特性悠鞍，即可以自由擴(kuò)展屬性（除了
null） - 所有的引用類型（數(shù)組尚蝌、對象择浊、函數(shù)）汰现，都有一個
__proto__屬性（隱式原型）氛谜，屬性值是一個普通的對象 - 所有的函數(shù)指么，都有一個
prototype屬性（顯式原型）酝惧，屬性值也是一個普通的對象 - 所有的引用類型（數(shù)組、對象伯诬、函數(shù)）晚唇，
__proto__屬性指向它的構(gòu)造函數(shù)的prototype屬性值 - 當(dāng)試圖得到一個對象的屬性時，如果這個對象本身沒有這個屬性姑廉，那么它回去它的
__proto__(即它的構(gòu)造函數(shù)的prototype)中尋找
原型鏈
// 聲明構(gòu)造函數(shù)
function Foo(name, age) {
this.name = name;
this.age = age;
this.class = "class-1";
return this; //隱示創(chuàng)建
}
// 創(chuàng)建對象
var f =new Foo('yao',25);
f.toString() 要去f.__proto__.__proto__中查找缺亮，也就是它的構(gòu)造函數(shù)的object中找
2-8原鏈-0002.png
instanceof
f instanceof Foo的判斷邏輯是:
- f 的
__proto__一層一層往上，能否對應(yīng)到 Foo.prototype - 再試著判斷 f instanceof Object
題目解答：
- 如何判斷一個變量是數(shù)組類型
```js
var arr=[];
arr instanceof Array; //true
typeof arr; //Object, typeof 是無法判斷數(shù)組的
```
這里要使用`instanceof` 而不是`typeof`桥言，`typeof`判斷出來是Object萌踱。
-
寫一個原型鏈繼承的例子
```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; //鏈?zhǔn)讲僮? } 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'); }) ``` -
描述new一個對象的過程
- 創(chuàng)建一個新對象
- this指向這個新對象
- 執(zhí)行代碼，對this賦值
- 返回this（隱式返回）
補(bǔ)充：
image.png
