繼承
●要知道什么是繼承
●要知道繼承的方式有哪些
●每種的繼承方式是如何實現的
什么是繼承
●繼承關系出現在構造函數和構造函數之間
●當構造函數A 的實例使用了 構造函數B 的屬性和方法
●我們就說 構造函數A 繼承自 構造函數B
○管 構造函數A 叫做子類
○管 構造函數B 叫做父類
●總結 :繼承就是獲取存在對象已有屬性和方法的一種方式
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.play = function () { console.log('玩游戲') }
// 將來我創建的 Person 的實例, 就會出現兩個屬性一個方法
const p = new Person('Jack', 18)
console.log(p)
function Student(classRoom) {
this.classRoom = classRoom
}
// 將來我創建的 Student 的實例
// 當我的 s 實例能使用 name 屬性, age 屬性 和 play 方法的時候
// 我們就說 Student 構造函數繼承自 Person 構造函數
// Student 就是 子類
// Person 就是 父類
const s = new Student(2114)
console.log(s)
繼承的方式有哪些
原型繼承
●核心: 讓子類的原型指向父類的實例
●優點:
○父類構造函數體內的屬性和原型上的方法都可以實現繼承
●缺點:
○繼承下來的屬性不在自己身上, 在自己的原型上
○一個構造函數的實例, 需要在兩個地方傳遞參數
○所有子類的實例, name 和 age 一模一樣
<script>
// 父類
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.play = function() {
console.log('玩游戲')
}
// 子類
function Student(classRoom) {
this.classRoom = classRoom
}
// 實現繼承
const p = new Person('Jack', 18)
Student.prototype = p
// 此時 s 的 __proto__ 指向誰 ?
// 指向所屬構造函數的 prototype
// 因為 Student.prototype 就是 就是 Person 的實例
// s 的 __proto__ 就是 Person 的實例
const s = new Student(2114)
console.log(s)
// 當你訪問 s 的 classRoom 成員的時候
// 自己有直接使用
console.log(s.classRoom)
// 當你訪問 s 的 name 成員的時候
// 自己沒有, 去到自己的 __proto__ 上查找
// 因為自己的__proto__ 就是 Person 的實例
// 其實就是去到 Person 的實例上查找
console.log(s.name)
// 當你訪問 s 的 play 成員的時候
// 自己沒有, 去到自己的 __proto__ 上查找
// 也就是去到 Person 的實例上查找, 發現還是沒有
// 就再去 __proto__ 上查找
// 自己的 __proto__ 的 __proto__
// Person 實例 的 __proto__
// Person 實例 的 __proto__ 就是 Person.prototype
s.play()
const s2 = new Student(2115)
console.log(s2)
</script>
借用構造函數繼承
●核心: 把父類構造函數當做普通函數調用, 并且改變其 this 指向
●優點:
○子類的所有繼承下來的屬性都在自己身上
○子類的所有參數在一個地方傳遞
○子類的所有實例都可以給繼承下來的屬性賦不一樣的值
●缺點:
○父類的原型上的方法沒有繼承下來
// 父類
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.play = function() {
console.log('玩游戲')
}
// 子類
function Student(classRoom, name, age) {
this.classRoom = classRoom
// 實現繼承
Person.call(this, name, age)
}
const s = new Student(2114, 'Jack', 18)
console.log(s)
const s2 = new Student(2115, 'Rose', 20)
console.log(s2)
組合繼承
●核心: 把原型繼承和借用構造函數繼承放在一起使用
●優點:
○都能繼承下來
○屬性在自己身上, 每一個子類實例繼承的屬性值都可以不一樣
●缺點:
○子類的原型上多了一套屬性
<script>
// 父類
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.play = function() {
console.log('玩游戲')
}
// 子類
function Student(classRoom, name, age) {
this.classRoom = classRoom
// 借用繼承
// 目的: 把屬性繼承在自己身上
Person.call(this, name, age)
}
// 原型繼承
// 目的: 繼承父類原型上的方法
Student.prototype = new Person()
// 創建子類的實例
const s = new Student(2114, 'Rose', 20)
console.log(s)
</script>
ES6類繼承
●類的繼承是ES6中提出的一種繼承方式
●這個繼承有了語法的規定,必須要按照這樣的方式來繼承
●類的繼承的實現: 兩個步驟實現繼承
○書寫子類的時候, 加上 extends 關鍵字
■class 子類 extends 父類 {}
■目的: 繼承父類原型上的方法
○在子類的 constructor 內書寫 super()
■super(實參)
■目的: 繼承父類的屬性
●注意:
○必須要書寫 super 和 extends
○在子類的 constructor 內 super 必須寫在 this.xxx 的前面(最前面)
●父類可以是構造函數,但是子類不能的構造函數因為extends和super關鍵字就是給類設計的
<script>
// 父類
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
play() {
console.log('玩游戲')
}
}
// 父類
// function Person(name, age) {
// this.name = name
// this.age = age
// }
// Person.prototype.play = function () { console.log('玩游戲') }
// 子類
class Student extends Person {
constructor(classRoom, name, age) {
super(name, age)
this.classRoom = classRoom
}
study() {
console.log('學習')
}
}
const s = new Student(2114, 'Jack', 18)
console.log(s)
class Teacher extends Person {
constructor(gender, name, age) {
super(name, age)
this.gender = gender
}
}
const t = new Teacher('男', 'Jack', 20)
console.log(t)
</script>
拷貝繼承
●利用 for in 循環遍歷對象
●把所有的內容復制一份放在子類的原型上
// 書寫 for in 循環的時候, 不光可以遍歷到對象自己身上的屬性, 也可以遍歷到原型上的屬性
// 父類
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.sayHi = function () { console.log('hello world') }
// 創建一個父類的實例
// const p = new Person('Jack', 18)
// console.log(p)
// for (let k in p) {
// console.log(k)
// }
// 子類
function Student(gender, ...arg) {
this.gender = gender
// 創建一個父類的實例
const p = new Person(...arg)
// 利用 for in 循環繼承
for (let k in p) {
// 隨著循環, k 分別是 name age 和 sayHi
Student.prototype[k] = p[k]
}
}
const s = new Student('男', 'Jack', 18)
console.log(s)
console.log(s.name)
const s2 = new Student('女', 'Rose', 20)
console.log(s2)
console.log(s2.name)
寄生式繼承
/*
寄生式繼承1
*/
// 父類
function Person(name) {
this.name = name
}
Person.prototype.sayHi = function () { console.log('hello world') }
// 子類
// 構造函數內不要寫 return
function Student() {
// 直接在子類里面 return 一個父類的實例
const p = new Person('Jack')
return p
}
// 創建一個子類的實例
// 看似得到的是 Student 的實例, 但是其實得到的還是 Person 的實例
const s = new Student()
console.log(s)
/*
寄生式繼承2 - 對寄生式繼承1 的 改造
*/
// 父類
function Person(name) {
this.name = name
}
Person.prototype.sayHi = function () { console.log('hello world') }
// 子類
// 構造函數內不要寫 return
function Student(gender) {
this.gender = gender
}
// 寄生一下 父類的原型
// Student的原型指向 Person的原型
Student.prototype = Person.prototype
// 創建一個子類的實例
// Student 自己沒有原型使用了, 直接使用 Person 的原型
const s = new Student('男')
console.log(s)
// 寄生式組合繼承
// 父類
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.sayHi = function () { console.log('hello world') }
// 實現繼承
// 借助一個第三方構造函數
function Third() {}
// 第三方構造函數去繼承 父類
// 利用寄生繼承的方式來實現
// 第三方的 原型 指向 父類的原型
Third.prototype = Person.prototype
// 將來我使用第三方創建實例的時候
const t = new Third()
// 子類
function Student(...arg) {
// 利用 call 繼承
Person.call(this, ...arg)
}
// 子類去想辦法繼承第三方的內容
// 利用原型繼承去繼承第三方內容
// 子類的原型指向第三方的實例
Student.prototype = new Third()
const s = new Student('Jack', 18)
console.log(s)
// 利用了一個自執行函數
// 自執行函數, 不需要名字的函數
;(function () {
var a = 100
console.log('你好 世界')
})()
// 子類
function Student(gender, ...arg) {
this.gender = gender
Person.call(this, ...arg)
}
// 把 第三方內容 放在自執行函數內
(function () {
function Third() {}
Third.prototype = Person.prototype
Student.prototype = new Third()
})()
const s = new Student('男', 'Jack', 18)
console.log(s)
冒充式繼承
/*
冒充繼承
+ 利用了一個淺拷貝 + 寄生繼承
*/
// 父類
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.sayHi = function () { console.log('hello world') }
const p = new Person('Jack', 18)
// 寄生繼承
function Student(gender) {
this.gender = gender
// 創建完畢實例以后, 拷貝一個父類的實例
Object.assign(this, p)
}
Student.prototype = Person.prototype
const s = new Student('男')
console.log(s)