js5プロトタイプチェーンと継承を練習する

プロトタイプチェーン

プロトタイプチェーンを説明する前に、オブジェクトを作成したときに何が起こるかを見てみましょう。次に、次のコードが何をするかを分析してみましょう。

new Date();

このコードの機能は次のとおりです
。1。新しいオブジェクトを作成します
2.このオブジェクトをプロトタイプチェーンに接続します
3.これをバインドします
4.このオブジェクトを返します

さて、プロトタイプチェーンの説明を始めます。では、プロトタイプチェーンとは何ですか?
各オブジェクトには独自の[[proto]]プロパティがあることは誰もが知っています。このプロトは、たとえば、オブジェクトのコンストラクターのプロトタイプオブジェクトを指します。

    var date = new Date()
    console.log(date.__proto__ == Date.prototype) // true

ここにキーがあります。プロトタイプオブジェクトもオブジェクトであるため、[[proto]]属性もあり、そのproto属性はObject.prototypeを指します。

    console.log(Date.prototype.__proto__ == Object.prototype) // true

日付ではないプロパティまたはメソッドにアクセスすると、日付自体にプロパティまたはメソッドがない可能性があります。その場合は、プロトタイプオブジェクトに移動して検索します。そうでない場合は、プロトタイプのプロトタイプに戻って、Object.prototype.proto =が見つかるまで検索します。 null(編集者の理由により、下線は書き込まれません)。これがプロトタイプチェーンです。

継承
プロトタイプについて説明した、jsが継承を実装する方法を見てみましょう。
最初のタイプ:オブジェクトの偽装、欠点:プロトタイプのプロパティを継承できません

    function Parent(params){
    
    
        this.name = params||'父亲';
        this.run = function run(){
    
    
            console.log(`${
      
      this.name}:在跑`)
        }
    }
    Parent.prototype.eat = function(){
    
    
        console.log('吃饭');
    }
    function Child(){
    
    
        Parent.call(this,"儿子")
    }
    var child =new Child();
    child.run()
    child.eat()

2番目のタイプ:プロトタイプの継承、パラメーターを渡すことは困難であり、子オブジェクトのプロパティを介して親オブジェクトのプロパティを変更することは不可能です

    function Parent(params){
    
    
        this.name = params||'父亲';
        this.run = function run(){
    
    
            console.log(`${
      
      this.name}:在跑`)
        }
    }
    Parent.prototype.eat = function(){
    
    
        console.log('吃饭');
    }
    function Child(){
    
    
        this.age = 20;
    }
    Child.prototype = new Parent;
    var child = new Child();
    child.run()
    child.eat()

3番目のタイプ:オブジェクトの偽装+プロトタイプの継承の推奨事項は、最初の2つを組み合わせて、最初の2つの欠陥を補います

    function Parent(params){
    
    
        this.name = params||'父亲';
        this.run = function run(){
    
    
            console.log(`${
      
      this.name}:在跑`)
        }
    }
    Parent.prototype.eat = function(){
    
    
        console.log('吃饭');
    }
    function Child(){
    
    
        this.age = 20;
        Parent.call(this,'儿子');
    }
    Child.prototype = new Parent;
    var child = new Child();
    child.run()
    child.eat()

本質的に上記の継承であるes6の継承を見てみましょうが、これは単なる構文上の砂糖です。

    class Parent{
    
    
        constructor(name){
    
    
            this.name = name
            console.log('父亲:'+this.name);
        }
    }
    class Child extends Parent{
    
    
        constructor(name,age){
    
    
            super(name);
            this.age = age;
            console.log('儿子:'+this.age);
        }
    }

    var child = new Child('zs',20)

この時点で、プロトタイプチェーンと継承は基本的に習得され、次のステップは商品を乾かすことです。インタビューの
質問:1。プロトタイプチェーンとは何かを説明
します。2。es5継承を実装する方法は
OKです。プロトタイプチェーンはここに記録されます。間違って書いたかどうか理解はプライベートメッセージまたはコメントにすることができます。私が記録したプロトタイプチェーンが理解に役立つと思うなら、それを気に入ってください、カニ。

おすすめ

転載: blog.csdn.net/weixin_43889562/article/details/108027595