Добавление метода к объекту через прототип

#javascript #prototype

Приведённый ниже код должен назначить объекту типа Image с помощью прототипа три
новых метода: protocol(), host() и pathname().
В браузере FireFox всё проходит нормально. Chrome выдаёт следующую ошибку:


  Uncaught TypeError: document.i1.protocol is not a function


Соответственно, и остальные функции document.i1.host и document.i1.path не выполняются.  

В чём заключается проблема, и как её решить?

function pr() {
    a = this.src.split(':');
    return a[0] + ':';
}

function ho() {
    a = this.src.split(':');
    path = a[1].split('/');
    return path[2];
}

function pa() {
    path = this.src.split('/');
    path[0] = '';
    path[2] = '';
    return path.join('/').split('///').join('/');
}

Image.prototype.protocol = pr;
Image.prototype.host = ho;
Image.prototype.pathname = pa;

document.write("
");
document.write(document.i1.src + "
");
document.write(document.i1.protocol() + "
");
document.write(document.i1.host() + "
");
document.write(document.i1.pathname() + "
");

    

Ответы

Ответ 1

Полученный  (например, с помощью document.getElementById('img') или new Image())
имеет тип HTMLImageElement. Соответственно, добавлять новые методы нужно именно в его
прототип.

Пример:



function log(info) {
    document.body.innerHTML += info + "
";
}

HTMLImageElement.prototype.protocol = function() {
    log("Protocol is called");
};

var img = document.getElementById('img');
log("Got image: " + img.constructor.name);
img.protocol();

var newImage = new Image();
log("New image: " + newImage.constructor.name);
newImage.protocol();




Ответ 2

function pr() {
    a = this.src.split(':');
    return a[0] + ':';
  }

  function ho() {
    a = this.src.split(':');
    path = a[1].split('/');
    return path[2];
  }

  function pa() {
    path = this.src.split('/');
    path[0] = '';
    path[2] = '';
    return path.join('/').split('///').join('/');
  }

  Image.prototype.protocol = pr;
  Image.prototype.host = ho;
  Image.prototype.pathname = pa;

  var out = document.getElementById("out"), i1, html;

  out.innerHTML = "
";
  i1 = document.getElementById('i1');

  html = out.innerHTML;
  html += "src: " + i1.src + "
";
  html += "protocol: " + i1.protocol() + "
";
  html += "host: " + i1.host() + "
";
  html += "pathname: " + i1.pathname() + "
";
  
  out.innerHTML = html;





Вероятно, вы несколько раз выполнили скрипт на странице, и появилось несколько элементов
с именем "i1", поэтому в последующи разы нужно было бы обращаться к document.i1[0].protocol().

Лучше сделать так:

document.write("
");
var i1 = document.getElementById('i1');

document.write(i1.src+"
");
document.write(i1.protocol()+"
");
...


Ответ 3

Вот рабочий вариант. Спасибо @Regent и @Sergiks и @Grundy 







При открытии страницы все работает корректно, выводиться вся необходимая информация,
не зависимо от браузера.


  Got image: HTMLImageElement
  
  http:
  
  localhost
  
  /JavaScriptLearning/img1.jpg