国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  行業資訊  > JavaScript全解析——繼承

JavaScript全解析——繼承

來源:千鋒教育
發布人:zyh
時間: 2023-05-25 14:16:00 1684995360

  繼承

  ●要知道什么是繼承

  ●要知道繼承的方式有哪些

  ●每種的繼承方式是如何實現的

JavaScript全解析——繼承

  什么是繼承

  ●繼承關系出現在構造函數和構造函數之間

  ●當構造函數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)

 

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區
  • 南昌校區
  • 哈爾濱校區