ホームページ  >  記事  >  ウェブフロントエンド  >  オブジェクトの作成方法

オブジェクトの作成方法

高洛峰
高洛峰オリジナル
2016-10-29 13:44:551090ブラウズ

1. Object を使用してオブジェクトを作成する

var person = new Object();
person.name = "Nicholas";
person.age = "29";
person.job = "Software Engineer";

person.sayName = function(){
    alert(this.name);
};

//对象字面量写法
var person = {
    name: "Nicholas",
    age: "29",
    job: "Software Engineer",
    
    sayName: function(){
        alert(this.name);
    }
};

欠点: 同じインターフェイスを使用してオブジェクトの多数のペアを作成すると、大量の重複コードが生成されます。

2. ファクトリーパターン

function createPerson (name, age , job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
         alert(this.name);
    };
    return o;
}

var person1 = createPerson("Nicholas", "29", "Software Engineer");
var person2 = createPerson("Greg", "27", "Doctor");

欠点: オブジェクトのタイプを識別できません。

3. コンストラクター パターン

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
}
//构造函数使用new操作符来调用
var person1 = new Person("Nicholas", "29", "Software Engineer");
var person2 = new Person("Greg", "27", "Doctor");

欠点: 各メソッドはインスタンス上で再作成する必要があります

4. プロトタイプ パターン

作成するすべての関数にはプロトタイプ (プロトタイプ) 属性があり、この属性は目的のオブジェクトへのポインターです。特定の型のすべてのインスタンスで共有できるプロパティとメソッドを含めることです。

//不同实例上的同名函数是不相等的
alert(person1.sayName == person2.sayName);        //false

//可以把函数定义转移到构造函数外来解决这个问题
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;    
   this.sayName = sayName;
}
function sayName() {
    alert(this.name);
}
function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = "29";
Person.prototype.job = "Software Engineer";
Person.prptptype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName();        //"Nicholas"

var person2 = new Person();
person2.sayName();        //"Nicholas"

alert(person1.sayName == person2.sayName);        //true

プロトタイプとインスタンスは、プロトタイプ属性とコンストラクター属性を通じて相互に関連付けられます。

コードがオブジェクトの属性を読み取るとき、最初にインスタンスを取得し、次にインスタンスのプロトタイプを取得するため、インスタンスの属性が取得されます。プロトタイプの属性を上書きします。

オブジェクトを再プロトタイプすると、プロトタイプとインスタンスの間の接続が切断されますが、プロトタイプ オブジェクトを変更しても切断されません。

欠点: インスタンスは独自のプロパティを持つことができません

5. コンストラクター パターンとプロトタイプ モデルの併用

//更简单的原型语法
function Person() {
}
Person.prototype = {
    constructor : Person,        //以对象字面量形式创建新对象,constructor不再指向Person,在此特意设置为Person
    name : "Nicholas",
    age : "29",
    job : "Software Engineer",
    sayName : function () {
        alert(this.name);
    }
};

6. 動的プロトタイプ パターン、寄生コンストラクター パターン、安全なコンストラクター パターン


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