Javascript OOP - доступ к унаследованному свойству или функции из замыкания внутри подкласса

Question

Я использую хелпер наследования JavaScript, предоставленный здесь: http://ejohn.org/blog/simple-javascript-inheritance/

У меня есть следующий код, и у меня возникла проблема с доступом к унаследованному свойству или функции из замыкания внутри подкласса, как показано ниже.Я новичок в ООП-коде JavaScript, и я ценю ваш совет.Я предполагаю, что в закрытии контекст меняется на JQuery (эта переменная), следовательно, проблема.Я ценю ваши комментарии.

Спасибо, -A

PS - Использование JQuery 1.5

     var Users = Class.extend({
                init: function(names){this.names = names;}
            });
            var HomeUsers = Users.extend({
                work:function(){ 
//                alert(this.names.length); // PRINTS A 
//                var names = this.names;  // If I make a local alias it works
                    $.map([1,2,3],function(){
                        var newName = this.names.length; //error this.names is not defined.
                        alert(newName); 
                    });

                }
            });

var users = new HomeUsers(["A"]);
users.work();

Answer 1

this во внутренней функции

    function(){
        var newName = this.names.length;
        alert(newName); 
    }

не совпадает с this во внешней функции.

work: function(){ 
    $.map([1,2,3],function(){
        var newName = this.names.length;
        alert(newName); 
    });
}

Есть много способов, которыми люди могут обойти это:

Сохранить ссылку на внешнюю функцию this как другую переменную

work: function(){ 
    var that = this;
    $.map([1,2,3],function(){
        var newName = that.names.length;
        alert(newName); 
    });
}

Как видите, вместо this используется that.

Используйте jQuery's $.proxy

work: function(){ 
    $.map([1,2,3],$.proxy(function(){
        var newName = this.names.length;
        alert(newName); 
    }, this));
}

Что делает $.proxy, так это создает другую функцию, которая вызывает функцию, которую вы передали (в данном случае, внутреннюю функцию), но явно устанавливает контекст функции (this) для вторых аргументов.

Использовать Function.prototype.bind

work: function(){ 
    $.map([1,2,3],function(){
        var newName = this.names.length;
        alert(newName);
    }.bind(this));
}

Он работает так же, как $.proxy в jQuery, но в этом вы вызываете метод bind функции.

Это поддерживается не во всех браузерах, но в MDC реализована реализация JavaScript-функции Function.prototype.bind в . Вы можете использовать его.

this в запутанном ключевом слове, и если вы хотите узнать больше о this, тогда посмотрите на this .

Answer 2

Переменная this не похожа на другие.Нормальные переменные всегда доступны для их дочерних областей, но this по умолчанию устанавливается в глобальный объект window при вызове функции:

alert(this.names); # Works; this == yourObject
$.map([1,2,3],function(){
    alert(this.names); # Doesn't work; this == window.
});

Документация для jQuery.map () подтверждает это:

this будет объектом глобального окна.

Таким образом, решение состоит в том, чтобы установить другую переменную this, чтобы она была доступна в дочерней области:

var that = this;
$.map([1,2,3],function(){
    alert(that.names);
});

Я рекомендую просмотреть презентацию Дугласа Крокфорда Функция Ultimate , в которой он показывает все виды сумасшедших вещей, которые вы можете делать с функциями и объектами в JavaScript.