Почему я не могу установить «прототип» функции, созданной с помощью «bind»?

Вместо того, чтобы просто изменять сценарий из этого вопроса, я надеюсь кратко описать, как скриптировать эти страницы и действия с помощью Greasemonkey / Tampermonkey.

Шаги:

  1. Обратите внимание на то, что вы делаете вручную. Особо обратите внимание на элементы, добавленные / измененные javascript страницы, и необходимую последовательность шагов, если они есть.
  2. Использование Firebug и / или инспектор Firefox и / или инструменты разработчика Chrome , определите селектор CSS / jQuery для всех элементов, которые вы будете читать или манипулировать. Это особенно легко сделать с помощью Firebug.
  3. Используйте jQuery для управления статическим HTML. Используйте waitForKeyElements для обработки узлов, добавленных или измененных javascript (AJAX). Используйте API Greasemonkey , который также поддерживается Tampermonkey и частично поддерживается браузерами Chrome - для совершения любых междоменных вызовов страниц или для хранения любых значений между загрузками страниц для междоменных наборов страницы.


Конкретный пример:

  1. Для целевых страниц OP OP хочет: (a) автоматически выберите размер обуви, (b) добавьте обувь в корзину покупок и (c) нажмите кнопку проверки. Это требует ожидания и / или нажатия на пять (5) таких элементов страницы:
  2. Используя Firebug (или аналогичный инструмент), мы получаем структуру HTML для ключевых узлов. Например, раскрывающийся список SIZE имеет HTML следующим образом:
    ... ... ...
    Если ссылка действительно отключает событие mousedown, а не щелчок. Firebug дает нам путь к CSS:
    html.js body div#body div#body-wrapper.fullheight div#body-liner.clear div#content div#pdp.footwear div#product-container.clear div.pdp-buying-tools-container div.pdp-box div.buying-tools-container div#PDPBuyingTools.buying-tools-gadget form.add-to-cart-form div.product-selections div.size-quantity span.sizeDropdown a.selectBox
    
    . Мы можем сбрасывать до:
    div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown
    
    для разумного селектора, который, вероятно, переживет тривиальные изменения страницы и вряд ли вызовет нежелательные страницы / продукты. ~~~~~~~~~~~~~ Обратите внимание, что Firebug также помогает нам понять, какие события связаны с тем, что имеет решающее значение при определении того, что нам нужно запускать. Например, для этого узла я вижу: Эта ссылка не имеет href и не прослушивает события click. В этом случае мы должны вызвать mousedown (или keydown). ~~~~~~~~~~~~~ Используя аналогичный процесс для других 4 ключевых узлов, мы получаем селектора CSS / jQuery:
    Node 1:     div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown
    
    Node 2:     ul.selectBox-dropdown-menu li a:contains('10')
                (But this will need an additional check)
    
    Node 3:     div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(10)')
    
    Node 4:     div.footwear form.add-to-cart-form div.product-selections div.add-to-cart
    
    Node 5:     div.mini-cart div.cart-item-data a.checkout-button:visible
    
  3. Наконец, мы используем waitForKeyElements для отправьте необходимые события на узлы ключей и выполните последовательность с помощью правильного порядка операций.

В результате, полный рабочий сценарий:

// ==UserScript==
// @name     _Nike auto-buy shoes(!!!) script
// @include  http://store.nike.com/*
// @include  https://store.nike.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var targetShoeSize  = "10";

//-- STEP 1:    Activate size drop-down.
waitForKeyElements (
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    activateSizeDropdown
);
function activateSizeDropdown (jNode) {
    triggerMouseEvent (jNode[0], "mousedown");

    //-- Setup step 2.
    waitForKeyElements (
        "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible",
        selectDesiredShoeSize
    );
}

//-- STEP 2:    Select desired shoe size.
function selectDesiredShoeSize (jNode) {
    /*-- Because the selector for this node is vulnerable to false positives,
        we need an additional check here.
    */
    if ($.trim (jNode.text () ) === targetShoeSize) {
        //-- This node needs a triplex event
        triggerMouseEvent (jNode[0], "mouseover");
        triggerMouseEvent (jNode[0], "mousedown");
        triggerMouseEvent (jNode[0], "mouseup");

        //-- Setup steps 3 and 4.
        waitForKeyElements (
            "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox "
            + "span.selectBox-label:contains('(" + targetShoeSize + ")')",
            waitForShoeSizeDisplayAndAddToCart
        );
    }
}

//-- STEPS 3 and 4: Wait for shoe size display and add to cart.
function waitForShoeSizeDisplayAndAddToCart (jNode) {
    var addToCartButton = $(
        "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
    );
    triggerMouseEvent (addToCartButton[0], "click");

    //-- Setup step 5.
    waitForKeyElements (
        "div.mini-cart div.cart-item-data a.checkout-button:visible",
        clickTheCheckoutButton
    );
}

//-- STEP 5:    Click the checkout button.
function clickTheCheckoutButton (jNode) {
    triggerMouseEvent (jNode[0], "click");

    //-- All done.  The checkout page should load.
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

18
задан Peter Mortensen 23 February 2019 в 20:41
поделиться

4 ответа

Как я понял, у каждой функции есть объект-прототип.

Ну, есть исключения из каждого правила :-) Вы нашли одно: связанные функции не имеют свойства .prototype, потому что оно им не нужно. Когда вы вызываете связанную функцию с помощью new, она вызывает исходную функцию в качестве конструктора, используя объект .prototype оригинала в качестве прототипа нового экземпляра.

Фактически, поскольку ECMAScript & nbsp; 6, многие функции не имеют свойства .prototype с объектом, потому что они не являются конструкторами - их нельзя вызывать с помощью new, поэтому им это не нужно. Среди них

  • функции стрелок (() => {…})
  • методы (method() { … } в объектных литералах и классах)
  • встроенные неконструктивные функции (например, [ 117])
0
ответ дан Peter Mortensen 23 February 2019 в 20:41
поделиться

См. Спецификации :

Function.prototype.bind (thisArg, ... args)

[...]

[ 116] ПРИМЕЧАНИЕ 1. Функциональные объекты, созданные с помощью Function.prototype.bind, являются экзотическими объектами. Они также не имеют свойства prototype.

0
ответ дан str 23 February 2019 в 20:41
поделиться

Возвращенная функция из .bind() не имеет объекта-прототипа. Вы можете дать ему один:

bar.prototype = { newprop: "new" };

Это неправда, что «каждая функция имеет объект-прототип». Каждая функция может иметь объект-прототип, но значением свойства «prototype» может быть что угодно, включая null или undefined.

Кроме того, существуют «специальные» функции, которые могут не вести себя как обычные функции во всех случаях.

0
ответ дан Pointy 23 February 2019 в 20:41
поделиться

Добавление свойств в prototype означает, что вы хотите создать объект, используя функцию в качестве конструктора.

Когда вы создаете объект, например, вызывая new для функции, значение this является новым создаваемым объектом. Так что нет смысла bind this к другому значению.

0
ответ дан Peter Mortensen 23 February 2019 в 20:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: