Наследование статической функции в JS

avatar
J-Cake
8 апреля 2018 в 11:04
40
2
0

Скажем, у меня есть четыре кнопки, расположенные следующим образом:

Click me (кнопка 1) - Or Click me (кнопка 2)

option 1(кнопка 3) - option 2 (кнопка 4)

Если я нажимаю кнопку 1 или 2, я хочу, чтобы локальная переменная была установлена ​​на то, какая кнопка была нажата.

Когда я нажимаю кнопку 3 или 4, мне нужно получить доступ к переменной, которая содержит кнопку, которая была нажата, и обработать ее.

Я хотел бы избежать создания переменных в глобальной области видимости или использования более одной. Это вообще возможно?

Что я пробовал:

function setButtonId(i) {
  this.id = i
}
setbuttonId.process = item => {
  console.log(item)
}
//tmpcode
Источник
J-Cake
8 апреля 2018 в 11:08
1

знаете, я не просто задаю вопросы, чтобы позлить сообщество, верно? Я задаю вопросы, потому что мне нужна помощь, и я не могу оторваться.

D. Pardal
8 апреля 2018 в 11:08
0

Не забудьте оператор new.

J-Cake
8 апреля 2018 в 11:09
0

Вроде надеялся избежать этого, но да, это сработает

D. Pardal
8 апреля 2018 в 11:09
0

Тогда вместо this.id = 1 используйте return {id: 1}.

Ответы (2)

avatar
Jonas Wilms
8 апреля 2018 в 11:13
1
   const logic = {
    id: null,
    setId(i) {
     this.id = i;
    },
    process() {
     console.log(this.id);
    }
 };

А затем используйте его как:

  button1.onclick = () => logic.setId(3);
  button4.onclick = () => logic.process();

Но на самом деле я бы предпочел неглобальную переменную внешней области видимости:

 {
   let id = null;
   function setId(i){ id = i}
   function process() {
     console.log(id);
   }
 }
J-Cake
8 апреля 2018 в 11:17
0

Спасибо за прямой ответ. Это сработало очень хорошо.

avatar
t.niese
8 апреля 2018 в 11:18
1

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

(function() {
  var lastId;
  document.getElementById("1").addEventListener('click', () => {
    lastId = 1;
  });

  document.getElementById("2").addEventListener('click', () => {
    lastId = 2;
  });

  document.getElementById("3").addEventListener('click', () => {
    console.log(lastId)
  });

  document.getElementById("4").addEventListener('click', () => {
    console.log(lastId)
  });
}())
<button id="1">1</button><button id="2">2</button><button id="3">3</button><button id="4">4</button>

или let:

{
  let lastId;
  document.getElementById("1").addEventListener('click', () => {
    lastId = 1;
  });

  document.getElementById("2").addEventListener('click', () => {
    lastId = 2;
  });

  document.getElementById("3").addEventListener('click', () => {
    console.log(lastId)
  });

  document.getElementById("4").addEventListener('click', () => {
    console.log(lastId)
  });
}
<button id="1">1</button><button id="2">2</button><button id="3">3</button><button id="4">4</button>
J-Cake
8 апреля 2018 в 11:21
0

Потрясающе, спасибо! такой подход я бы не придумал