ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptでオブジェクトを作成するにはどうすればよいですか?

JavaScriptでオブジェクトを作成するにはどうすればよいですか?

青灯夜游オリジナル: 2021-06-17 13:56:0114042ブラウズ

JavaScript でオブジェクトを作成する方法: 1. new キーワードを使用してコンストラクターを呼び出し、オブジェクトを作成します。2. ファクトリメソッドを使用してオブジェクトを作成します。3. コンストラクターメソッドを使用してオブジェクトを作成します。 ; 4. プロトタイプメソッドを使用してオブジェクトを作成します; 5. 混合コンストラクター/プロトタイプメソッドを使用してオブジェクトを作成します; 6. 動的プロトタイプメソッドを使用してオブジェクトを作成します。

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript の文法機能を使用して、クラスという概念でオブジェクトを作成できます。

方法 1: 元のメソッド -- new キーワードを使用してコンストラクターを呼び出し、オブジェクトを作成します。

コードは次のとおりです。

<script>
    var obj = new Object();
    obj.name = "Kitty";//为对象增加属性
    obj.age = 21;
    obj.showName = function () {//为对象添加方法
        console.log(this.name);
    };
    obj.showAge = function(){
        console.log(this.age);
    };
    obj.showName();
    obj.showAge();
</script>

このメソッドは、new キーワードを通じてオブジェクトを生成し、特性に従ってプロパティとメソッドを追加します。 JavaScript を動的言語として使用し、オブジェクトを構築します。 this は、メソッドが呼び出されるオブジェクトを表します。

この方法の問題は、オブジェクトを複数回作成する必要がある場合、コードを複数回繰り返す必要があり、コードの再利用に役立たないことです。

#メソッド 2: ファクトリメソッド

コードは次のとおりです:

<script>
    function createObj(){
        var obj = new Object();//创建对象
        obj.name = "Kitty";
        obj.age = "21";
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function () {
            console.log(this.age);
        };
        return obj;
    }
 
    var obj1 = createObj();
    var obj2 = createObj();
 
    obj1.showName();
    obj1.showAge();
 
    obj2.showName();
    obj2.showAge();
</script>

このメソッドでもオブジェクトの作成を実現しますが、同様にオブジェクトを複数回作成する必要があり、属性の内容が異なる場合もコードを繰り返す必要があります。複数回。コードの再利用率を再検討する必要があるため、コードを変更してコードの再利用率を高め、ファクトリメソッドを変更してパラメータの割り当てを渡すことができます。

改善されたコードは次のとおりです。

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = function () {
            console.log(this.name);
        };
        obj.showAge = function(){
            console.log(this.age);
        };
 
        return obj;
    }
 
    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

この方法では、コードの再利用は効率的ですが、オブジェクト指向のクラスの概念と比較すると、大きな欠陥があります。オブジェクト指向では、オブジェクトのプロパティはプライベートであるが、オブジェクトのメソッドは共有されることが強調されます。上記のファクトリメソッドがオブジェクトを作成するときは、オブジェクトごとに独自のプライベートメソッドを作成する必要があります。同時に、オブジェクトごとに論理的に同一のメソッドが作成されるため、メモリの無駄になります。

改善されたコードは次のとおりです:

<script>
    function createObj(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.showName = showName;
        obj.showAge = showAge;
        return obj;
    }

    function showName(){
        console.log(this.name);
    }
    function showAge(){
        console.log(this.age);
    }
    
    var obj1 = new createObj("Kitty","21");
    var obj2 = new createObj("Luo","22");

    obj1.showName();//Kitty
    obj1.showAge();//21

    obj2.showName();//luo
    obj2.showAge();//22
</script>

上記は次のように定義することで解決されます。複数の関数オブジェクト: 異なるオブジェクトが保持する関数オブジェクトのプライベートな問題を解決します。これで、すべてのオブジェクトメソッドが上記の 2 つの関数への参照を保持します。しかし、この方法では、オブジェクトの関数とオブジェクトは互いに独立しており、特定のメソッドが特定のクラスに属するというオブジェクト指向の考え方と矛盾します。

