1

次のコードを使用していますが、常にエラーが発生しています。

TypeError: container("accounts").atPosition("#left-top") は未定義です

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

function container(name, position) {
    return {
        pos: null,
        atPosition: function(position) {

            $(position).html(this.newContainer());
            //$(position+" .main").html("yes");
            this.pos = position;
        },
        populateData: function(rdata) {
            $("#left-top .main").html(rdata);
        },
        newContainer: function() {
            //alert(this.pos);
            return '<h3>' + name.toTitleCase() + '</h3>\
                <div class="main">\
                </div>';
        }
    };
}

container('accounts').atPosition('#left-top').populateData("yahoo!!!!");​

このエラーが表示される理由と修正方法を教えてください。

4

4 に答える 4

7

this連鎖のために関数から戻ることになっています。デフォルトでは、関数はundefinedを返します（使用しない場合new operator）。返すものがない関数からこれを返すことにより、連鎖に役立ちます。

function container(name, position) {
    return {
        pos: null,
        atPosition: function(position) {
            $(position).html(this.newContainer());
            //$(position+" .main").html("yes");
            this.pos = position;

            return this;
        },
        populateData: function(rdata) {
            $("#left-top .main").html(rdata);
            return this;
        },
        newContainer: function() {
            //alert(this.pos);
            return '<h3>' + name.toTitleCase() + '</h3>\
                <div class="main">\
                </div>';
        }
    };
}​
于 2012-10-24T12:43:41.230 に答える
2

割り当てる関数にステートメントatPositionがありません。return

したがって、を呼び出すとatPosition('#left-top')、デフォルトの戻り値はundefined

呼び出したいオブジェクトを返す必要がありますpopulateData（これはthis）

于 2012-10-24T12:43:46.717 に答える
1

関数チェーンは特別な JavaScript 構文ではありません。必要に応じて、Java、Python、または OOP をサポートするものに実装できます。

a.functionX().functionY()呼び出されたメソッドを持つオブジェクトfunctionX()を再び返すため、機能しますfunctionY()

あなたの場合、functionX()呼び出されたのと同じオブジェクトを返す必要があるためreturn this;、問題が解決します

しかし、これで話は終わりではありません!!!

@リッチSは彼の答えで言及しました：

チェーンを機能させるには、「これを返す」必要があります。連鎖させたい関数の最後に。

これは必須ではありません true 、オブジェクト（または任意のオブジェクト）を返す限り、チェーンは機能します。以下に例を示します。

var str ="abc";
var strFromChain = str.replace('a','x').toUpperCase();
// use function chainning
document.write(strFromChain+'\n');
// result should be XBC

var str1 = "abc";
str1.replace('a','x');
var str1NotFromChain = str1.toUpperCase();
// if replace() returned this, str1NotFromChain should also be XBC
document.write(str1NotFromChain)
// but is it???????

明らかにreplace()のメソッドはstr返さthisれず、代わりに別の値を持つ新しい文字列を返しました。文字列は immutablesであるため、どのメソッドを呼び出してもstr、その値は常に になります"abc"。

ここで指摘したいのは、チェーン メソッドが return を返す必要はなく、必要に応じてthis新しいオブジェクトを返すことができるということです。オンライン チュートリアルではthisチェーン関数 (つまりjavascript.issexy ) を実装するときに使用するように教えられていますが、サード パーティのライブラリ (つまり、 expressjsでのルート チェーン)を使用するときに返されるものに常に注意を払う必要があります。

于 2016-05-16T23:26:36.737 に答える
0

Chaining doesn't happen automatically.

In order to make chaining work, you need to "return this;" at the end of any functions you want to chain.

In reality, all you're doing is calling the function on whatever you return. If you do "return this;" then you end up with a nice chaining syntax that affects the same object.

The jQuery developer guide is a good place to get quality JavaScript tips from, given your question, I'd recommend looking at http://docs.jquery.com/Plugins/Authoring#Maintaining_Chainability

于 2012-10-24T12:48:27.933 に答える