1

jQueryで、

currentObjectとlastObjectがそれぞれひとつのjQueryオブジェクトである場合、
ふたつが同一のものであるか比較する時に、

if(currentObject === lastObject) {
 //処理
}

とせずに、

if(currentObject.get(0) === lastObject.get(0)) {
 //処理
}

としなければいけないのは、どのような時ですか?

または、ふたつにはどのような違いがありますか?

2 件の回答 2

3

currentObjectとlastObjectがそれぞれひとつのjQueryオブジェクトである場合、
ふたつが同一のものであるか比較する

「同一」の定義によります。

javascriptにおける任意のObjectの比較

Comparison operatorsより、

If both operands are objects, then JavaScript compares internal references which are not equal when operands refer to different objects in memory.

意訳すれば参照型オブジェクトを比較する場合、それが同一であるとはふたつのオブジェクトの参照先が等しいことを意味します。すなわち、

// 見た目が同じでも参照先が異なるならばfalse
console.assert({} !== {});
console.assert({ value: 1 } !== { value: 1 });

// 参照先が等しい場合にtrue
const a = {};
const b = a;
console.assert(a === b);

です。

jQueryオブジェクトの比較

jQueryオブジェクトが前述した「jsにおけるオブジェクトの同一性」を満たすかを確認するとき、オブジェクトを直接比較します。

console.assert(jQuery(window) !== jQuery(window));

const $window = jQuery(window);
const currentObject = $window;
const lastObject = $window;
console.assert(currentObject === lastObject);

対して、jQueryオブジェクトが「同一のDOMオブジェクトを含んでいる」ことを同一と定義するならば、一般的にはjQueryのAPIである.is()を使用します。

console.assert(jQuery(window).is(jQuery(window)));

これはjQueryオブジェクトが単一のDOMオブジェクトを参照している場合に限り、質問にある後者の比較表現と等価な処理になります。

console.assert(jQuery(window).get(0) === jQuery(window).get(0));

また、必要な場面があるかは不明ですが「含まれているDOMオブジェクトが完全に一致する」ことと定義するならば、標準ではこのような機能をもつAPIが無さそうですので、自前でjQueryオブジェクトに含まれるDOMオブジェクトを全数比較する必要がありそうです。こちらはあまり検証していないので参考までに。

// 拡張API jQuery().equals(jQueryObject)
jQuery.fn.equals = function (obj) {
    if (!(obj instanceof jQuery) || this.length !== obj.length) {
        return false;
    }
    // 順序無視での比較
    for (let i = 0; i < this.length; i++) {
        if (obj.index(this.get(i)) === -1) {
            return false;
        }
    }
    return true;
};

//
console.assert(jQuery('div').equals(jQuery('div')));
console.assert(!jQuery('div:first-child').equals(jQuery('div')));
console.assert(!jQuery('div').equals(jQuery('div:first-child')));

ご質問の意図と異なる回答であればコメントでお知らせください。

1

同じDOMを指定してjQueryオブジェクトのインスタンスを生成したとしても
厳密な比較を実施するとインスタンスとしては別物になります
つまり前者は同じインスタンスかどうかチェックします

currentObject = $("body");
lastObject = $("body");
if (currentObject === lastObject) { //falseになる
   //処理
}

そのためインスタンスの比較ではなくて
jQueryのDOMが同じモノを参照しているかどうかを比較するときは
$().get を利用すればDOM自体を比較できます。

currentObject = $("body");
lastObject = $("body");
if(currentObject.get(0) === lastObject.get(0)) {//trueになる
//処理
}

ということでDOMを比較したいときはgetを使いましょう。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。