ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript オブジェクト指向のカプセル化と継承

JavaScript オブジェクト指向のカプセル化と継承

高洛峰
高洛峰オリジナル
2017-01-04 09:36:141129ブラウズ

jsオブジェクト指向におけるカプセル化と継承について整理してみましょう。

1. カプセル化
js でカプセル化を実装するには、いくつかの方法があります。

1.1 オリジナルモード生成オブジェクト
オブジェクトにメンバーを直接書き込んで関数で返します。 欠点: パターンのインスタンスを確認するのが困難です。

コード:

       function Stu(name, score) {
            return {
                name: name,
                score: score
            }
        }
        var stu1 = Stu("张三", 80);
        var stu2 = Stu("李四", 90);
        console.log(stu1.name); // 张三

1.2 構築パターンオブジェクトの生成

JS は、コンストラクターを使用してオブジェクトを生成するためのパターンを提供するのに役立ちます。いわゆる「コンストラクター」は実際には通常の関数ですが、この変数は内部で使用されます。 new キーワードを使用してコンストラクターのインスタンスを生成すると、この変数はインスタンス オブジェクトにバインドされます。

コードに直接:

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.name + "/" + stu2.score); // 张三  90
        console.log((stu1.constructor == Stu) + "/" + (stu2.constructor == Stu)); // true  true
        console.log((stu1 instanceof Stu) + "/" + (stu2 instanceof Stu)); // true  true

js コンストラクターによって生成されたオブジェクトが、C# のクラスによって生成されたオブジェクトとまったく同じであることを確認するのは難しくありません。どちらもテンプレートを使用してオブジェクトのメンバーを定義し、新しいメソッドを通じてそれらをインスタンス化します。キーワード。

C# コードを使用して同じ Stu オブジェクトを生成します

Class Stu
{
  public string name;
  public double score;                    
}

OK、これで基本的なオブジェクトがここにあります。 したがって、すべてのオブジェクトに共通で、このメソッドの作成を 1 回だけ許可するメソッドが必要になります。 (object newで繰り返し作成されない)どうすればいいでしょうか? C# では静的メンバーを使用できることは誰もが知っています。では、js でそれを行うにはどうすればよいでしょうか?

1.3 プロトタイプモード

jsでは、各コンストラクターはprototype属性を持ち、このオブジェクトのすべての属性とメソッドはコンストラクターのインスタンスに継承されます。この場合、メンバーをプロトタイプに直接追加することは、C# で静的メンバーを宣言することと同じになります。

コード:

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        Stu.prototype.type='学生';
        Stu.prototype.log = function (s) {
            console.log(s);
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.type + "/" + stu2.type); // 学生 学生
        stu1.log('hello');  // hello
        console.log(stu1.log == stu2.log);  // true

カプセル化については以上です。js で継承がどのように実装されるかを見てみましょう。

2. 継承

2.1 コンストラクターのバインディング

子関数の call または apply メソッドを直接呼び出して、親オブジェクトのコンストラクターを子オブジェクトにバインドします。

   function Stu(name, score) {
            Grade.apply(this, arguments);
            //Grade.call(this, arguments);
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
            this.ask = function () {
                console.log("大家好");
            }
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.code); // 初中
        stu1.ask(); // 大家好

ここでのApplyは2つのことを行います。最初のパラメータthisをGradeコンストラクター(呼び出し元)に渡し、その後Gradeでコードを実行します。 Gradeでこれで定義したメンバーをStuで再度実行するのと同じです。

2.2 プロトタイプによる継承
最初にコードを見てください

コード:

   function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
        }
        Stu.prototype = new Grade();
        Stu.prototype.constructor = Stu; //防止继承链的紊乱,手动重置声明
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(Stu.prototype.constructor); // 自己的构造函数
        console.log(stu1.code); // 初中

前に述べたように、プロトタイプは C# の静的メンバーに相当するため、親クラスのすべてのメンバーを独自の静的メンバーに変換して継承を実現します。

プロトタイプによる継承の欠点は、継承されるすべてのメンバーが静的であるため、オブジェクトのメンバーをどのように継承するかということです。

2.3 継承のコピー

親オブジェクトのすべてのプロパティとメソッドを子オブジェクトにコピーして、継承を実現します。

コード:

    function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {}
        Grade.prototype.code = "初中";
    }
        //函数封装
        function extend(C, P) {
            var p = P.prototype;
            var c = C.prototype;
            for (var i in p) {
                c[i] = p[i];
            }
        }
        extend(Stu, Grade);
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        stu1.code='高中';
        console.log(stu1.code); // 高中
        console.log(stu2.code); // 初中
        console.log(Stu.prototype.constructor);
        console.log(Grade.prototype.constructor)

これで、JS オブジェクト指向の組織は静的ではなくなり、使用時に必要に応じて変更できます。正しいことが最善であるという、とても良いことわざがあります。

ここではカプセル化と継承のみを分析します。今後、JavaScript オブジェクト指向プログラミングをより深く理解できるように、他の記事も作成する予定です。もちろん、これらはすべて個人的な理解です。漏れがある場合は、ご連絡ください。


JavaScript のオブジェクト指向のカプセル化と継承に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。