«это» со ссылкой на то внутри функции вместо объекта (JQuery)

Question

У меня есть следующий класс:

function courseOversight() { 
 
    this.courseBlocks = []; // Stores the courseblocks on the page 
 
    this.getCourseBlocks = function() { 
 
    $(".course-block").each(function(){ 
 
     var block = new courseBlock(); 
 
     this.courseBlocks.push(block); 
 
    }); 
 
    } 
 
}

Как вы можете видеть, я пытаюсь заполнить в object's courseBlocks массив с курсоромBlocks на странице. Однако в цикле each() «this» относится к блоку курса, который я сейчас добавляю, а не к объекту курсора. Как я могу получить доступ к массиву курсоров CourseVversights, не используя теперь недоступное ключевое слово «this»? Благодаря!

Answer 1

Вы можете решить эту проблему путем присвоения «это» переменной, прежде чем войти в каждый как следующий

function courseOversight() { 
var _this = this; //Assign 'this' context to a new var 
this.courseBlocks = []; // Stores the courseblocks on the page 
this.getCourseBlocks = function() { 
    $(".course-block").each(function(){ 
     var block = new courseBlock(); 
     // Now you can call the following like this. 
     // _this.courseBlocks.push(block); 
     this.courseBlocks.push(block); 
    }); 
} 
} 

Answer 2

Вы можете сохранить this другой переменной (ре self)

function courseBlock(){ 
 
} 
 

 
function courseOversight() { 
 
    var self = this; 
 
    self.courseBlocks = []; // Stores the courseblocks on the page 
 
    self.getCourseBlocks = function() { 
 
    $(".course-block").each(function(){ 
 
     var block = new courseBlock(); 
 
     self.courseBlocks.push(block); 
 
    }); 
 
    } 
 
    self.getCourseBlocks(); 
 
    console.log("Tests: ", self.courseBlocks); 
 
} 
 
courseOversight();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="course-block">Block 1</div> 
 
    <div class="course-block">Block 2</div> 
 
    <div class="course-block">Block 3</div> 
 
</div>