温故jsシリーズ(15)-プロトタイプ&プロトタイプチェーン&プロトタイプ継承

先端学習:教程&開発モジュール化/規範化/工程化/最適化&ツール/デバッグ&注目すべきブログ/Git&面接-先端資源まとめ
ティises斧:プロトタイプ＆プロトタイプチェーン＆プロトタイプの継承を歓迎します.
JavaScript-プロトタイプ&プロトタイプチェーン&プロトタイプ継承
JavaScriptのプロトタイプは重要な知識点であり、多くの拡張アプリケーションはプロトタイプから出発します.プロトタイプと言えば、まず簡単に関数の作成過程を説明します.前の文章はクローズドで達成類と継承用のものが原型継承です.今日は原型継承についてお話します.後の文章で更新します.
関数作成プロセス

function Xzavier() {};

1.オブジェクト(constructor属性および［Prottype］属性があります.その中の[Prottotype]属性はアクセスできず、列挙できません.2.関数(name、prototype属性があります)を作成し、プロトタイプ属性で第1ステップで作成したオブジェクトを参照します.3.変数Xzavierを作成し、関数の参照を変数Xzavierに与えます.
構造関数
コンストラクタは新しいオブジェクトを作成しながら初期化するための関数ですので、どの関数もコンストラクタになります.ただ、コードを書く時は普通頭文字で大文字で書いて、使い分けています.
原型
各関数は作成時に自動的にプロトタイプの属性を追加します.これは関数のプロトタイプです.プロトタイプは関数の属性で、ポインタのようなものです.プロトタイプは関数の作成中にJsコンパイラによって自動的に追加されます.

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}
// A    
Xzavier.age = 23;
// A         
Xzavier.prototype.sports = function() {console.log('basketball')}
Xzavier.prototype = {
    hobbit1: function() {console.log('basketball');},
    hobbit2: function() {console.log('running');}
}; 

原型チェーン
JavaScriptには、各オブジェクトに「Prottype」という属性があり、その保存されているアドレスがオブジェクトの を構成しています.［Prottype］属性は、jsコンパイラがオブジェクトの作成時に自動的に追加され、その取得値はnew演算子の右側のパラメータで決定されます.字面量の方式はnew Obejct();に変換できます.

var x = new Xzavier();
vae o = {};  //var o = new Obejct();

オブジェクトの「Prottotype」によって、他のオブジェクトに対する参照を保存し、この参照を介して属性の検索を行うことが です.
オブジェクトは、属性を検索する際に、まず自分の属性を巡回します.もしないなら、[[Prototype]]によって参照されているオブジェクトを探し続けます.もしないなら、[[Prototype]].[[Prototype]]によって参照されているオブジェクトを探し続けます.[[Prototype]].….[[Prototype]]がundefinedになるまで、順次類推します.

var str = new String('xzavier');
str

Object.prototypeの[[Prototype]]はundefinedです.

function Xzavier() {
    this.name = 'xzavier';
}
var x = new Xzavier();
x.age = 23;

console.log(x.job);  //   x job   undefined

1、xオブジェクト自体を遍歴した結果、xオブジェクト自体には、job属性2、xを見つけた[Prototype]がなく、その対応するオブジェクトXzavier.prototypeが遍歴されました.Xzavier.prototypeもjob属性がありません.3、Xzavier.prototypeオブジェクトを見つけた[Prottype]は、その対応するオブジェクトObject.prototypeを指します.Object.prototypeもjob属性4がなく、Object.prototypeの「Prottype」属性を探して、undefinedに戻ります.
関数の変数と内部関数
関数のプロトタイプチェーンを説明しましたが、ここで説明する変数と内部関数が必要です.
プライベート変数と内部関数
プライベートメンバ、すなわち関数内部の変数や関数を定義します.外部はアクセスできません.

function Xzavier(){
    var name = "xzavier"; //    
    var sports = function() {console.log('basketball')}; //     
}
var x = new Xzavier();
x.name;  //undefined

訪問するには、インターフェースを提供する必要があります.

function Xzavier(){
    var name = "xzavier"; //    
    var sports = function() {console.log('basketball')}; //    
    return{
        name: name,
        sports: sports
    }
}
var x = new Xzavier();
x.name;  //"xzavier"

静的変数と内部関数
ポイント演算子で定義された静的変数と内部関数は、インスタンスにアクセスできない変数と内部関数です.自分で訪問するしかないです.

function Xzavier(){
    Xzavier.name = "xzavier"; //    
    Xzavier.sports = function() {console.log('basketball')}; //     
}
Xzavier.name; //"xzavier"
var x = new Xzavier();
x.name;  //undefined

