ES6之前並沒有給我們提供extends繼承。我們可以通過建構函式+原型物件模擬實現繼承，被稱為組合繼承。
call 方法，繼承前必須知道如何用
- call() 可以呼叫函式
fn.call();
- call() 可以改變這個函式的this指向 此時這個函式的this 就指向了o這個物件
程式碼
<body>
<script>
// call 方法
function fn(x, y) {
console.log('我想喝手磨咖啡');
console.log(this);
console.log(x + y);
}
var o = {
name: 'andy'
};
fn.call(o, 1, 2);
</script>
</body>
執行結果
借用父建構函式繼承屬性
- 父建構函式
function Father(uname, age) {
// this 指向父建構函式的物件例項
this.uname = uname;
this.age = age;
}
2 .子建構函式
function Son(uname, age, score) {
// this 指向子建構函式的物件例項
Father.call(this, uname, age);
this.score = score;
}這裡this 指向son 我把father的屬性指向 son。
那麼son就可以使用father 的 uname 和 age屬性了
this 自己 uname age 傳給父類的引數
全文程式碼：
<body>
<script>
// 借用父建構函式繼承屬性
// 1. 父建構函式
function Father(uname, age) {
// this 指向父建構函式的物件例項
this.uname = uname;
this.age = age;
}
// 2 .子建構函式
function Son(uname, age, score) {
// this 指向子建構函式的物件例項
// 這裡this 指向son 我把father的屬性指向 son。
// 那麼son就可以使用father 的 uname 和 age屬性了
// this 自己 uname age 傳給父類的引數
Father.call(this, uname, age);
this.score = score;
}
var son = new Son('大冪冪', 18, 100);
console.log(son);
</script>
</body>
執行結果
借用原型物件繼承方法
依然是上面的程式碼。
我們新寫 一個原型物件的公共方法 money
Father.prototype.money = function() {
console.log(100000);
};
那麼問題來了，進行 console.log（） 呼叫。
結果如下：
發現 我們這個函式中，沒有money()
這是因為，你的 money 並不是在 father 函式內部。所以沒有給繼承過來。
那麼如何繼承呢？
- 直接賦值。 可以這麼做，但是這樣直接賦值會有問題,如果修改了子原型物件,父原型物件也會跟著一起變化
- 借用原型物件。整一個公共的然後再用，從而實現繼承的效果。
借用原型物件實現程式碼
<body>
<script>
// 借用父建構函式繼承屬性
// 1. 父建構函式
function Father(uname, age) {
// this 指向父建構函式的物件例項
this.uname = uname;
this.age = age;
}
Father.prototype.money = function() {
console.log(100000);
};
// 2 .子建構函式
function Son(uname, age, score) {
// this 指向子建構函式的物件例項
Father.call(this, uname, age);
this.score = score;
}
// Son.prototype = Father.prototype; 這樣直接賦值會有問題,如果修改了子原型物件,父原型物件也會跟著一起變化
Son.prototype = new Father();
// 如果利用物件的形式修改了原型物件,別忘了利用constructor 指回原來的建構函式
Son.prototype.constructor = Son;
// 這個是子建構函式專門的方法
Son.prototype.exam = function() {
console.log('孩子要考試');
}
var son = new Son('大冪冪', 18, 100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);
</script>
</body>截圖：
本作品採用《CC 協議》，轉載必須註明作者和本文連結