JavaScript學習--6__原型物件、原型鏈
阿新 • • 發佈：2018-12-19
先出總結：
##1、 每一個函式資料型別（普通函式、類）都有一個天生自帶的屬性：prototype（原型），並且這個屬性是一個物件資料型別的值。
##2、 prototype上有一個屬性constructor（建構函式），屬性值是當前函式本身。
##3、 每一個物件也天生自帶屬性__proto__，他的值是當前例項的原型（prototype）。
JavaScript物件是一個屬性的集合，另外有一個隱式的物件：原型物件。
原型的值可以是null或者一個物件。
由於原型物件本身也是物件，它也有自己的原型，而它自己的原型物件又可以有自己的原型，這樣就組成了一條鏈，也就是原型鏈。
（說得很繞，其實就是 A的原型是B，B也是個物件它也有原型物件C，然後ABC就組成了原型鏈。)
Javascript在訪問物件的屬性時，如果在物件本身中沒有找到，則會去原型鏈中查詢，如果遍歷整個鏈依舊沒有找到屬性，則返回undefined
如果沒有顯示地宣告自己的__proto__屬性，這個值預設為Object.prototype，而Object.prototype的__proto__屬性的值為null，這也標誌著原型鏈的終結。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原型物件、原型鏈</title>
</head>
<body>
<script>
var base = {
name:'base',
getInfo:function () {
return this.name;
}
};
var ext1={
id:0,
__proto__:base
};
var ext2 = {
id:5,
__proto__:base
};
console.log(ext1.id);
console.log(ext1.getInfo());
console.log(ext2.id);
console.log(ext2.getInfo());
</script>
</body>
</html>以上程式碼中base就是ext1、ext2的原型 輸出如下
構造器
下面的例子以函式Task為一個構造器建立了2個例項task1 task2。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NoName</title>
</head>
<body>
<script>
function Task(id) {
this.id = id;
}
Task.prototype.status = 'STOPPED'; //為Task的原型新增屬性
Task.prototype.execute = function (args) {
return 'execute task_' + this.id + '[' + this.status + ']' + ':'+ args;
};
var task1 = new Task(1);
var task2 = new Task(2);
task1.status = 'ACTIVE';
task2.status = 'STARTING';
console.log(task1.execute('task1'));
console.log(task2.execute('task2'));
</script>
</body>
</html>
輸出結果如下
它的原型鏈如下
函式Task是函式型別有prototype，其他都是物件型別沒有prototype。