Сегодня у меня была небольшая задачка на рефакторинг JS кода, и я натолкнулся на неожиданную особенность языка, о которой на протяжении 7 лет своего опыта программирования на этом ненавистном многими языке не задумывался и не сталкивался.
К тому же, я ничего не смог найти ни в русскоязычном, ни в английском интернете, в связи с чем решился опубликовать эту не очень длинную, не самую интересную, но полезную заметку.
Чтобы не пользоваться традиционными и бессмысленными константами foo/bar
, покажу непосредственно на примере, который был у нас в проекте, но всё же без кучи внутренней логики и с фейковыми значениями. Помните, что всё равно примеры получились довольно синтетические
Наступаем на грабли
Итак, у нас есть класс:
class BaseTooltip {
template = 'baseTemplate'
constructor(content) {
this.render(content)
}
render(content) {
console.log('render:', content, this.template)
}
}
const tooltip = new BaseTooltip('content')
// render: content baseTemplate
Всё логично
А потом нам понадобилось создать другой тип тултипов, в котором изменяется поле template
class SpecialTooltip extends BaseTooltip {
template = 'otherTemplate'
}
И вот тут меня ждал сюрприз, потому что при создании объекта нового типа происходит следующее
const specialTooltip = new SpecialTooltip('otherContent')
// render: otherContent baseTemplate
// ^ СТРАННО