好程式設計師web前端教程之JS繼承實現方式解析

　　 好程式設計師 web 前端教程 之JS 繼承實現方式解析 ， JS 是 Web 前端三要素之一，也是每一個初學前端的同學遭遇的第一條攔路虎。很多人反應 JS 學習不易，各類知識點概念及應用常常讓人抓耳撓腮。在接下來的 北京 Web 前端進階課中， 好程式設計師 小編就給大家簡單介紹一下JS 的繼承方式。

 

　　什麼是繼承?

　　繼承就是讓一個型別( 可以透過建構函式或者 class 來定義 ) 的物件能夠訪問另外一個型別的屬性和方法，它是類和類之間的一種關係，通常說子類繼承父類。但這裡容易出現一個誤區：認為例項繼承了某個類 , 某人有響應的屬性和方法是因為他繼承人類，這種說法是錯誤。

　　實現繼承的方式有很多種，本次課程中小編給大家分享四種：藉助建構函式實現繼承、原型繼承、組合繼承、ES6 繼承。

　　1 、藉助建構函式實現繼承

　　function Person(name,age){ // 定義了一個父類

　　this.name = name;

　　this.age = age;

　　this.sayHello = function(){

　　console.log(this.name);

　　}

　　}

　　function Male(name,age){ // 定義了一個子類 男性類

　　// 繼承父類，讓子類具有相應的屬性和方法

　　//call 或者 apply 的用法

　　// 建構函式里的 this 指向例項

　　Person.call(this,name,age);

　　this.hx = "true";// 除了繼承過來的屬性和方法，還能新增針對於子類自身的屬性和方法

　　}

　　function FeMale(name,age){ // 定義了一個子類 女性類

　　Person.call(this,name,age);

　　this.hj = "no";

　　}

　　var male = new Male("chenjinfeng",20);

　　male.sayHello();

　　2 、原型繼承

　　function Person(){

　　}

　　Person.prototype.name = "john";

　　Person.prototype.age = 20;

　　Person.prototype.sayHello = function(){

　　console.log(this.name);

　　}

　　function Male(){

　　}

　　Male.prototype = new Person();//Male.prototype.__proto__ == Person.prototype 透過這行程式碼就實現繼承

　　// 查詢流程 male 的 __proto__(Male.prototype) 上面有沒有 sayHello,

　　// 如果沒有繼續查詢 male.__proto__.__proto__(Male.prototype.__proto__) 就是查詢 Person.prototype

　　var male = new Male();

　　male.sayHello();

　　3 、組合繼承

　　function Person(name,age){

　　this.name = name;

　　this.age = age;

　　}

　　Person.prototype.sayHello = function(){

　　console.log(this.name);

　　}

　　function Male(name,age){

　　Person.call(this,name,age);// 只能繼承例項屬性

　　}

　　// 只考慮繼承原型方法 是不是就可以了 讓 Male 的原型物件也有 Person 原型物件上的方法

　　/* Male.prototype = Person.prototype;

　　//sayHi 方法是我子類獨有的方法

　　Male.prototype.sayHi = function(){

　　console.log("hi");

　　}

　　var male = new Male("john",20);

　　male.sayHello();

　　var person = new Person("aa",22);

　　person.sayHi();// 完了，父類居然能訪問子類的方法，繼承徹底亂了，原因是 Male.prototype 和 Person.prototype 指向一樣，任何一方改變，都會影響另一方 */

　　for(let attr in Person.prototype){

　　Male.prototype[attr] = Person.prototype[attr];

　　}

　　Male.prototype.sayHi = function(){

　　console.log("hi");

　　}

　　var male = new Male("john",20);

　　male.sayHello();

　　male.sayHi();

　　var person = new Person("aa",22);

　　person.sayHi();

　　4 、 ES6 繼承

　　class Person{

　　constructor(name,age){

　　this.name = name;

　　this.age = age;

　　}

　　sayHello(){

　　console.log(this.name);

　　}

　　// 擴充套件，定義類方法

　　static foo(){

　　console.log(" 這是類方法，不是例項方法 ");

　　}

　　}

　　// 透過 extends 這個關鍵字實現繼承

　　class Male extends Person{

　　constructor(name,age){

　　super(name,age);//1. 建立 this 物件 2.super 指向父類的建構函式

　　this.sexy = " 男 ";// 新增子類的例項屬性

　　}

　　// 在子類的原型方法裡使用了父類的原型方法

　　sayHi(){

　　console.log("hi");

　　super.sayHello();//super 指向誰 ? 指向父類的原型物件

　　}

　　static foo1(){

　　super.foo(); //super 指向父類

　　}

　　}

　　var male = new Male("john",20);

　　//male.sayHello();

　　male.sayHi();

　　Male.foo1();