Главная › Телефон › Не работает наследование в js. JavaScript — шаблоны наследования. Запутывающая всех конструкция new

Не работает наследование в js. JavaScript — шаблоны наследования. Запутывающая всех конструкция new

Очень часто дизайнеры рисуют макеты с нестандартными элементами форм, т.е. оформление чекбоксов, радиокнопок, инпутов и селектов отличается от того, что рендерит браузер по умолчанию. Таким образом, перед верстальщиком возникает задача кастомизировать оформление, в том числе это касается элементов select.

В статье мы рассмотрим, как изменить внешний вид select-ов. Однако мы будем придерживаться следующей идеологии. Кастомизировать имеет смысла только дефолтное свёрнутое состояние селекта, а оформление выпадающего списка должно оставаться стандартным. Поэтому решение, описанное ниже, не подойдет, если вам требуется сложный выпадающий список, например, с иконками или чекбоксами для каждого option.

С другой стороны такой подход позволяет:

1. Не писать javascript код, который эмулировал бы поведение селектов. Вся логика возлагается на браузер. Плагинов на сегодняшний день очень много, но не часто встретишь такой, который обрабатывал бы все крайние случаи, возникающие у пользователя при взаимодействии с этим контролом. Примером такого крайнего случая может служить автоматический выбор положения выпадающего списка (открытие вниз или вверх).

2. Раз за поведение и оформление выпадающего списка отвечает браузер, то и не требуется писать какое-то отдельное решение для мобильных устройств, которое позволяло бы удобно работать с селектами на тач-устройствах с маленькими экранами. Встроенные нативные селекты сами принимают нужный вид, ведь на мобильных платформах уже всё продумано. Например, пользователи iOS при клике по селекту увидят не ваш кастомный список, а стандартный привычный. Пользователям не нужно будет подстраивать своё поведение под ваш конкретный сайт, его поведение будет таким же как на всех других сайтах. И ему это удобно, а ради него вы и делали сайт.

Итак, как уже было сказано, для оформления select достаточно CSS3 свойств.

Основное свойство, которое позволит изменить внешний вид селекта, это appearance . Оно заставляет какой-либо элемент принять вид того, что вы захотите, например, можно заставить див стать кнопкой. Однако в рамках нашей задачи интересно значение none , которое означает, что к элементу вообще не нужно применять какой-либо стиль. Таким образом, мы сможем убрать специфичный для селекта атрибут - стрелочку вниз справа.

Select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; }

Как видно, убрать стрелку не составило труда, теперь остаётся добавить несколько тривиальных CSS-свойств вроде рамки, шрифта и прочего. Здесь конечно же можно добавить и скругление уголков, и тени и прочее, всё как нарисовал дизайнер в макете. Главное выпадающий список остаётся нативным.

Select { background: transparent; display: block; width: 100%; border: 1px solid #a7a7a7; color: #32353a; font-family: 16/Arial, sans-serif; font-size: 16px; line-height: 1.4; font-weight: normal; padding: 7px 10px 7px 10px; height: 36px; vertical-align: top; outline: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none !important; }

Теперь остаётся добавить фоном стрелку или какую-либо другую иконку. Использовать фон будем, поскольку псевдоэлементы вроде before и after для селекта работать не будут. Для лучшего отображения сайтов на различных устройствах с разным плотностью пикселей, на различных масштабах и т.п. принято использовать SVG иконки. Поэтому с помощью онлайн URL-encoder для SVG сконвертируем иконку в data URI. При этом важно помнить, что тег SVG должен иметь атрибут xmlns="http://www.w3.org/2000/svg" .

Получится следующий результат.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" fill-rule="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

Поскольку стрелка используется нестандартная, то можно переместить её влево или использовать вместо стрелки любое другое изображение, а можно и вовсе обойтись без иконок.

С приходом CSS3 стало возможным сделать красивый стиль для любого элемента на сайте. Потому что CSS3 даёт широкий спектр возможностей, которые ускоряют процесс разработки дизайна для сайта. Сегодня мы оформим элемент select на CSS. Кто не знает, этот элемент отвечает за выпадающий список на сайте. Многие используют стандартный вид, но его можно изменить, чтобы он подходил по дизайну к Вашему сайту.

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Скачать

Вот как выглядит этот Select оформленный на CSS:

Похожие статьи на эту тему:

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

1 шаг. Подключаем необходимые файлы

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами :

1 2

2 шаг. HTML структура элемента Select

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂). Простая форма, внутри которой выпадающий Select с его пунктами:

