1

私は他の質問を検索しましたが、彼らの「これ」の質問はあまり似ていません。グーグルもしていますが、よくわかりません。

どこをthis参照していますか？quirksmodeが言ったように

..これは常に、実行している関数の「所有者」、または関数がメソッドであるオブジェクトを指します。

私のような初心者にとって、それはまだ混乱しています。コードは次のとおりです。

var Yourlib = (function() {
    var elementSelected = [],
    totalElement = 0;

    function yourQSA(str) {
        elementSelected = document.querySelectorAll(str);
        totalElement = elementSelected.length;

        return this // this#1 , where is "THIS" referencing to??
    }

    return {
        byClass : function(str) {
            elementSelected = document.getElementsByClassName(str);
            totalElement = elementSelected.length;

            return this; // this#2, the "THIS" is referencing to "Yourlib" obj
        },
        qsa : yourQSA,
        setColor: function(clr) {
            var n = 0;
            for ( ; n < totalElement; n++ ) {
                elementSelected[n].style.color = clr;
            }

            return this;
        }
    }

}());

質問: this#1 はどこを参照していますか? それともreturn Yourlib;代わりに書いたほうがいいreturn this;ですか？(メソッドを連鎖させたい)

ありがとうございました

*注、目標は連鎖メソッドを作成することです。何かのようなものYourlib.byClass('yourclass').setColor('#ff0000');

4

3 に答える 3

1

両方の関数がオブジェクトのメソッドとして呼び出されると、this#1とthis#2は同じオブジェクトになります

Yourlib.byClass('yourclass').setColor('#ff0000');
Yourlib.qsa('.yourclass').setColor('#ff0000');

次のようなことをする場合は注意してください

var qsa = Yourlib.qsa;
qsa('.yourclass').setColor('#ff0000');

関数をオブジェクトのメソッドとして呼び出していないため、機能しません。

apply、bindなどの関数を使用して、関数で (コンテキストcallを) 設定することもできますthis

var qsa = Yourlib.qsa;
qsa.call(Yourlib, '.yourclass').setColor('#ff0000');
qsa.apply(Yourlib, ['.yourclass']).setColor('#ff0000');
(qsa.bind(Yourlib))('.yourclass').setColor('#ff0000');
于 2013-06-17T02:41:15.107 に答える