Почему я получаю в консоль undefined?

Question

[Дима Паутов]

Добрый день!
Есть такой код:

;(function($, window, document, undefined) {
	
	'use strict';

	var AdminFields = function(template, appendBlock){
		// Шаблон для вставки новых блоков с полями
		this.template = $(template).clone(true, true);

		// Блок, куда будет уставлять блоки
		this.appendBlock = $(appendBlock);

		console.log(this.appendBlock);
	};

	AdminFields.prototype = {

		// Добавить блок с полями
		addFields: function(){
			var self = this;

			console.log(self.appendBlock);
		},

		// Удалить последний блок с полями
		removeFields: function(){
			var self = this;

		},

		// Удалить все добавленные блоки с полями
		removeAllFields: function(){
			var self = this;

		}
	};

	window.AdminFields = AdminFields;

})(jQuery, window, document);

Вызов методов:

var adminFields = new AdminFields('#cms_formfieldshablone', '#newFields');
	
	console.log(adminFields);
	
	$('#addFields').on('click', adminFields.addFields);
	
	$('#removeFields').on('click', adminFields.removeFields);
	
	$('#removeAllFields').on('click', adminFields.removeAllFields);

Там есть метод addFields, почему он, при вызове, выводит мне в консоль undefined, а в самом конструкторе, строка console.log(this.appendBlock); как и должно быть, выводит в консоль мой элемент?

Пример на fiddle

Answer 1

[Алексей Зуев]

Потому что там this - DOM element button#addFields

$('#addFields').on('click', adminFields.addFields);

В этом коде adminFields.addFields - это не вызов метода addFields объекта adminFields, а просто мы передаем ссылку на функцию.
Как пофиксить:

$('#addFields').on('click', function() {
  adminFields.addFields();
});

$('#addFields').on('click', adminFields.addFields.bind(adminFields));

Comments

[Дима Паутов]

ой, и в правду. А как сделать иначе?

Answer 2

[Dmitriy Uvarov]

Попробуйте

$('#addFields').on('click', () => adminFields.addFields());

Comments

[Дима Паутов]

Да, так работает, большое спс. Но ES6 я пока не хочу использовать. Мне нужно понять, как исправить тот код, что я накатал.

[Dmitriy Uvarov]

function(event){ ... return adminFields.addFields() ... }

Answer 3

[Kovalsky]

Ну можно например bind сделать, как-то так