1 2 3 4 5 6 7 8 9 10 11 12

Страны Великобритании: Пожалуйста, выберите страну: Англия Северная Ирландия Шотландия Уэльс

3 шаг. Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

.dropcontainer { position : relative ; font-size : 16px ; color : #777 ; } .trigger { color : #777 ; padding : 10px ; font-size : 16px ; width : 50% ; background : #fff url () 98% center no-repeat ; display : block ; border : 1px solid #ccc ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; transition : all 0.5s ease; } .trigger :hover { color : #777 ; background : #f5f5f5 url (../images/select-arrow-open.png ) 98% center no-repeat ; } .activetrigger { color : #777 ; padding : 10px ; font-size : 16px ; width : 50% ; background : #f5f5f5 url () 98% center no-repeat ; display : block ; border : 1px solid #ccc ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; } .activetrigger :hover { background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ; color : #777 ; } .activetrigger :active { background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ; color : #777 ; } .dropcontainer ul { font-size : 16px ; border : 1px solid #ccc ; border-top : none ; background : #fff ; list-style-type : none ; padding : 10px ; margin : 0 ; width : 50% ; z-index : 100 ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; } .dropcontainer ul li { padding : 5px ; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; transition : all 0.5s ease; } .dropcontainer ul li :hover { background : #f5f5f5 ; outline : none ; } .dropcontainer ul li :first-child { display : none ; } .dropcontainer ul li :last-child { border-bottom : none ; } .dropdownhidden { display : none ; } .dropdownvisible { height : auto ; }

В демо примере стили расположены в папке css . Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем ".. " (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images .

Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

Вам нужно заменить последнее свойство dropdownvisible :

1 2 3

.dropdownvisible { height : auto ; }

1 2 3 4

.dropdownvisible { height : 200px ; overflow-y : scroll ; }

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
✓ Opera 12.14, Opera 12.15, Opera 12.16
✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ и видео по установке.

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .

Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.

Не поддаются полной стилизации следующие элементы html-форм:

раскрывающийся список ;
флажок ;
переключатель .
поле для отправки файла .

Как уже понятно из заголовка поста, здесь речь пойдет только про селекты.

Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.

Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).

Демонстрация работы плагина

На вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.

Достоинства

При отключенном JavaScript отображаются стандартные селекты.
Небольшой размер скрипта, примерно 4 килобайта.
Работает в IE6+ и всех современных десктопных браузерах.
Выводится внутристрочно.
Легко поддается оформлению через CSS.
Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height).
Автоматически подстраивает ширину, если она не указана.
Поддерживает прокрутку колесом мыши.
Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
Поддерживает атрибут «disabled».
Работает и с динамически добавляемыми/изменяемыми селектами.

Недостатки

Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
Не поддерживает группировку элементов списка (тег ).
Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.

Скачать

Плагин недоступен, т.к. он уже не актуален.

jQuery-плагин «SelectBox Styler»

Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012

Обновления 22.09.2012 Переделал скрипт в плагин (в том числе сделал минимизированный вариант), а также добавил поддержку динамического добавления/изменения селектов. 07.10.2012 Исправлено поведение скрипта при использовании метода onchange у тега . Подключение плагина

Если на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом :

Сразу после jQuery подключите файл со скриптом:

(function($) { $(function() { $("select").selectbox(); }) })(jQuery)

Этот код поместите перед тегом после вышеуказанных файлов.

При динамическом изменении селектов необходимо запустить триггер refresh , например:

(function($) { $(function() { $("button").click(function() { $("select").find("option:nth-child(5)").attr("selected", true); $("select").trigger("refresh"); }) }) })(jQuery)

HTML-код после выполнения плагина

Его структура выглядит следующим образом:

-- Выберите --

-- Выберите --
Пункт 1
Пункт 2
Пункт 3

-- Выберите -- Пункт 1 Пункт 2 Пункт 3

CSS-классы, используемые для оформления селекта

Чтобы оформить селекты с помощью CSS, используйте следующие классы:

