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

很多这样的代码似乎毫无意义。处理程序是不必要的document.ready，因为没有 DOM 操作，就像 IIFE 一样。您的代码可以简化为：

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 2

试试这个，通过使用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 3

insidemyconsole this不等于你的对象，而是指Window代。因此this.page是undefined- 您索引的值page没有任何区别。

您必须将呼叫更改为：

myconsole.call(this);

Answer 4

因为“this”指的是 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();
    })