3

JavaScriptのプロトタイプの性質を理解しようとしています。また、コンストラクター関数のようなクラスを使用せずにオブジェクトの継承を作成しようとしています。

動物からプロトタイプチェーンをアタッチし、3つすべてのオブジェクトリテラルである場合、それぞれを猫と犬にアタッチするにはどうすればよいですか？

また、Object.createを実行し、リテラル形式（myCatなど）でさらにプロパティを追加する方法はありますか。

以下のコードを追加し、binhttp://jsbin.com/eqigox/edit#javascriptを貼り付けます

var Animal = {
    name        : null,
    hairColor   : null,
    legs        : 4,

    getName : function() {
        return this.name;
    },
    getColor : function() {
        console.log("The hair color is " + this.hairColor);
    }
};

/* Somehow Dog extends Animal */

var Dog = {
    bark : function() {
        console.log("Woof! My name is ");
    }
};

/* Somehow Cat Extends Animal */

var Cat = {
    getName : function() {
        return this.name;
    },

    meow : function() {
        console.log("Meow! My name is " + this.name);
    }
};


/* myDog extends Dog */

var myDog = Object.create(Dog);

/* Adding in with dot notation */
myDog.name = "Remi";
myDog.hairColor = "Brown";
myDog.fetch = function() {
    console.log("He runs and brings back it back");
};


/* This would be nice to add properties in litteral form */
var myCat = Object.create(Cat, {
    name        : "Fluffy",
    hairColor   : "white",
    legs : 3, //bad accident!
    chaseBall : function(){
        console.log("It chases a ball");
    }

});

myDog.getColor();
4

2 に答える 2

3

を使用Object.createして、定義したオブジェクトをプロトタイプとして使用できます。例えば：

var Dog = Object.create(Animal, {
    bark : {
        value: function() {
            console.log("Woof! My name is " + this.name);
        }
    }
});

これで、新しいDogオブジェクトを作成できます。

var myDog = Object.create(Dog);
myDog.bark();  // 'Woof! My name is null'
myDog.getColor();  // 'The hair color is null'

例： http： //jsfiddle.net/5Q3W7/1/

または、がない状態で作業している場合はObject.create、コンストラクターを使用できます。

function Animal() {
    this.name = null;
    this.hairColor = null;
    this.legs = 4;
};

Animal.prototype = {
    getName : function() {
        return this.name;
    },
    getColor : function() {
        console.log("The hair color is " + this.hairColor);
    }
}

function Dog() {
}

Dog.prototype = new Animal;
Dog.prototype.bark = function() {
    console.log("Woof! My name is " + this.name);
};

例： http： //jsfiddle.net/5Q3W7/2/

Object.createの詳細については、https ：//developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create/を参照してください。

コンストラクターとプロトタイプチェーンの詳細については、 https ：//developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/constructorをご覧ください。

https://developer.mozilla.org/en/JavaScript/Guide/Inheritance_and_the_prototype_chain

于 2012-07-09T01:52:17.543 に答える
0

編集：完全に見落とされてObject.createいます。より広範な下位互換性が必要でない限り、@jMerliNの回答の方が適切です。

Animal、CatおよびそれらはのインスタンスであるためDog共有しますが、それはあなたがあなたのメソッドを置きたい場所ではありません。Object.prototypeObject

extend次の関数を使用して、継承を模倣できます。

var Dog = {
    bark : function() {
        console.log("Woof! My name is ")
    }
}

jQuery.extend(Dog, Animal)

これは、アンダースコア_.extendまたは独自の拡張関数である可能性があり、そのプロパティを単にコピーします。

function extend(obj, source){
    for (var prop in source) {
        obj[prop] = source[prop]
    }
}

ただし、参照には注意してください。文字列、数値、ブール値などの「プリミティブ」値がコピーされ、オブジェクト、関数、配列が参照されます。

var Animal = {
    tags: [1,2,3]
}

var Dog = {
    //...
}

_.extend(Dog, Animal)

Dog.tags.push(4)

Dog.tags // [1,2,3,4]
Animal.tags // [1,2,3,4] oh no!

これを実行する理由はありません。エラーが発生しやすく、メモリ効率が低くなります。コンストラクターを使用するだけです:)

于 2012-07-09T01:36:44.907 に答える