Как использовать шаблон прототипа в JavaScript?

Question

У меня есть простой сценарий, как показано ниже:

На странице HTML есть простая таблица, в которой отображается список элементов.Эта сетка имеет все флажки, как функциональность.

При использовании флажка click, все элементы в сетке должны быть выбраны.

Я использую приведенный ниже скрипт для запуска:

(function (window, $) {

    var UnfreezeTest = function () {
        return new UnfreezeTest.init();
    }

    //Create prototype to add new methods here 

    UnfreezeTest.prototype = {
        selectAll: function (chkAllElement) {
            $(".js-chk input[type='checkbox']").attr("checked", chkAllElement.checked);
        },
        reset: function () { 

        }
    };

    UnfreezeTest.init = function () {
        //Initialize any object here 
        //Example 
        //this.propertyName = value;
    }

    //Assign prototype for newly created object to point to the methods
    UnfreezeTest.init.prototype = UnfreezeTest.prototype;

    window.UnfreezeTest = UnfreezeTest;


} (window, jQuery));

Я не хочу использовать оператор new при создании объекта.

Я хочу использовать, как показано ниже:

var obj = UnfreezeTest();

Есть ли какие-либо предложения или я делаю это правильно?

Answer 1

Другой шаблон, который вы можете использовать, для которого не требуется прототип или слово «новый», выглядит следующим образом:

function UnfreezeTest(tableId) {
	var tableId = tableId;
	var obj = {
		selectAll: function (chkAllElement) {
			$('#' + tableId + " .js-chk input[type='checkbox']").attr("checked", chkAllElement.checked);
		},
		reset: function () { 

		}
	};
	return obj;
}

var unfreeze = UnfreezeTest(tableId);

Answer 2

К сожалению, ответ «нет, вы делаете это неправильно».

Объяснение:

• UnfreezeTest - это фабричная функция, а не конструктор,Возвращает объект.Следовательно, вызов его с помощью new UnfreezeTest() не имеет значения - он возвращает экземпляр UnfreezeTest.init, который оператор new, используемый в вызове, передает обратно вызывающей стороне.

• UnfreezeTest.initэто конструкторЛюбые свойства прототипа его экземпляров должны быть установлены на UnfreezeTest.init.prototype.

• Установка унаследованных свойств на UnfreezeTest.prototype и затем установка UnfreezeTest.init.prototype на UnfreezeTest.prototype, а затем возврат экземпляраUnfreezeTest.init от звонка до UnfreezeTest - упражнение в обфускации .

Answer 3

Если единственной целью является создание экземпляра этих вызовов с new и без него, то вы можете сделать это следующим образом:

function UnfreezeTest(tableId) {
  // check if this is an instance of UnfreezeTest
  if( !(this instanceof UnfreezeTest) ) {
    // if it is not then the function was not invoked with new so create an instance
    return new UnfreezeTest(tableId) 
  }
  this.tableId = tableId;
}

UnfreezeTest.prototype = {
  selectAll: function (chkAllElement) {
    $('#' + this.tableId + " .js-chk input[type='checkbox']").attr("checked", chkAllElement.checked);
  },
  reset: function () { 

  }
};


console.dir(UnfreezeTest(1234))
console.dir(new UnfreezeTest(1234))

Но я не рекомендую этот шаблон, потому что он ухудшает удобство обслуживания, не нарушайте шаблон общего языка только потому, что вы не любите использовать new.Я бы предложил вместо этого использовать явную фабричную функцию:

function UnfreezeTest(tableId) {
  this.tableId = tableId;
}

UnfreezeTest.prototype = {
  selectAll: function (chkAllElement) {
    $('#' + this.tableId + " .js-chk input[type='checkbox']").attr("checked", chkAllElement.checked);
  },
  reset: function () { 

  }
};

function createUnfreezeTest(teableId) {
  return new UnfreezeTest(teableId)
}


console.dir(createUnfreezeTest(1234))

Answer 4

если я правильно понимаю, для создания экземпляров ваших прототипов, я думаю, вам нужно что-то похожее на следующее:

var UnfreezeTest = function (tableId) {
	this.tableId = tableId;
}

UnfreezeTest.prototype = {
	selectAll: function (chkAllElement) {
		$('#' + this.tableId + " .js-chk input[type='checkbox']").attr("checked", chkAllElement.checked);
	},
	reset: function () { 

	}
};

var unfreeze1 = new UnfreezeTest('myTable1');
unfreeze1.selectAll();


var unfreeze2 = new UnfreezeTest('myTable2');
unfreeze2.selectAll();

Надеюсь, это поможет