Вопрос JavaScript

Question

Как человек, который пытается использовать более объектно-ориентированный подход к моему программированию на javascript, я наткнулся на камень преткновения, который, я уверен, вероятно, является чем-то очень простым, но возьмем следующую реализацию объекта (предположим, что объект jQueryдоступен для этого кода):

function Foo()
{
    this.someProperty = 5;
}

Foo.prototype.myFunc = function()
{
    //do stuff...
};

Foo.prototype.bar = function()
{
    //here 'this' refers to the object Foo
    console.log(this.someProperty);

    $('.some_elements').each(function()
    {
        //but here, 'this' refers to the current DOM element of the list of elements
        //selected by the jQuery selector that jquery's each() function is iterating through
        console.log(this);

        //so, how can i access the Foo object's properties from here so i can do
        //something like this?
        this.myFunc();
    });
};

Answer 1

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

Foo.prototype.bar = function()
{
    //here 'this' refers to the object Foo
    console.log(this.someProperty);

    var self = this;

    $('.some_elements').each(function()
    {
        self.myFunc();
    });
};

Answer 2

Прежде чем ввести function, который вы передаете в each, вам нужно захватить this внешней функции в переменной, а затем использовать переменную внутри function, которую вы передаете в each.

function Foo()
{
    this.someProperty = 5;
}

Foo.prototype.myFunc = function()
{
    //do stuff...
};

Foo.prototype.bar = function()
{
    // in here, this refers to object Foo

    // capture this in a variable
    var that = this;

    $('.some_elements').each(function()
    {
        // in here, this refers to an item in the jQuery object
        // for the current iteration   

        console.log(that);
        that.myFunc();
    });
};

Как вы узнали, this внутри функции, которую вы передаете each, ссылается на текущий элемент в объекте jQuery на каждой итерации, т.е. первая итерация ссылается на элемент в свойстве 0, вторая итерация ссылается на пункт на имущество 1 и т. д.

Answer 3

Вы открываете для себя полезность JavaScript-замыканий . Они невероятно мощные и полезные для создания краткого кода. Это одна из самых полезных функций JavaScript, которую вы можете попытаться понять.