javascript - jquery窗口调整大小时出现错误

Question

我试图在调整窗口大小时调整 div 的大小。使用以下代码，我得到“this.fullScreen 不是函数”如果我删除窗口调整大小，它可以正常工作，但显然不会随窗口调整大小。我是否以错误的方式思考这个问题？

var PE = {};

PE.functions = {
  fullScreen: function fullScreen() {
    var fullScreen = $('.full-screen'),
      navbarHeight = $('.navbar').height(),
      windowHeight = $(window).height(),
      windowWidth = $(window).width();

    fullScreen.css({
      width: windowWidth,
      height: windowHeight - navbarHeight
    });
  },

  fullScreenResize: function screenResize() {
    $(window).resize(function(){
        this.fullScreen();
    });
  }
};

$(document).ready(function() {
  PE.functions.fullScreenResize()
});

Answer 1

在fullScreenResize中，对this.fullScreen()的调用，this不一定是PE.functions > 对象，因为传递给 resize 的回调函数具有不同的 this。为了补救，bind当前this的回调函数:

fullScreenResize: function screenResize() {
  $(window).resize(function() {
      this.fullScreen();
  }.bind(this));
}

或者将 this.fullScreen() 替换为完整对象路径 PE.functions.fullScreen()。