.selectbox	родительский контейнер для всего селекта
.selectbox .select	селект в свернутом состоянии
.selectbox.focused .select	фокус на селекте, когда нажата клавиша Tab
.selectbox .select .text	вложенный тег для свернутого селекта на случай вставки фонового изображения по технике «раздвижных дверей»
.selectbox .trigger	правая часть свернутого селекта (условный переключатель)
.selectbox .trigger .arrow	вложенный тег для переключателя (стрелка)
.selectbox .dropdown	обертка для выпадающего списка
.selectbox .dropdown ul	выпадающий список
.selectbox li	пункт (опция) селекта
.selectbox li.selected	выбранный пункт селекта
.selectbox li.disabled	отключенный (недоступный для выбора) пункт селекта

Заключение

Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.

Давайте начнем с отвлеченного примера:

Var a = {test: 11} b = a; b.test = 12; console.log(a.test); // Выведет 12!

Это происходит потому, что объекты в JS присваиваются и передаются по ссылке а не по значению.

Свойство .prototype - это объект. Когда вы выполняете код:

Bar.prototype = Foo.prototype;

вы присваиваете свойству Bar.prototype ссылку на объект Foo.prototype . Как следствие, любое изменение свойства Bar.prototype приводит к изменению Foo.prototype , о чем и говорится в приведнной цитате:

This means when you start assigning, like Bar.prototype.myLabel = ..., you"re modifying not a separate object but the shared Foo.prototype object itself, which would affect any objects linked to Foo.prototype.

Небольшое лирическое отступление .

Bar.prototype = new Foo();

а всех тех, кто вам это советует -- смело отправляйте учить основы JS . Вся соль в том, что вызывая new Foo() вы вызываете конструктор объекта. При этом сам конструктор может с одной стороны накладывать ограничения на передаваемые аргументы, а с другой иметь побочные действия. Разберем каждый из этих случаев отдельно.

Предположим, у вас есть вот такой конструктор, накладывающий ограничения на свои аргументы:

Foo = function(a) { if (typeof a === "undefined") { throw new Error("You have to set the first argument."); } this.a = a; }

В этом случае вы уже не можете просто взять и выполнить:

Bar.prototype = new Foo();

т.к. вам нужно в явном виде предать аргумент в конструктор, который полностью лишен смысла в момент описания иерархии наследования. Самое интересное, что значение параметра a все равно будет затерто при вызове конструктора Foo в дочернем конструкторе Bar . Поэтому конструкция new Foo() еще и лишена смысла.

Теперь предположим, что родительский конструктор имеет побочные эффекты:

Foo = function(a) { console.log("Here I am!"); }

При использовании:

Bar.prototype = new Foo();

и дальнейшем:

Var Bar = function() { Foo.call(this); }

строка " Here I am! " будет выведена даважды . Согласитесь, это не всегда желаемое поведение системы.

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

Приведу, для справки, правильную реализацию наследования в JS:

// Базовый конструктор var Foo = function() { // ... }; Foo.prototype.doSomething = function() { // ... }; // Дочерний конструктор var Bar = function() { // Вызываем базовый конструктор для текущего объекта. Foo.call(this); // ... }; // Устанавливаем правильное значение в цепочке прототипов. Bar.prototype = Object.create(Foo.prototype, { // Выставляем правильную функцию-конструктор для всех создаваемых // объектов. constructor: { value: Bar, enumerable: false, writable: true, configurable: true } }); // Расширяем прототип дочернего "класса". Этот шаг должен идти // СТРОГО ПОСЛЕ установки значения Bar.prototype. Bar.prototype.doAnotherAction = function() { // ... };

В случае, когда вы не можете использовать Object.create (старые барузеры) вы можете либо использовать один из существующих полифилов, либо сделать все ручками(через анонимный конструктор):

