0

次のコードを使用します。 

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 メソッドを呼び出そうとすると、そのエラーが発生します。

4

2 に答える 2

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ますが、古いブラウザーを気にしない場合を除き、shim を使用する必要があります。

例 (最新のブラウザーの場合):

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

またはアンダースコアまたはロダッシュを使用：

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

ところで、コンストラクター関数は型と見なされるため (クラスベースのオブジェクト指向言語のクラスのように)、大文字にするのが通例です。

于 2013-08-20T22:46:02.880 に答える
1

JavaScriptのスコープについてもう少し学ぶ必要があります。短いバージョンは次のとおりです。新しい を開くたびにfunction、新しいスコープを作成します。コードの貼り付けにはthis、内側のスコープが外側のスコープと一致しない2 つのネストされたスコープが表示され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();
于 2013-08-20T22:50:06.650 に答える