JavaScript - Как создать функцию-прототип для печати текста в выбранном элементе? - PullRequest
Новая
       11

JavaScript - Как создать функцию-прототип для печати текста в выбранном элементе?

0 голосов
/ 23 марта 2019

У меня есть функция быстрого вызова id(), которая возвращает элемент так же, как и обычный document.getElementById(). Теперь я хотел бы создать функцию-прототип print(), которая заменит innerHTML. Я проверил некоторые вещи, и я получил код ниже. Это не работает, и я не совсем понимаю, почему ... Может кто-нибудь помочь мне решить проблему? Спасибо... 

var id = function(item) {
	this.element = document.getElementById(item);
	return element;
}

id.prototype.print = function(value) {
	this.element.innerHTML = value;
}
document.body.onclick = function() {
  id('target').print('printed!');
}
#target {
  background: #00000055;
  padding: 10px;
  margin: 30px;
  display: inline-block;
  cursor: pointer;
}
<body>
  <div id="target">some text</div>
</body>

Ответы [ 3 ]

3 голосов
/ 23 марта 2019

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

var id = function(item) {
	this.element = document.getElementById(item);
}

id.prototype.print = function(value) {
	this.element.innerHTML = value;
}
document.body.onclick = function() {
  const myElm = new id('target');
  myElm.print('printed!');
}
#target {
  background: #00000055;
  padding: 10px;
  margin: 30px;
  display: inline-block;
  cursor: pointer;
}
<body>
  <div id="target">some text</div>
</body>

Когда вы выполните 

return element;

в конце конструктора, это приведет к тому, что возвращаемый элемент будет простой HTML-элемент , а не экземпляр id (и только экземпляры id имеют метод print).

Если вы не хотитеиспользовать new при вызове id, а затем id сам создать и возвратить экземпляр чего-то, у которого есть метод print (вызывая new в id и возвращая его): 

var id = function(item) {
  const instance = new MyElmClass(item);
  return instance;
}
var MyElmClass = function(item){
  this.element = document.getElementById(item);
};

MyElmClass.prototype.print = function(value) {
	this.element.innerHTML = value;
}
document.body.onclick = function() {
  const myElm = id('target');
  myElm.print('printed!');
}
#target {
  background: #00000055;
  padding: 10px;
  margin: 30px;
  display: inline-block;
  cursor: pointer;
}
<body>
  <div id="target">some text</div>
</body>
2 голосов
/ 23 марта 2019

Как уже отмечали другие, вам нужно создать объект, чтобы использовать его прототип. Однако new id все время утомительно, поэтому давайте перенесем конструкцию в саму функцию: 

function id(item) {
  var obj = Object.create(id.prototype);
  obj.element = document.getElementById(item);
  return obj;
}

id.prototype.print = function(value) {
  this.element.innerHTML = value;
}

document.body.onclick = function() {
  id('target').print('printed!');
}
<body>
  <div id="target">some text</div>
</body>

Теперь давайте сделаем пару улучшений. Для краткости переименуйте id в $, сделайте так, чтобы он принимал произвольные селекторы, и переименуйте print в html: 

function $(selector) {
  var obj = Object.create($.prototype)
  obj.element = document.querySelector(selector);
  return obj;
}

$.prototype.html = function(value) {
  this.element.innerHTML = value;
}

document.body.onclick = function() {
  $('#target').html('printed!');
}
<body>
  <div id="target">some text</div>
</body>

Поздравляем, мы только что изобрели jQuery! ;)

0 голосов
/ 23 марта 2019

Ваше закрытие, просто создайте экземпляр объекта и не нужно возвращаться. 

var id = function(item) {
    this.element = document.getElementById(item);
}

id.prototype.print = function(value) {
    this.element.innerHTML = value;
}

var target = new id('target'); // <-- instantiate the object

document.body.onclick = function() {
  target.print('printed!');
}
...