aksutov1996

Вот синтаксис использования

obj[Symbol.toPrimitive] = function(hint) {
  // вот код для преобразования этого объекта в примитив
  // он должен вернуть примитивное значение
  // hint = чему-то из "string", "number", "default"
};

У меня не было левой части, что ссылала бы на объект
В контрукторе добавил this и преобразование заработало

Рабочий код:

"use strict"

let user1 = new User ("number1", 10),
    user2 = new UserToPtimitive("number2", 20);
    /*user3 = new UserToStringAndValueOf("number3", 30),
    user4 = new UserOnlyToString("number4", 40);*/

alert("Number1: " + user1 + " , " + user1*0.1 + ";");
alert(`Number2: ${user2}, ${user2*0.1};`);
alert("Number2: " + user2 + " , " + user2*0.1 + ";"); //для бинарного операнта используется хинт "default", а с этим хинтом определяется аналогично number

function User(name, age) {
    this.name = name;
    this.age = age;
}

function UserToPtimitive(name, age) {
    this.name = name;
    this.age = age;
    this[Symbol.toPrimitive] = function(hint) {
        return hint == "string" ? this.name : this.age = age;
    };
}

Почему-то все ответы мне дали в комментарии, поэтому выделить нужного не могу.
Ответы были только на 1ый мой вопрос и все ответы направлены на то, чтоб создать отдельно js, ковырять старый от темы никто не предложил.
Сергей Сергей, дал полезный ответ в комментарии, этот ответ мне был ближе всего.
Но он не работает. Скорее всего из-за специфичности уже написанных js от темы.
Но этот ответ стал для меня объектом изучения, и я узнал больше о использовании селекторов и много нового. В общем навёл меня на многие вопросы, ответы которых я нашёл в гугле.
В итоге я перепробовал много разных подходов и сейчас остановился вот на таком коде:

$('li.menu-item-has-children').on('click', function() {
  //var stl = $('ul', 'li.menu-item-has-children').attr ('style');
  var stl = $('li.menu-item-has-children', 'div#ast-mobile-header').children("ul").attr ('style');
  if (stl == 'display: none;'){
    $('ul', 'li.menu-item-has-children').attr ('style', 'display: block;');
  }
  else {$('ul', 'li.menu-item-has-children').attr ('style', 'display: none;');}
  //return false; //перестаёт работать ссылка в вложенном меню
});

И я совсем запутался.
Нуждаюсь опять в помощи, не знаю, будет ли продолжение моих вопросов видно и будет ли активность, пока попробую здесь, если не получится создам новый вопрос.
Меню раскладывается.
Вопросы:
1. Почему-то, используя return false или true в конце, перестаёт работать ссылка у раскладывающегося (вложенного) меню. Видимо плохо догоняю пока что эту логику.
2. В коде есть закомментированный участок:

//var stl = $('ul', 'li.menu-item-has-children').attr ('style');

Если так объявить переменную, то почему-то работа происходит такая:
Я открываю мобильное меню, нажимаю на link, в ожидании, что раскроется подменю, но он меняется в оттенке и не раскрывается с 1го клика, но после такого клика, всё работает. При чём этот же эффект появился и у кнопки со стрелочкой, которая изначально рассчитана темой для раскрытия подменю.
3. А вот чудо. Поток мыслей был такой, не хочу, чтобы мой js "мусорил" в работе сайта. А, используя данные селекторы, js вносит изменения и у шапки desktopной версии (эти шапки оформлены разными блоками).
Я захотел ограничить работу js только на шапку мобильной версии.
Вот моя попытка:

var stl = $('li.menu-item-has-children', 'div#ast-mobile-header').children("ul").attr ('style');

Предполагал, что я беру элементы с тегом ul, которые лежат в элементах li с классом menu-item-has-children, т.е. только в таких ссылках, которые имеют подменю, и хочу, чтоб это были такие li, которые находятся в блоке div с id ast-mobile-header.
Это не сработало, js все равно меняет стиль у элемента в шапке десктопной версии. НО! Ушла проблема, описанная во 2ом вопросе, но осталась у кнопки со стрелочкой. ЧТО ЗА ЧУДЕСА! Я тут чо-то творю и не знаю что. Помогите разобраться)
На всякий случай прикреплю скрин меню. Делаю на локалке.