好程序員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();