2

私は、Javascript で古典的な継承をエミュレートするさまざまな方法を試してきましたが、それを行う方法をいくつか見つけました。しかし、特定の方法でそれを実行できない理由と、それを回避する方法に興味がありました。

私はこれを試しました：

var squeaker = new squeek();

function monsterMaker(newMonster) {
    newMonster.type = "monster";
    newMonster.health = 10;
    return newMonster;
}

function squeek() {
    this.name = "squeek";
    this = monsterMaker(this);
}

なぜこれが起こっているのかを理解していると思いますし、それを回避する方法 (つまり、jQuery の $.extend) を見つけましたが、左側の代入または回避策を使用して、このように新しく作成されたオブジェクトを変更する方法はありますか?追加のライブラリを使用せずに?

4

5 に答える 5

1

に代入することはできませんがthis、する必要はありません。コードが機能する場合、コードは次のコードと同等であり、機能します。

var squeaker = new squeek();

function monsterMaker(newMonster) {
    newMonster.type = "monster";
    newMonster.health = 10;
    return newMonster;
}

function squeek() {
    this.name = "squeek";
    monsterMaker(this); // sets properties on this
}

(JavaScript は値渡しですが、この場合の「値」はthisオブジェクト全体であるため、いくつかの点で参照渡しに似ています。)

于 2012-10-01T21:28:15.717 に答える
1

いいえ、に割り当てることはできませんthis。ただし、その必要はありません。インスタンス ( this) を に渡すだけmonsterMakerで、その関数はそれにいくつかのプロパティを追加します - まさにあなたが望むものです。オブジェクトを返す必要も、返されたオブジェクトを使用する必要もありませんthis。

function Squeek() {
    this.name = "squeek";
    monsterMaker(this);
}

new Squeek(); // will have type and health
于 2012-10-01T21:28:23.923 に答える
1

試してみてください：

var squeaker = new squeek();

function monsterMaker(newMonster) {
    this.type = "monster";
    this.health = 10;
}

function squeek() {
    this.name = "squeek";
    monsterMaker.call(this);
}

このようにして、monsterMaker 関数のプロパティを使用して、任意のオブジェクトを「装飾」できます。

しかし、さらに考えてみると、プロトタイプの継承が必要になるところまで到達したと思います...

于 2012-10-01T21:37:08.977 に答える
1

これは、プロトタイプの継承で行う方法です。コンソール出力を表示するには、Chrome で F12 を押すか、FireFox で FireBug を開きます。Chrome は、ドリルダウンするインタラクティブなオブジェクトを提供します。

function monsterMaker() {
    this.type = "monster";
    this.health = 10;
}

function squeek() {
    this.name = "squeek";
    //monsterMaker.call(this); // sets properties on this
}
squeek.prototype = new monsterMaker();
squeek.prototype.constructor = monsterMaker;

var squeaker = new squeek();

console.log(squeaker);
console.log(squeaker.name);
console.log(squeaker.type);
console.log(squeaker.health);

ここで動作することを確認してください：

http://www.quirkscode.com/flat/forumPosts/extendThis/extendThis.html

ここにいくつかのリンクがあります：

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Inheritance_Revisited

上記の 2 番目の MDN リンクから取得すると、「新しい JavaScript の方法」(ECMAScript 5) で実行できます (拡張用のライブラリとサンプル コードが含まれています - コンソールを使用してサンプル出力を表示します:

// Original Author:  FireFly - Jonas Höglund - ##javascript channel
// on irc.freenode.net - see THANKS File

///////////////
// Library code
///////////////

var ExtendBase = {};

Object.defineProperty(ExtendBase, 'extend', {
    enumerable: false
    , value: function(obj) {
        'use strict';

        var descs = {}
        , objectInheritCounter = 0;

        objectInheritCounter += 1;

        Object.getOwnPropertyNames(obj).forEach(function(key) {
        descs[key] = Object.getOwnPropertyDescriptor(obj, key)
        });

        return Object.create(this, descs);
    }
});

///////////////
// Sample Usage
///////////////

var Person = ExtendBase.extend({
  // missing: name

  // A person can tell you its name.
  talk: function() {
    return "Hello, I'm " + this.name
  }
})

var WorkingPerson = Person.extend({
  // missing: name, occupation

  // A working person also tells you their occupation when they talk.
  talk: function() {
    return Person.talk.call(this) + " and I am a " + this.occupation
  }
})

var p1 = WorkingPerson.extend({ name:"Harry", occupation:"wizard" })
console.log(p1.talk()); // "Hello, I'm Harry and I am a wizard"

ここで動作することを確認してください：

http://www.quirkscode.com/flat/JSLearning/src/extend/extend.html

于 2012-10-01T22:25:41.533 に答える
0

JavaScipt はプロトタイプベースの言語です。古典的なオブジェクト指向言語を模倣しようとするのではなく、プロトタイプに屈服してください。

この場合、Monsterプロトタイプを作成します。そしてSqueekプロトタイプをベースにしたMonsterプロトタイプ。次にsqueaker、オブジェクトからa をインスタンス化しSqueekます。

/* Set up your Monster prototype */
function Monster() { /* constructor */}
Monster.prototype.type = "monster";
Monster.prototype.health = 10;

/* Now use the prototype of a Monster to create the prototype of a Squeek */
function Squeek() { /* constructor */ }
Squeek.prototype = new Monster(); // thanks Bergi and RobG
Squeek.prototype.constructor = Squeek; // thanks RobG
Squeek.prototype.name = "squeek";

/* Now let's instantiate a Squeek */
var squeaker = new Squeek();
console.log(squeaker.name); // squeek
console.log(squeaker.type); // monster
console.log(squeaker.health); // 10
console.log(squeaker.constructor === Squeek); // true

var monster = new Monster();
console.log(monster.name); // undefined
于 2012-10-01T22:27:17.320 に答える