JavaScript を使用してクラスをカプセル化する

韦小宝
リリース: 2023-03-21 12:58:01
オリジナル
2215 人が閲覧しました

この記事では、JavaScript を使用してクラスをカプセル化する方法について説明します。JavaScript を使用したクラスのカプセル化について知らない場合、または JavaScript を使用したクラスのカプセル化に興味がある場合は、この記事を一緒に見てみましょう。 、ナンセンスではありません。早速、本題に入りましょう

他の

オブジェクト指向 言語を学習した JavaScript 使用者は、class{} などのクラスや、定義された一連のメソッドを使用したことがあります しかし、 JS を学ぶ初心者はよくこの文を目にします。つまり、JavaScript はオブジェクト指向言語です。しかし、いくら学んでも、オブジェクト指向プログラミングについてはよくわかりません。私も同様です。ここ数日で、js オブジェクト指向プログラミングに取り組み始めました。js クラスについての私の理解を話しましょう。 。 。

いわゆるクラスには次の関数があります:

1. コンストラクター

2. 静的プロパティ、静的メソッド

4. プライベート プロパティ、プライベート メソッド

js を使用してクラスをカプセル化し、上記の機能を実現する方法については、

1. 単純なクラス

var Person = function(name, age){
    this.name = name;    this.age = age;    this.sayName = function(){
        console.log(this.name);
    };
}
ログイン後にコピー
クラスらしくないと思われる場合は、次のようにすることができます コンストラクター

パターンが明確ではない場合は、js

オブジェクトの作成パターンを見てください

2. 複雑なクラス

上記の例では、これをベースに改善できます。

var Person = function(name, age){
    //共有属性
    this.name = name;    this.age = age;    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}
ログイン後にコピー
上記のシミュレーション方法は、js でクラスの作成を実現するために使用されます。これに基づいて、現状に満足せず、js のカプセル化に役立つ全体をカプセル化したいと考えています。 。

3. jsクラスをカプセル化する

ここではクロージャを使用して実装します。 まず、クロージャの概念を説明します。

クロージャーの概念: 関数は、別の 関数スコープ 内の変数にアクセスする権利を持ちます。つまり、関数内に別の関数を作成します

実装は次のとおりです:

var Person = function(name, age){
    //共有属性
    this.name = name;    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };    //静态私有属性(只能用于内部调用)
    var home = "China";    //静态私有方法(只能用于内部调用)
    function sayHome(){
        console.log(home);
    }    //构造器
    this.setAge = function(age){
        console.log(age + 12);
    };    this.setAge(age);
}//静态方法(只能被类来访问)Person.sayAge = function(){
    console.log("your age is 12");
}//静态属性(只能被类来访问)Person.drink = "water";//静态共有方法(类和实例都可以访问)Person.prototype.sayWord = function(){
    console.log("ys is a boy");
}
ログイン後にコピー
呼び出しは次のとおりです:
var Person = (function(){
    //静态私有属性方法
    var home = "China";    function sayHome(name){
        console.log(name + "'s home in " + home);
    }    //构造函数
    function _person(name, age){
        var _this = this;        //构造函数安全模式,避免创建时候丢掉new关键字
        if(_this instanceof _person){            //共有属性, 方法
            _this.name = name;
            _this.getHome = function(){
                //内部访问私有属性,方法
                sayHome(_this.name);
            };
            _this.test = sayHome; //用于测试
            //构造器
            _this.setAge = function(age){
                _this.age = age + 12;
            }(age);
        }else{            return new _person(name, age);
        }
    }    //静态共有属性方法
    _person.prototype = {
        constructor: _person,
        drink: "water",
        sayWord: function(){
            console.log("ys is a boy");
        }
    }    return _person;
})();
ログイン後にコピー
上記のコードでは、js

概要:

1 を使用してクラスを実装しました。一部のパブリック プロパティとメソッドは静的に設定できるため、真の共有を実現するためにインスタンス化されるたびに追加のメモリ リソースを割り当てる必要はありません。

2. 一部のパブリック属性メソッドは、内部プログラム処理中にのみ共有したい場合、静的なプライベート属性メソッドに設定します。

3. 一部のパブリック属性メソッドは、インスタンス オブジェクト間で共有されるように設定します。 .

上記はこの記事のすべての内容です。あまり詳しくない場合は、両方を自分で実装することができ、簡単に習得できます。

関連する推奨事項:




JavaScriptカプセル化のさまざまな記述方法

JavaScriptカプセル化携帯電話クラス関数のコード例の詳細な説明

以上がJavaScript を使用してクラスをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!