類的聲明
1. 構造函數
function Animal() { this.name = 'name'}// 實例化new Animal()2. ES6 class
class Animal { constructor() {  this.name = 'name' }}// 實例化new Animal()類的繼承
1. 借助構造函數實現繼承
原理:改變子類運行時的 this 指向,但是父類原型鏈上的屬性并沒有被繼承,是不完全的繼承
function Parent() { this.name = 'Parent'}Parent.prototype.say = function(){ console.log('hello')}function Child() { Parent.call(this) this.type = 'Child'}console.log(new Parent())console.log(new Child())2. 借助原型鏈實現繼承
原理:原型鏈,但是在一個子類實例中改變了父類中的屬性,其他實例中的該屬性也會改變子,也是不完全的繼承
function Parent() { this.name = 'Parent' this.arr = [1, 2, 3]}Parent.prototype.say = function(){ console.log('hello')}function Child() { this.type = 'Child'}Child.prototype = new Parent()let s1 = new Child()let s2 = new Child()s1.arr.push(4)console.log(s1.arr, s2.arr)console.log(new Parent())console.log(new Child())console.log(new Child().say())3. 構造函數 + 原型鏈
最佳實踐
// 父類function Parent() { this.name = 'Parent' this.arr = [1, 2, 3]}Parent.prototype.say = function(){ console.log('hello')}// 子類function Child() { Parent.call(this) this.type = 'Child'}// 避免父級的構造函數執行兩次,共用一個 constructor// 但是無法區分實例屬于哪個構造函數// Child.prototype = Parent.prototype// 改進:創建一個中間對象,再修改子類的 constructorChild.prototype = Object.create(Parent.prototype)Child.prototype.constructor = Child// 實例化let s1 = new Child()let s2 = new Child()let s3 = new Parent()s1.arr.push(4)console.log(s1.arr, s2.arr) // [1, 2, 3, 4] [1, 2, 3]console.log(s2.constructor) // Childconsole.log(s3.constructor) // Parentconsole.log(new Parent())console.log(new Child())console.log(new Child().say())總結
以上所述是小編給大家介紹的JavaScript 面向對象(推薦)的相關知識,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
新聞熱點
疑難解答