javascript - 未定義をオブジェクトに変換できませんか？

Question

エラー：未定義をオブジェクトに変換できません：this.page[1]=100;。それはすでに定義されています、何が問題なのですか？

var sheepclass ;
(function($) {
    sheepclass = function(handler){
        var $div = $('div');            
        this.handler = $.extend({
            'sizes': 'thin', 
            'eat': 'grass',
            'color': 'white',
            'page':[],
            myalert: function() {
                myconsole();
                function myconsole() {
                    this.page[0] = 100; 
                    console.log(this.page[0]);
                }
            },
            myalert2: function() {
                this.myalert();
            }
        },handler);
    }
})(jQuery);

$(document).ready(function(){
    var blacksheep = new sheepclass({'color':'black'});
    blacksheep.handler.myalert2();
})

Answer 1

thatヘルパー変数を使用してコンテキストを渡して、これを試してください

var sheepclass ;
(function($) {
    sheepclass = function(handler){
        var $div = $('div');
        var that = this;
        this.handler = $.extend({
            'sizes': 'thin', 
            'eat': 'grass',
            'color': 'white',
            'page':[],
            myalert: function() {
                myconsole();
                function myconsole() {
                    that.handler.page[0] = 100; 
                    console.log(that.handler.page[0]);
                }
            },
            myalert2: function() {
                this.myalert();
            }
        },handler);
    }
})(jQuery);

$(document).ready(function(){
    var blacksheep = new sheepclass({'color':'black'});
    blacksheep.handler.myalert2();
})

Answer 2

内部myconsole thisはオブジェクトと同じではありませんが、Window代わりに参照します。したがって、次のようになります。インデックスを作成する値this.pageは違いを生じません。undefinedpage

呼び出しを次のように変更する必要があります。

myconsole.call(this);

Answer 3

このコードの多くは無意味なようです。IIFEのdocument.readyようにDOM操作がないため、ハンドラーは不要です。コードは次のように減らすことができます。

var sheepclass = function(handler){
    this.handler = $.extend({
        'sizes': 'thin', 
        'eat': 'grass',
        'color': 'white',
        'page':[],
        myalert: function() {
            var context = this;
            function myconsole() {
                context.page[0] = 100; 
                console.log(context.page[0]);
            }
            myconsole();
        }
    },handler);
}

var blacksheep = new sheepclass({'color':'black'});
blacksheep.handler.myalert();

別のメソッドを呼び出すだけのメソッドを持つ必要がないことにも注意してください。

Answer 4

「これ」はmyconsole関数を指しているためです。

これを試して：

var sheepclass ;
(function($) {
    sheepclass = function(handler){
        var $div = $('div');    
        **var page = this.page;**
        this.handler = $.extend({
            'sizes': 'thin', 
            'eat': 'grass',
            'color': 'white',
            'page':[],
            myalert: function() {
                myconsole();
                function myconsole() {
                    **page**[0] = 100; 
                    console.log(**page**[0]);
                }
            },
            myalert2: function() {
                this.myalert();
            }
        },handler);
    }
})(jQuery);

Answer 5

のthat変数を作成しますthis

    var sheepclass ;
    (function($) {
        sheepclass = function(handler){
            var $div = $('div');            
            this.handler = $.extend({
                'sizes': 'thin', 
                'eat': 'grass',
                'color': 'white',
                'page':[200,300],
                myalert: function() {
                    var that = this;
                    myconsole();
                    function myconsole() {
                        that.page = that.page || []
                        that.page[0] = 100; 
                        console.log(that.page[0]);
                    }
                },
                myalert2: function() {
                    this.myalert();
                }
            },handler);
        }
    })(jQuery);

    $(document).ready(function(){
        var blacksheep = new sheepclass({'color':'black'});
        blacksheep.handler.myalert2();
    })