インスタンス変数と内部関数
インスタンスによって使用される属性と方法をthisで定義します.

function Xzavier(){
    this.name = "xzavier"; //    
    this.sports = function() {console.log('basketball');}; //     
}
Xzavier.name; //undefined
var x = new Xzavier();
x.name;  //"xzavier"

プロトタイプチェーン引継ぎ
プロトタイプチェーンがあれば、プロトタイプチェーンによって継承が可能です.

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}

function X() {};

Xの原型X.prototypeの原型自体はObjectの対象です.F 12コンソール入力関数を開き、X.prototypeを印刷する.

Object {
    constructor: X()
    __proto__: Object
}

prototype自体はObjectオブジェクトの例ですので、そのプロトタイプチェーンはObjectのプロトタイプを指しています.
X.prototype=Xzavier.prototype

X.prototype = Xzavier.prototype;

これはXのプロトタイプをXzavierのプロトタイプに向けたものに相当します.これはただXzavierのprototype方法を継承しただけで、Xzavierの中のカスタム方法は引き継がれません.

X.prototype.love = "dog";

これでXzavierのプロトタイプも変わるので、基礎がよくないです.
X.prototype=new Xzavier()

X.prototype = new Xzavier();

このように、Xのプロトタイプ、すなわちX.prototypeはオブジェクトに相当するXzavierの例が生成される.

{
    name: "xzavier", 
    sex: "boy", 
    job: "jser",
    [[Prototype]] : Xzavier.prototype
}

このようにXzavierの原型をX.prototype.[Prottotype]というオブジェクト属性によって保存し、プロトタイプのリンクを構成します.しかし、このようにXが発生したオブジェクトの構造関数は変更されました.Xにはconstructor属性がないので、プロトタイプチェーンからXzavier.prototypeを見つけて、constructor:Xzavierを読みだします.

var x = new X;
console.log(x.constructor);

  ：
Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}

マニュアル修正:

X.prototype.constructor = X;

これはXの原型で、もう一つの属性のconstructorがあり、Xを指しています.これでOKです

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}

function X(){}
X.prototype = new Xzavier();
var x = new X()
x.name  // "xzavier"

[[Prototype]]，__proto__，prototype私たちがよく出会う[[Prototype]]，__proto__，prototypeについて:
私たちはコンソールでvar str = new String('xzavier')を印刷して、属性を調べてみると、__proto__しか見えないので、機能しているのは__proto__で、__proto__は対象の内蔵属性で、各オブジェクトにある属性ですが、この属性は標準的ではないので、直接使用することを勧めません.しかし、私たちのプロトタイプチェーンは__proto__に基づいています.構造関数によって得られた例の__proto__属性は、文中で私たちが見たように、対応するプロトタイプオブジェクトString.prototypeに向けられている.var str = new String('xzavier')は隠し属性であり、このオブジェクトのプロトタイプを指す.ほぼ各オブジェクトには[[Prototype]]属性があります.[[prototype]]は、各関数オブジェクトが持つ属性であり、プロトタイプオブジェクトを指し、プロトタイプオブジェクトが属性および方法を追加されると、対応するコンストラクタによって作成されたインスタンスは、prototype上の属性および方法を継承し、これもコード内でしばしば遭遇するものである.コンストラクタがインスタンスを生成すると、その対応するプロトタイプオブジェクトのconstructorを介して対応するコンストラクタオブジェクトにアクセスする.したがって、私たちが継承した例はしばしばconstructorがなく、プロトタイプチェーンを通して検索するだけで、私たちに錯覚を起こさせます.このシリーズのプロトタイプチェーンを参照してください.
ハスOwnProperty
hasOwnPropertyはObject.prototypeの一つの方法であり、オブジェクトがプロトタイプチェーンの属性ではなくカスタム属性を含むかどうかを判断する.ハスOwnPropertyはJavaScriptの中で唯一の処理属性ですが、プロトタイプチェーンの関数は見つけられません.

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}
// A         
Xzavier.prototype.sports = function() {console.log('basketball');};

var x = new Xzavier();
x.name; // 'xzavier'
'sex' in x; // true

x.hasOwnProperty('job'); // true
x.hasOwnProperty('sports'); // false

オブジェクトにある属性が存在するかどうかをチェックするときには、hasOwnPropertyがオススメです.
Jsで頻繁に使用されています.ES 6は開発者のために専用のCLASSシンタックス飴を設計しました.より多くの継承方法は、新しい文章で更新されます.
せっかく週末なので、運動をするべきです.バスケットボール、運動、コードがあります.バスケットボールがあります.生活があります.長い間、肩を動かさないでいます.本当に痛いです.プログラム猿たちが元気でいることを望みます.