#メソッド 3: コンストラクターメソッド

コードは次のとおりです:

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
 
        this.showName = function () {
            console.log(this.name);
        };
        this.showAge = function () {
            console.log(this.age);
        };
    }
    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

コンストラクターメソッドはファクトリメソッドと同じで、オブジェクトごとに専用の関数オブジェクトを作成します。もちろん、これらの関数オブジェクトはコンストラクターの外部で定義することもできるため、オブジェクトとメソッドは互いに独立しています。

コンストラクターを使用する場合の最大の問題は、すべてのプロパティがインスタンスごとに 1 回作成されることです。これは数値プロパティの場合は許容されますが、関数メソッドの各インスタンスを作成する必要がある場合は不合理です。

Person() の新しいインスタンスを作成するには、new 演算子を使用する必要があります。この方法でコンストラクターを呼び出すには、実際には次の 4 つの手順を実行します。

创建一个新对象；
将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
执行构造函数中的代码（为这个新对象添加属性）；
返回新对象。

方法四：原型方法

代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予prototype
    Person.prototype.name = "Kitty";
    Person.prototype.age = 21;
    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showAge = function (){
        console.log(this.age);
    };
 
    var obj1 = new Person("Kitty","21");
    var obj2 = new Person("Luo","22");
 
    obj1.showName();//Kitty
    obj1.showAge();//21
 
    obj2.showName();//luo
    obj2.showAge();//22
</script>

当生成Person对象时，prototype的属性都赋给了新的对象。那么属性和方法是共享的。首先，该方法的问题是构造函数不能传递参数，每个新生成的对象都有默认值。其次，方法共享没有任何问题，但是，当属性是可改变状态的对象时，属性共享就有问题。

修改代码如下：

<script>
    function Person(){} //定义一个空构造函数，且不能传递参数
    //将所有的属性的方法都赋予prototype
    Person.prototype.age = 21;
    Person.prototype.array = new Array("Kitty","luo");
 
    Person.prototype.showAge = function (){
        console.log(this.age);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person();
    var obj2 = new Person();
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj2.showArray();//Kitty,luo,Wendy
</script>

上面的代码通过obj1的属性array添加元素时，obj2的array属性的元素也跟着受到影响，原因就在于obj1和obj2对象的array属性引用的是同一个Array对象，那么改变这个Array对象，另一引用该Array对象的属性自然也会受到影响，混合的构造函数/原型方式使用构造函数定义对象的属性，使用原型方法定义对象的方法，这样就可以做到属性私有，而方法共享。

方法五：混合的构造函数/原型方式

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
    }
 
    Person.prototype.showName = function (){
        console.log(this.name);
    };
    Person.prototype.showArray = function (){
        console.log(this.array);
    };
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。

方法六：动态原型方法

代码如下：

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.array = new Array("Kitty","luo");
        //如果Person对象中_initialized 为undefined，表明还没有为Person的原型添加方法
        if(typeof Person._initialized  == "undefined"){
            Person.prototype.showName = function () {
                console.log(this.name);
            };
            Person.prototype.showArray = function () {
                console.log(this.array);
            };
            Person._initialized = true;
        }
    }
 
    var obj1 = new Person("Kitty",21);
    var obj2 = new Person("luo",22);
    obj1.array.push("Wendy");//向obj1的array属性添加一个元素
 
    obj1.showArray();//Kitty,luo,Wendy
    obj1.showName();//Kitty
    obj2.showArray();//Kitty,luo
    obj2.showName();//luo
</script>

这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中，同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次，在实际应用中，采用最广泛的构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的。不要单独使用构造函数和原型方法。

更多编程相关知识，请访问：编程视频！！

以上がJavaScriptでオブジェクトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript Array if 面向对象构造函数对象作用域 this prototype

声明：

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

前の記事：360 で JavaScript を有効にする方法次の記事：360 で JavaScript を有効にする方法

続きを見る