Jsの継承を実現する7つの方法を深く掘り下げます.

11266 ワード

7の中js継承の方法を紹介します.
JavaScriptは本当に対象言語ではないと考えている人もいます.古典的な対象言語では、クラスのオブジェクトを定義する傾向があります.次に、どのような種類を継承するかを簡単に定義できます.プロトタイプチェーンで継承します.
一、プロトタイプチェーン継承
//        
function Person(name,age) {
    this.name=name;
    this.age=age;
}
Person.prototype.show=function() {
    console.log(`  ${this.name},   ${this.age}`)
}
function Worker(name, age, job) {
    Person.call(this, name, age);
    this.job=job;
}
//      Woker         ,       ,           
Worker.prototype = new Person();
//       
Worker.prototype.showJob=function() {
        console.log(`     ${this.job}`)
};
var mine = new Worker(' ', 18, '   ');
console.log(mine);
mine.show();
mine.showJob();
存在する問題:
1.サブタイプは親タイプの原型上の方法を書き換えることができます.ウォーカー.プロタイプ.プロト.show=nullはこの時Personの原型の対象の上の方法を変えました.
2.親類の私有属性と共有属性はいずれもサブクラスの共有属性となる.
3.サブタイプの原型オブジェクトに元々属性と方法があった場合、ウォーカー.prototype=new Person()後、これまでの方法は再取得できません.
 
プロトタイプリダイレクトを説明:  ウォーカー.prototype=new Person();
1.自分で開発したヒープメモリにはconstructorの属性がないため、クラスのプロトタイプ構造関数がなくなってしまいました.
2.プロトタイプがリダイレクトされた後、ブラウザがデフォルトで開発したプロトタイプのメモリはリリースされます.以前にいくつかの方法や属性が記憶されていたら、これらのものはなくなってしまいます.
 
二、構造関数を借りて継承する
function Person(name, age){
      this.name=name;
      this.age=age;
}
function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
}
var mine=new Worker(' ', 18, '    ');
console.log(mine);
利点:1.プロトタイプ鎖に対しては、構造関数を借りることによって、サブタイプの構造関数において親タイプの構造関数にパラメータを伝えることができる大きな利点がある.
短所:1、父の構造関数の属性しか継承できません.
2、コンストラクタの多重化は実現できません.(毎回使うたびに呼び出します)
3、各新しい例には父の構造関数のコピーがあり、太っています.
 
三、組合せ相続(プロトタイプチェーンの継承と借用構造関数の継承)(一般)
//     
function Person(name,age) {
    this.name=name;
    this.age=age;
}
Person.prototype.show=function() {
        console.log(`  ${this.name},   ${this.age}`)
}
function Worker(name, age, job) {
    Person.call(this, name, age);
    this.job=job;
}
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
Worker.prototype.showJob=function (){
    console.log(`     ${this.job}`)
};
var mine = new Worker(' ', 18, '   ');
console.log(mine);
mine.show();
mine.showJob();
ポイント:2つのモードの利点を組み合わせて、パスと多重化
利点:1、親のモデルのプロパティを継承することができますが、多重化することができます.
2、各新しい例に導入された構造関数の属性は私有である.
欠点:父の構造関数(メモリ消費)を2回呼び出したが、子の構造関数は原型の父の構造関数に代わる.
 
四、原型式継承
//      
function Woker(o){
    function Empty(){};
    Empty.prototype = o;
    return new Empty();
}
var mine = {
    name: 'jia',
    age: 18,
    job: '   '
};
var anotherMine =Woker(mine);
ポイント:オブジェクトを一つの関数で包んで、この関数の呼び出しを返します.この関数は属性を任意に加えることができるインスタンスまたはオブジェクトになります.object.creat()はこの原理です.
特徴:オブジェクトをコピーして、関数で包装します.
短所:1、あらゆる実例は原型の属性を継承します.
2、多重化は実現できません.(新しいインスタンスのプロパティは全部後に追加されます)
var woker={
    name: 'jia',
    age: 18,
    job: '   '
}
var mine = Object.create(woker);
上記と同じ原理で、ECMAScript 5はObject.create()を追加することによってプロトタイプ継承を規範化しました.
 Object.create:Object類の持ち前の持ち方を内蔵しています.
1.空のオブジェクトを作成する
 2.新しく作成した空のオブジェクトの_uプロト.最初に渡されたオブジェクトを指します.
 
五、寄生式継承
//      
function createAnother(o) {
    var person = Woker(o);
    person.show=function() {
        console.log(`  jia`)
        }
    return person;
}
var mine = {
    name: 'jia',
    age: 18,
    job: '   '
};
var anotherMine = createAnother(mine);   
ポイント:原型式の継承のために外に殻をかぶせました.
利点:カスタムタイプは作成されていません.シェルをセットしてオブジェクトに戻るだけです.この関数はプログレッシブに作成された新しいオブジェクトになります.
短所:原型を使っていないので、多重化できません.
も使用できます Object.create()方法実現
 
六、寄生組合式継承
  //       
function inheritProto(parents,child){
      var o=Object.create(parents.prototype);
       o.constructor=child;
       child.prototype=o;
}
//      
function Parents(surname){
       this.surname=surname;
}
Parents.prototype.getSurname=function(){
       console.log(this.surname);
}
//      
function Child(surname,age){
        Parents.call(this,surname);
        this.age=age;
}
inheritProto(Parents,Child);

Child.prototype.getAge=function(){
         console.log(this.age);
}
寄生组合式の継承、集寄生式の継承と组み合わせの継承の利点と一体は、タイプ継承に基づく最も効果的な方法である.YUIのYAHOO.lang.exted()方式は寄生グループの継承を採用しており、このようなモデルは初めて非常に幅広いJavaScriptライブラリに登場しました.YUIに関する詳細については、アクセスしてください.http://developer. yahoo.com/yui/
 
セブン、ES 6のクラスは継承が可能です.
class Person{
    constructor(name, age){
        this.name=name;
        this.age=age;
    }
    show(){
        alert(this.name);
        alert(this.age);
    }
}

class Worker extends Person{
    constructor(name, age, job){
        super(name, age);
        this.job=job;
    }
    showJob(){
        alert(this.job);
    }
}
let me=new Worker('jia', 18, '     ');
me.show();
me.showJob();
 はい、よくある7つのJS継承の方法を紹介しました.~