js繼承的幾種方法理解和程式碼演示
阿新 • • 發佈:2018-12-08
1、屬性繼承 :call 、apply:不建議使用浪費記憶體。
function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.eat = function(){ console.log("正在吃飯") } Person.prototype.sleep = function(){ console.log("正在睡覺") } function Man(larynx,beard,name,age,sex,){ Person.call(this,name,age,sex) this.larynx = larynx; this.beard = beard; } Man.prototype.work = function(){ console.log('111') } var songlei = new Man(10,20); console.log(songlei); // Man{ // age: undefined // beard: 20 // larynx: 10 // name: undefined // sex: undefined// }
2、原型繼承:
缺點:原型繼承會汙染父級 function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.eat = function(){ console.log("正在吃飯") } Person.prototype.sleep = function(){ console.log("正在睡覺") }function Man(larynx,beard,name,age,sex,){ Person.call(this,name,age,sex) this.larynx = larynx; this.beard = beard; } Man.prototype = Person.prototype; Man.prototype.work = function(){ console.log('111') } var aaa = new Man(10,20); console.log(aaa); // Man{ // age: undefined // beard: 20 // larynx: 10 // name: undefined // sex: undefined // __proto__: // eat: ƒ() // sleep: ƒ() // work: ƒ() // constructor: ƒ Person(name, age, sex) // } var p1 = new Person() console.log(p1) // Person{ // age: undefined // name: undefined // sex: undefined // __proto__: // eat: ƒ() // sleep: ƒ() // work: ƒ() // constructor: ƒ Person(name, age, sex) // }
3、原型拷貝:
function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.eat = function(){ console.log("正在吃飯") } Person.prototype.sleep = function(){ console.log("正在睡覺") } function Man(larynx,beard,name,age,sex,){ Person.call(this,name,age,sex) this.larynx = larynx; this.beard = beard; } for(var key in Person.prototype){ Man.prototype[key] = Person.prototype[key] } Man.prototype.work = function(){ console.log('111') } var aaa = new Man(10,20); console.log(aaa); // Man { name: undefined, age: undefined, sex: undefined, larynx: 10, beard: 20 } // __proto__: // eat: ƒ() // sleep: ƒ() // work: ƒ() // constructor: ƒ Man(larynx, beard, name, age, sex) var p1 = new Person() console.log(p1) // Person { name: undefined, age: undefined, sex: undefined } // __proto__: // eat: ƒ() // sleep: ƒ() // constructor: ƒ Person(name, age, sex)
4、原型鏈繼承:
原型鏈: 由__proto__組成的鏈條叫做原型鏈 原型鏈繼承是不推薦使用的 因為會多了好多無用的屬性 而且還少了constructorfunction Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.eat = function(){ console.log("正在吃飯") } Person.prototype.sleep = function(){ console.log("正在睡覺") } function Man(larynx,beard,name,age,sex,){ Person.call(this,name,age,sex) this.larynx = larynx; this.beard = beard; } // __proto //__proto__ Man.prototype = new Person(); Man.prototype.work = function(){ console.log('111') } var aaa = new Man(10,20); console.log(aaa); // Man{ // age: undefined // beard: 20 // larynx: 10 // name: undefined // sex: undefined // __proto__: Person // age: undefined // name: undefined // sex: undefined // work: ƒ() // } var p1 = new Person() console.log(p1) // Person{ // age: undefined // name: undefined // sex: undefined // __proto__: // eat: ƒ() // sleep: ƒ() // constructor: ƒ Person(name, age, sex) // }
5、寄生繼承:
缺點:增加了無用的函式
function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.type="人類"; Person.prototype.eat = function(){ console.log("正在吃飯") } Person.prototype.sleep = function(){ console.log("正在睡覺") } function Man(larynx,beard,name,age,sex,){ Person.call(this,name,age,sex) this.larynx = larynx; this.beard = beard; } //建立了一個寄生器 function fn(){}; //寄生器的原型物件 = 人類的原型物件 fn.prototype = Person.prototype; //原型鏈繼承 寄生器的例項物件 Man.prototype = new fn(); Man.prototype.constructor = Man; Man.prototype.work = function(){ console.log('111') } var aaa = new Man(10,20); console.log(aaa); // Man{ // age: undefined // beard: 20 // larynx: 10 // name: undefined // sex: undefined // __proto__: Person // constructor: ƒ Man(larynx, beard, name, age, sex) // work: ƒ() // }
6、混合繼承:我最喜歡的一種方式
function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.type="人類"; Person.prototype.eat = function(){ console.log("正在吃飯") } Person.prototype.sleep = function(){ console.log("正在睡覺") } function Man(larynx,beard,name,age,sex,){ Person.call(this,name,age,sex) this.larynx = larynx; this.beard = beard; } //Man.prototype = Object.create(Person.prototype); Man.prototype = { constructor:Man, __proto__:Person.prototype } Man.prototype.work = function(){ console.log('111') } var aaa = new Man(10,20); console.log(aaa); // Man{ // age: undefined // beard: 20 // larynx: 10 // name: undefined // sex: undefined // __proto__: Person // constructor: ƒ Man(larynx, beard, name, age, sex) // work: ƒ() // } var p1 = new Person(); console.log(p1) // Person{ // age: undefined // name: undefined // sex: undefined // __proto__: // eat: ƒ() // sleep: ƒ() // type: "人類" // constructor: ƒ Person(name, age, sex) // }
7、Es6繼承
ES6類的語法 1、宣告類的時候用 class class 類名{ constructor(){ 屬性 } 方法 }class Person{ constructor(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } eat(){} sleep(){} } class Man extends Person{ constructor(larynx,beard){ //實現繼承必須使用super super(); this.larynx = larynx; this.beard = beard; } work(){} } var aaa = new Man() console.log(aaa) // Man{ // age: undefined // beard: undefined // larynx: undefined // name: undefined // sex: undefined // __proto__: Person // constructor: class Man // work: ƒ work() // }