Var inherits = function(ctor, superCtor) { // Временный конструктор, который не делает ничего и нужен // только для разрыва прямой связи между прототипами ctor // и superCtor. Его использование позволяет менять прототип // дочернего конструктора, не боясь сломать родительский. var Tmp = function() {}; Tmp.prototype = superCtor.prototype; // Обратите внимание, вызов new Tmp() не имеет АБСОЛЮТНО // никаких побочных эффектов и не накладывает ограничений // на передаваемые значения. ctor.prototype = new Tmp(); // Выставляем правильную функцию-конструктор для всех // создаваемых объектов. ctor.prototype.constructor = ctor; };

С учетом всего выше сказанного универсальная функции наследования может иметь вид:

Var inherits = (function() { if (typeof Object.create === "function") { // Используем более простой вариант, если Object.create существует. return function(ctor, superCtor) { ctor.prototype = Object.create(superCtor.prototype, { constructor: { value: ctor, enumerable: false, writable: true, configurable: true } }); }; } // Используем временный конструктор для старых браузеров return function(ctor, superCtor) { var Tmp = function() {}; Tmp.prototype = superCtor.prototype; ctor.prototype = new Tmp(); ctor.prototype.constructor = ctor; }; })();

В реализациях выше, после присваивания прототипа, задается свойство Function.prototype.constructor . Хотя это свойство редко используется на практике (лично я ни разу не видел в production коде), полноценная реализация наследования должна его выставлять.

JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in ES2015, but is syntactical sugar, JavaScript remains prototype-based).

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its prototype . That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain .

Inheriting "methods"

JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of method overriding ).

When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.

Var o = { a: 2, m: function() { return this.a + 1; } }; console.log(o.m()); // 3 // When calling o.m in this case, "this" refers to o var p = Object.create(o); // p is an object that inherits from o p.a = 4; // creates a property "a" on p console.log(p.m()); // 5 // when p.m is called, "this" refers to p. // So when p inherits the function m of o, // "this.a" means p.a, the property "a" of p

Using prototypes in JavaScript

Let"s look at what happens behind the scenes in a bit more detail.

In JavaScript, as mentioned above, functions are able to have properties. All functions have a special property named prototype . Please note that the code below is free-standing (it is safe to assume there is no other JavaScript on the webpage other than the below code). For the best learning experience, it is highly recommended that you open a console (which, in Chrome and Firefox, can be done by pressing Ctrl+Shift+I), navigate to the "console" tab, copy-and-paste in the below JavaScript code, and run it by pressing the Enter/Return key.

Function doSomething(){} console.log(doSomething.prototype); // It does not matter how you declare the function, a // function in JavaScript will always have a default // prototype property. var doSomething = function(){}; console.log(doSomething.prototype);

As seen above, doSomething() has a default prototype property, as demonstrated by the console. After running this code, the console should have displayed an object that looks similar to this.

{ constructor: ƒ doSomething(), __proto__: { constructor: ƒ Object(), hasOwnProperty: ƒ hasOwnProperty(), isPrototypeOf: ƒ isPrototypeOf(), propertyIsEnumerable: ƒ propertyIsEnumerable(), toLocaleString: ƒ toLocaleString(), toString: ƒ toString(), valueOf: ƒ valueOf() } }

We can add properties to the prototype of doSomething() , as shown below.

Function doSomething(){} doSomething.prototype.foo = "bar"; console.log(doSomething.prototype);

This results in:

{ foo: "bar", constructor: ƒ doSomething(), __proto__: { constructor: ƒ Object(), hasOwnProperty: ƒ hasOwnProperty(), isPrototypeOf: ƒ isPrototypeOf(), propertyIsEnumerable: ƒ propertyIsEnumerable(), toLocaleString: ƒ toLocaleString(), toString: ƒ toString(), valueOf: ƒ valueOf() } }

We can now use the new operator to create an instance of doSomething() based on this prototype. To use the new operator, simply call the function normally except prefix it with new . Calling a function with the new operator returns an object that is an instance of the function. Properties can then be added onto this object.

Try the following code:

Function doSomething(){} doSomething.prototype.foo = "bar"; // add a property onto the prototype var doSomeInstancing = new doSomething(); doSomeInstancing.prop = "some value"; // add a property onto the object console.log(doSomeInstancing);

This results in an output similar to the following:

{ prop: "some value", __proto__: { foo: "bar", constructor: ƒ doSomething(), __proto__: { constructor: ƒ Object(), hasOwnProperty: ƒ hasOwnProperty(), isPrototypeOf: ƒ isPrototypeOf(), propertyIsEnumerable: ƒ propertyIsEnumerable(), toLocaleString: ƒ toLocaleString(), toString: ƒ toString(), valueOf: ƒ valueOf() } } }

As seen above, the __proto__ of doSomeInstancing is doSomething.prototype . But, what does this do? When you access a property of doSomeInstancing , the browser first looks to see if doSomeInstancing has that property.

If doSomeInstancing does not have the property, then the browser looks for the property in the __proto__ of doSomeInstancing (a.k.a. doSomething.prototype). If the __proto__ of doSomeInstancing has the property being looked for, then that property on the __proto__ of doSomeInstancing is used.

Otherwise, if the __proto__ of doSomeInstancing does not have the property, then the __proto__ of the __proto__ of doSomeInstancing is checked for the property. By default, the __proto__ of any function"s prototype property is window.Object.prototype . So, the __proto__ of the __proto__ of doSomeInstancing (a.k.a. the __proto__ of doSomething.prototype (a.k.a. Object.prototype)) is then looked through for the property being searched for.

If the property is not found in the __proto__ of the __proto__ of doSomeInstancing, then the __proto__ of the __proto__ of the __proto__ of doSomeInstancing is looked through. However, there is a problem: the __proto__ of the __proto__ of the __proto__ of doSomeInstancing does not exist. Then, and only then, after the entire prototype chain of __proto__ "s is looked through, and there are no more __proto__ s does the browser assert that the property does not exist and conclude that the value at the property is undefined .

Let"s try entering some more code into the console:

Function doSomething(){} doSomething.prototype.foo = "bar"; var doSomeInstancing = new doSomething(); doSomeInstancing.prop = "some value"; console.log("doSomeInstancing.prop: " + doSomeInstancing.prop); console.log("doSomeInstancing.foo: " + doSomeInstancing.foo); console.log("doSomething.prop: " + doSomething.prop); console.log("doSomething.foo: " + doSomething.foo); console.log("doSomething.prototype.prop: " + doSomething.prototype.prop); console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);

This results in the following:

DoSomeInstancing.prop: some value doSomeInstancing.foo: bar doSomething.prop: undefined doSomething.foo: undefined doSomething.prototype.prop: undefined doSomething.prototype.foo: bar

Different ways to create objects and the resulting prototype chain Objects created with syntax constructs var o = {a: 1}; // The newly created object o has Object.prototype as its [] // o has no own property named "hasOwnProperty" // hasOwnProperty is an own property of Object.prototype. // So o inherits hasOwnProperty from Object.prototype // Object.prototype has null as its prototype. // o ---> Object.prototype ---> null var b = ["yo", "whadup", "?"]; // Arrays inherit from Array.prototype // (which has methods indexOf, forEach, etc.) // The prototype chain looks like: // b ---> Array.prototype ---> Object.prototype ---> null function f() { return 2; } // Functions inherit from Function.prototype // (which has methods call, bind, etc.) // f ---> Function.prototype ---> Object.prototype ---> null With a constructor

A "constructor" in JavaScript is "just" a function that happens to be called with the new operator .

Function Graph() { this.vertices = ; this.edges = ; } Graph.prototype = { addVertex: function(v) { this.vertices.push(v); } }; var g = new Graph(); // g is an object with own properties "vertices" and "edges". // g.[] is the value of Graph.prototype when new Graph() is executed.

With Object.create "use strict"; class Polygon { constructor(height, width) { this.height = height; this.width = width; } } class Square extends Polygon { constructor(sideLength) { super(sideLength, sideLength); } get area() { return this.height * this.width; } set sideLength(newLength) { this.height = newLength; this.width = newLength; } } var square = new Square(2); Performance

The lookup time for properties that are high up on the prototype chain can have a negative impact on the performance, and this may be significant in the code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.

Also, when iterating over the properties of an object, every enumerable property that is on the prototype chain will be enumerated. To check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnProperty method which all objects inherit from Object.prototype . To give you a concrete example, let"s take the above graph example code to illustrate it:

Console.log(g.hasOwnProperty("vertices")); // true console.log(g.hasOwnProperty("nope")); // false console.log(g.hasOwnProperty("addVertex")); // false console.log(g.__proto__.hasOwnProperty("addVertex")); // true

hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain.

Note: It is not enough to check whether a property is undefined . The property might very well exist, but its value just happens to be set to undefined .

Bad practice: Extension of native prototypes

One misfeature that is often used is to extend Object.prototype or one of the other built-in prototypes.

This technique is called monkey patching and breaks encapsulation . While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional non-standard functionality.

The only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like Array.forEach .

Summary of methods for extending the prototype chain

Here are all 4 ways and their pros/cons. All of the examples listed below create exactly the same resulting inst object (thus logging the same results to the console), except in different ways for the purpose of illustration.

Name	Example(s)	Pro(s)	Con(s)
New-initialization	function foo(){} foo.prototype = { foo_prop: "foo val" }; function bar(){} var proto = new foo; proto.bar_prop = "bar val"; bar.prototype = proto; var inst = new bar; console.log(inst.foo_prop); console.log(inst.bar_prop);	Supported in every browser imaginable (support goes all the way back to IE 5.5!). Also, it is very fast, very standard, and very JIST-optimizable.	In order to use this method, the function in question must be initialized. During this initialization, the constructor may store unique information that must be generated per-object. However, this unique information would only be generated once, potentially leading to problems. Additionally, the initialization of the constructor may put unwanted methods onto the object. However, both these are generally not problems at all (in fact, usually beneficial) if it is all your own code and you know what does what where.
Object.create	function foo(){} foo.prototype = { foo_prop: "foo val" }; function bar(){} var proto = Object.create(foo.prototype); proto.bar_prop = "bar val"; bar.prototype = proto; var inst = new bar; console.log(inst.foo_prop); console.log(inst.bar_prop); function foo(){} foo.prototype = { foo_prop: "foo val" }; function bar(){} var proto = Object.create(foo.prototype, { bar_prop: { value: "bar val" } }); bar.prototype = proto; var inst = new bar; console.log(inst.foo_prop); console.log(inst.bar_prop)	Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the direct setting of __proto__ in a way that is one-time-only so that the browser can better optimize the object. Also allows the creation of objects without a prototype via Object.create(null) .	Not supported in IE8 and below. However, as Microsoft has discontinued extended support for systems running these old browsers, this should not be a concern for most applications. Additionally, the slow object initialization can be a performance black hole if using the second argument because each object-descriptor property has its own separate descriptor object. When dealing with hundreds of thousands of object descriptors in the form of object, there can arise a serious issue with lag.
Object.setPrototypeOf	function foo(){} foo.prototype = { foo_prop: "foo val" }; function bar(){} var proto = { bar_prop: "bar val" }; Object.setPrototypeOf(proto, foo.prototype); bar.prototype = proto; var inst = new bar; console.log(inst.foo_prop); console.log(inst.bar_prop); function foo(){} foo.prototype = { foo_prop: "foo val" }; function bar(){} var proto; proto=Object.setPrototypeOf({ bar_prop: "bar val" }, foo.prototype); bar.prototype = proto; var inst = new bar; console.log(inst.foo_prop); console.log(inst.bar_prop)	Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the dynamic manipulation of an objects prototype and can even force a prototype on a prototype-less object created with Object.create(null) .	Should-be-deprecated and ill-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE8 and below.
__proto__	function foo(){} foo.prototype = { foo_prop: "foo val" }; function bar(){} var proto = { bar_prop: "bar val", __proto__: foo.prototype }; bar.prototype = proto; var inst = new bar; console.log(inst.foo_prop); console.log(inst.bar_prop); var inst = { __proto__: { bar_prop: "bar val", __proto__: { foo_prop: "foo val", __proto__: Object.prototype } } }; console.log(inst.foo_prop); console.log(inst.bar_prop)	Support in all in-use-today browsers which are all non-microsoft browsers plus IE11 and up. Setting __proto__ to something that is not an object only fails silently. It does not throw an exception.	Grossly deprecated and non-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE10 and below.

prototype and Object.getPrototypeOf

JavaScript is a bit confusing for developers coming from Java or C++, as it"s all dynamic, all runtime, and it has no classes at all. It"s all just instances (objects). Even the "classes" we simulate are just a function object.

You probably already noticed that our function A has a special property called prototype . This special property works with the JavaScript new operator. The reference to the prototype object is copied to the internal [] property of the new instance. For example, when you do var a1 = new A() , JavaScript (after creating the object in memory and before running function A() with this defined to it) sets a1.[] = A.prototype . When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in [] . This means that all the stuff you define in prototype is effectively shared by all instances, and you can even later change parts of prototype and have the changes appear in all existing instances, if you wanted to.

If, in the example above, you do var a1 = new A(); var a2 = new A(); then a1.doSomething would actually refer to Object.getPrototypeOf(a1).doSomething , which is the same as the A.prototype.doSomething you defined, i.e. Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething .

In short, prototype is for types, while Object.getPrototypeOf() is the same for instances.

[] is looked at recursively , i.e. a1.doSomething , Object.getPrototypeOf(a1).doSomething , Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething etc., until it"s found or Object.getPrototypeOf returns null.

So, when you call

Var o = new Foo();

JavaScript actually just does

Var o = new Object(); o.[] = Foo.prototype; Foo.call(o);

(or something like that) and when you later do

O.someProp;

it checks whether o has a property someProp . If not, it checks Object.getPrototypeOf(o).someProp , and if that doesn"t exist it checks Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp , and so on.

In conclusion

It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features.