javascript - 使用 "this"作为参数

Question

我有一个 onclick 函数可以从一个“页面”导航到另一个“页面”(它实际上并不是导航，只是模仿它):

$('.button').on('click', function(){
    $('.home').css('display','none');
    var newPage = $('.'+this.id);
    goTo(newPage);
});

goTo 简化供引用:

function goTo(page){
 $(page).css('display', 'block');
}

这工作得很好。所有导航按钮都有按钮类，以及与不同“页面”的类名相匹配的 ID。点击#page1，显示.page1等

我的问题是现在我必须重写我的代码才能对其他元素执行相同的操作 - 尝试使用参数重写它对此尤其不起作用。

这就是我正在尝试的:

function goToPage(link, destination){
 link.click(function(){
  $('.home').css('display','none');
  goTo(destination);
 }
}

并将其称为:

goToPage($('#page1'), $('.page1'));

但是工作正常:

goToPage($('.button'), $('.'+this.id));

没有。

我想我误解了“this”在这种情况下是如何工作的。我认为它只会在调用参数时确定“this”是什么。

所以我的问题是:“this”可以这样用作参数吗？我的逻辑是否有点偏离，或者我是一个十足的白痴？

fiddle :https://jsfiddle.net/hek0ptca/13/

Answer 1

要明确回答您的问题，不，在这种情况下，this 不能用作参数，因为它没有指向任何内容。

goToPage($('.button'), $('.'+this.id));

在此上下文中，this 指向“未定义”。尝试在上述代码的相同范围内运行 console.log(this.id); 并检查浏览器的控制台。它返回“未定义”。

考虑this的一个好方法是您需要一些东西来引用。范围很重要。如果没有任何内容可供引用，您将始终得到“未定义”的值。通常，this 用于已引用对象的函数内部，例如，在事件处理程序内部:

$('.button').click(function(){
    $('#home').css('display', 'none');
    goTo($('.'+this.id));
});

这在这种情况下会起作用，因为 this 将引用回正在操作的对象，即 .button 类。