JS繼承實現方式有哪些

這篇文章主要介紹“JS繼承實現方式有哪些”，在日常操作中，相信很多人在JS繼承實現方式有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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();

到此，關于“JS繼承實現方式有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！