Question

请使用以下代码：

function animateTo(parent) {
    this.parent = $('#' + parent);
    console.log(this.parent)
    this.animator = function () {
        this.parent.animate({
            scrollTop: 5
        }, 5);
    }
}
test = new animateTo('data');
test.animator;

第一个console.log显示控制台中的完整对象，但是当我尝试运行this.parent.animate时，我收到错误：

Uncaught TypeError: Object [object global] has no method 'animate' animator.js:60
(anonymous function

任何人都可以解释为什么会这样吗？我已经尝试了this.parent.selector并得到了正确的结果，但是如果我尝试调用animate方法，我就会收到错误。

Answer 1

你应该这样做：

function animateTo(parent){
    this.parent = $('#' + parent);
    var that = this;
    this.animator = function(){
        that.parent.animate({scrollTop:5},5);
    }
}

或

function animateTo(parent){
    return {
        parent: $('#' + parent),
        animator: function(){
            this.parent.animate({scrollTop:5},5);
        }
    }
}

如果您不喜欢其中任何一个选项，可以随时使用bind，但除非您不关心旧浏览器，否则必须使用垫片。

例如（在现代浏览器中）：

function animateTo(parent){
    this.parent = $('#' + parent);
    this.animator = (function(){
        this.parent.animate({scrollTop:5},5);
    }).bind(this)
}

或使用下划线或lodash：

function animateTo(parent){
    this.parent = $('#' + parent);
    this.animator = _.bind(function(){
        this.parent.animate({scrollTop:5},5);
    }, this)
}

顺便说一下，习惯上将构造函数大写，因为它们被认为是类型（就像基于类的面向对象语言中的类）。

Answer 2

您应该在JavaScript中了解有关scope的更多信息。简短版本是：每次打开新function时，都会创建一个新范围。您的代码粘贴显示了两个嵌套的范围，其中内部范围中的this与外部范围中的this不匹配。

无论如何，解决方案很简单，因为您甚至不需要在场景中使用this

function animateTo(parent){
  var $parent = $('#' + parent);
  console.log($parent)

  this.animator = function(){
    $parent.animate({scrollTop: 5}, 5);
  };
}

var test = animateTo('data');
test.animator;

看起来你似乎想尝试这样的事情。

以下是关于如何编写此代码的意见

var Animator = function(selector) {
  this.parent = $(selector);
};

Animator.prototype.animate = function() {
  this.parent.animate({scrollTop: 5}, 5);
};

用法看起来像这样

var test = new Animator("#data");
test.animate();

分配给此变量后，JQuery方法将无法工作

2 个答案: