Как основное объектное/функциональное объединение в цепочку работает в JavaScript?

Я пытаюсь получить принципы выполнения объединения в цепочку функции стиля jQuery прямо в моей голове. Этим я имею в виду:

var e = f1('test').f2().f3();

Я заставил один пример работать, в то время как другой не делает. Я отправлю тех, которые ниже. Я всегда хочу изучить первые принципиальные основные принципы того, как что-то работает так, чтобы я мог создать сверху его. До сих пор у меня только было поверхностное и свободное понимание того, как, объединяя работы в цепочку и я сталкиваюсь с ошибками, которые я не могу диагностировать разумно.

Что я знаю:

  1. Функции должны возвратить себя, иначе "возвращают это";
  2. Функции Chainable должны находиться в родительской функции, иначе в jQuery, .css () sub метод jQuery (), следовательно jQuery () .css ();
  3. Родительская функция должна или возвратить себя или новый экземпляр себя.

Этот пример работал:

var one = function(num){
    this.oldnum = num;

    this.add = function(){
        this.oldnum++;
        return this;
    }

    if(this instanceof one){
        return this.one;    
    }else{
        return new one(num);    
    }
}
var test = one(1).add().add();

Но этот не делает:

var gmap = function(){

    this.add = function(){
        alert('add');

        return this;    
    }   

    if(this instanceof gmap) {
        return this.gmap;   
    } else{
        return new gmap();  
    }

}
var test = gmap.add();
26
задан Bergi 6 July 2019 в 11:08
поделиться

2 ответа

В функциях JavaScript являются объектами первого класса. Когда вы определяете функцию, она является конструктором для этого функционального объекта. Другими словами:

var gmap = function() {
    this.add = function() {
        alert('add');
    return this;
    }

    this.del = function() {
       alert('delete');
       return this;
    }

    if (this instanceof gmap) {
        return this.gmap;
    } else {
        return new gmap();
    }
}
var test = new gmap();
test.add().del();

Назначив

new gmap();
переменной test, вы создали новый объект, который «наследует» все свойства и методы конструктора (класса) gmap (). Если вы запустите приведенный выше фрагмент, вы увидите предупреждение для «добавить» и «удалить».

В приведенных выше примерах «this» относится к объекту окна, если только вы не заключите функции в другую функцию или объект.

Поначалу мне трудно понять цепочку, по крайней мере, для меня, но как только я понял это, я понял, насколько мощным это может быть инструмент.

38
ответ дан 28 November 2019 в 07:29
поделиться

К сожалению, прямой ответ должен быть «нет». Даже если вы можете переопределить существующие методы (что вы, вероятно, можете во многих UA, но я подозреваю, что в IE это невозможно), вы все равно застряли бы с неприятными переименованиями:

HTMLElement.prototype.setAttribute = function(attr) { 
    HTMLElement.prototype.setAttribute(attr) //uh-oh;  
}

Лучшее, что вы могли бы получить подальше использует другое имя:

HTMLElement.prototype.setAttr = function(attr) {
    HTMLElement.prototype.setAttribute(attr);
    return this;
}
4
ответ дан 28 November 2019 в 07:29
поделиться
Другие вопросы по тегам:

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