Dodawanie własnych właściwości do funkcji

Po pierwsze, ważne jest, aby zdać sobie sprawę, że standardowe właściwości funkcji (argumenty, nazwa, wywołanie i długość) nie mogą być nadpisane. Więc zapomnij o dodaniu nieruchomości o tej nazwie.

Dodawanie własnych właściwości do funkcji może być wykonywane na różne sposoby, które powinny działać w każdej przeglądarce.

Dodawanie własnych właściwości niestandardowych do funkcji

Sposób 1: dodawanie właściwości podczas uruchamiania funkcji:

var doSomething = function() {
    doSomething.name = 'Tom';
    doSomething.name2 = 'John';
    return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście :

doSomething.name : 
doSomething.name2 : undefined
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 

Sposób 1 (składnia alternatywna):

function doSomething() {
    doSomething.name = 'Tom';
    doSomething.name2 = 'John';
    return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : doSomething
doSomething.name2 : undefined
doSomething() : Beep
doSomething.name : doSomething
doSomething.name2 : John 

Sposób 1 (druga składnia alternatywna):

var doSomething = function f() {
    f.name = 'Tom';
    f.name2 = 'John';
    return 'Beep';
};

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : f
doSomething.name2 : undefined
doSomething() : Beep
doSomething.name : f
doSomething.name2 : John 

Problem z tą strategią polega na tym, że musisz uruchomić swoją funkcję co najmniej raz, aby przypisać właściwości. Dla wielu funkcji, to oczywiście nie jest to, co chcesz. Rozważmy więc inne opcje.

Sposób 2: dodawanie właściwości po zdefiniowaniu funkcja:

function doSomething() {
    return 'Beep';
};

doSomething.name = 'Tom';
doSomething.name2 = 'John';

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : doSomething
doSomething.name2 : John
doSomething() : Beep
doSomething.name : doSomething
doSomething.name2 : John 

Teraz nie musisz najpierw uruchamiać swojej funkcji, zanim będziesz mógł uzyskać dostęp do swoich właściwości. Wadą jest jednak to, że Twoje właściwości czują się odłączone od twojej funkcji.

Sposób 3: zawiń swoją funkcję w funkcję anonimową:

var doSomething = (function(args) {
    var f = function() {
        return 'Beep';
    };
    for (i in args) {
        f[i] = args[i];
    }
    return f;
}({
    'name': 'Tom',
    'name2': 'John'
}));

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 

Owijając funkcję w funkcję anonimową, możesz zebrać atrybuty do obiektu i dodać je za pomocą pętli atrybuty jeden po drugim w ramach funkcji anonimowej. W ten sposób twoje atrybuty czują się bardziej powiązane z Twoją funkcją. Technika ta jest również bardzo przydatna, gdy atrybuty muszą być skopiowane z istniejącego obiektu. Wadą jest jednak to, że można dodawać tylko kilka atrybutów w tym samym czasie, gdy zdefiniujesz swoją funkcję. Ponadto, nie powoduje to suchego kodu, jeśli dodawanie właściwości do funkcji jest czymś, co chcesz często robić.

Sposób 4: dodaj funkcja "extend" do funkcji, która dodaje właściwości obiektu do siebie jeden po drugim:

var doSomething = function() {
    return 'Beep';
};

doSomething.extend = function(args) {
    for (i in args) {
        this[i] = args[i];
    }
    return this;
}

doSomething.extend({
    'name': 'Tom',
    'name2': 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 

W ten sposób możesz rozszerzyć wiele właściwości i/lub skopiować właściwości z innego projektu w dowolnym momencie. Ponownie jednak Twój kod nie jest suchy, jeśli robisz to częściej.

Sposób 5: Make a generic' extend ' function:

var extend = function(obj, args) {
    if (isArray(args) || (args !== null && typeof args === 'object')) {
        for (i in args) {
            this[i] = args[i];
        }
    }
    return obj;
}

var Job = extend(
    function() {
        return 'Beep';
    }, {
        'name': 'Tom',
        'name2': 'John'
    }
);

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 

Genetyczna funkcja rozszerzania pozwala na bardziej suche podejście, pozwalające na dodanie obiektu lub dowolnego projektu do dowolnego innego obiektu.

Sposób 6: Utwórz obiekt extendableFunction i użyj go do dołączenia funkcji extend do funkcji:

var extendableFunction = (function() {
    var extend = function(args) {
        if (isArray(args) || (args !== null && typeof args === 'object')) {
            for (i in args) {
                this[i] = args[i];
            }
        }
        return this;
    };
    var ef = function(v, obj) {
        v.extend = extend;
        return v.extend(obj);
    };

    ef.create = function(v, args) {
        return new this(v, args);
    };
    return ef;
})();

var doSomething = extendableFunction.create(
    function() {
        return 'Beep';
    }, {
        'name': 'Tom',
        'name2': 'John'
    }
);

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 

Zamiast używać ogólnej funkcji "extend", technika ta pozwala na generowanie funkcji, które mają dołączoną metodę "extend".

Sposób 7: dodanie funkcji 'extend' do prototypu funkcji :

Function.prototype.extend = function(args) {
    if (isArray(args) || (args !== null && typeof args === 'object')) {
        for (i in args) {
            this[i] = args[i];
        }
    }
    return this;
};

var doSomething = function() {
    return 'Beep';
}.extend({
    name : 'Tom',
    name2 : 'John'
});

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : 
doSomething.name2 : John
doSomething() : Beep
doSomething.name : 
doSomething.name2 : John 

Wielką zaletą tej techniki jest to, że sprawia, że dodawanie nowych właściwości do funkcji jest bardzo łatwe i suche, a także całkowicie OO. Poza tym jest całkiem przyjazny dla pamięci. Minusem jest jednak to, że nie jest to zbyt przyszłościowe. W przypadku, gdy przyszłe przeglądarki kiedykolwiek dodają natywną funkcję "extend" do prototypu funkcji, może to spowodować złamanie kodu.

Sposób 8: Uruchom funkcję rekurencyjnie raz, a następnie zwróć ją :

var doSomething = (function f(arg1) {
    if(f.name2 === undefined) {
        f.name = 'Tom';
        f.name2 = 'John';
        f.extend = function(obj, args) {
            if (isArray(args) || (args !== null && typeof args === 'object')) {
                for (i in args) {
                    this[i] = args[i];
                }
            }
            return obj;
        };
        return f;
    } else {
        return 'Beep';
    }
})();

console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);

Wyjście:

doSomething.name : f
doSomething.name2 : John
doSomething() : Beep
doSomething.name : f
doSomething.name2 : John 

Uruchom funkcję raz i sprawdź, czy jedna z jej właściwości jest ustawiona. Jeśli nie jest ustawione, ustaw właściwości i zwróć je same. Jeśli jest ustawione, uruchom funkcję. Jeśli dodasz funkcję "extend" jako jedną z właściwości, możesz później ją wykonać, aby dodać nowe właściwości.

Dodawanie własnych właściwości do obiektu

Pomimo tych wszystkich opcji, niemniej jednak zalecam, aby nie dodawać właściwości do funkcja. O wiele lepiej jest dodawać właściwości do obiektów!

Osobiście preferuję klasy singleton o następującej składni.

var keyValueStore = (function() {
    return {
        'data' : {},
        'get' : function(key) { return keyValueStore.data[key]; },
        'set' : function(key, value) { keyValueStore.data[key] = value; },
        'delete' : function(key) { delete keyValueStore.data[key]; },
        'getLength' : function() {
            var l = 0;
            for (p in keyValueStore.data) l++;
            return l;
        }
    }
})();

Zaletą tej składni jest to, że pozwala ona zarówno na zmienne publiczne, jak i prywatne. Na przykład w ten sposób zmienna " data "staje się prywatna:

var keyValueStore = (function() {
    var data = {};

    return {
        'get' : function(key) { return data[key]; },
        'set' : function(key, value) { data[key] = value; },
        'delete' : function(key) { delete data[key]; },
        'getLength' : function() {
            var l = 0;
            for (p in data) l++;
            return l;
        }
    }
})();

Ale chcesz wiele instancji magazynu danych, mówisz? Nie ma sprawy!

var keyValueStore = (function() {
    var count = -1;

    return (function kvs() {
        count++; 
        return {
            'data' : {},
            'create' : function() { return new kvs(); },
            'count' : function() { return count; },
            'get' : function(key) { return this.data[key]; },
            'set' : function(key, value) { this.data[key] = value; },
            'delete' : function(key) { delete this.data[key]; },
            'getLength' : function() {
                var l = 0;
                for (p in this.data) l++;
                return l;
            }
        }
    })();
})();

Wreszcie, można rozdzielić właściwości instancji i singleton i użyć prototyp dla publicznych metod instancji. Z tego wynika następująca składnia:

var keyValueStore = (function() {
    var count = 0; // Singleton private properties

    var kvs = function() {
        count++; // Instance private properties
        this.data = {};  // Instance public properties
    };

    kvs.prototype = { // Instance public properties
        'get' : function(key) { return this.data[key]; },
        'set' : function(key, value) { this.data[key] = value; },
        'delete' : function(key) { delete this.data[key]; },
        'getLength' : function() {
            var l = 0;
            for (p in this.data) l++;
            return l;
        }
    };

    return  { // Singleton public properties
        'create' : function() { return new kvs(); },
        'count' : function() { return count; }
    };
})();

Dzięki tej składni możesz mieć:

• wiele instancji obiektu
• zmienne prywatne
• zmienne klasy

Używasz go w ten sposób:

kvs = keyValueStore.create();
kvs.set('Tom', "Baker");
kvs.set('Daisy', "Hostess");
var profession_of_daisy = kvs.get('Daisy');
kvs.delete('Daisy');
console.log(keyValueStore.count());

"necromancing" tutaj, ale myślę, że każde wielkie pytanie potrzebuje prostych odpowiedzi:

Tak i Tak*

dołączając właściwości do funkcji, czyścisz zakres, poprawiasz czytelność i dodajesz logiczną spójność. Dodatkową korzyścią jest dokumentowanie relacji między funkcją a zmiennymi. Myślę, że jest to lepszy projekt, znacznie lepszy niż dodawanie zmiennych w zakresie

Stworzyłem tu kilka ciekawych przykładów i proszę. tutaj I TU

* myślę, że warto zauważyć, że prawdopodobnie nie zobaczysz tego zbyt często. większość deweloperów prawdopodobnie nie zdaje sobie sprawy, że to możliwe. Niektórzy ludzie szaleją na punkcie każdej kropli wydajności... "silniki JavaScript optymalizują się w oparciu o' kształt'obiektu'..." bla bla bla... myślę, że możesz przestrzegać zasady, którą masz Dla Przedmiotów i poradzisz sobie.

Zdaję sobie sprawę, że jestem spóźniony do tego, ale pomyślałem, że dodam ten przykład--requirejs ustawia właściwość o nazwie "amd" na funkcji define (), co jest dość przydatne, ponieważ wzorzec UMD używa jej do wykrywania, że funkcja define (), która jest w zasięgu, jest w rzeczywistości funkcją AMD define ().

RequireJS source: http://requirejs.org/docs/release/2.1.9/comments/require.js

Wzorzec UMD pokazujący to użycie: https://github.com/umdjs/umd/blob/master/amdWeb.js

Dołączanie właściwości do funkcji jest pięknym (prawdopodobnie powolnym/hakerskim) sposobem przeciążenia () operatora , który z kolei jest zwykle używany do implementacji functorów : typów obiektów, które mają jedno naprawdę ważne zadanie, a wszystkie jego inne funkcje (jeśli istnieją) to tylko grupa pomocników. Można również interpretować te funktory jako, w zasadzie, funkcję "stateful", gdzie stan jest publiczny (większość funkcji inline, na przykład, ma stan prywatny, czyli stan z zakresu lokalnego).

Ten JSFiddle pokazuje, jak możemy używać funkcji o niestandardowych właściwościach dla funkcji translator z dodatkowymi narzędziami:

/**
 * Creates a new translator function with some utility methods attached to it.
 */
var createTranslator = function(dict) {
    var translator = function(word) {
        return dict[word];
    };

    translator.isWordDefined = function(word) {
        return dict.hasOwnProperty(word);
    };

    // Add more utilities to translator here...

    return translator;
};


// create dictionary
var en2deDictionary = {
    'banana': 'Banane',
    'apple': 'Apfel'
};

// simple use case:
var translator = createTranslator(en2deDictionary);
var pre = $('<pre>');
$("body").append(pre);

pre.append(translator('banana') + '\n');
pre.append(translator('apple') + '\n');
pre.append(translator.isWordDefined('w00t') + '\n');

Jak widzisz, jest to idealne rozwiązanie dla tłumacza, którego jedynym celem jest tłumaczenie. Oczywiście jest o wiele więcej przykładów tych typów obiektów, ale nie są one tak powszechne jak typy o zróżnicowanej funkcjonalności, takie jak klasyczny User, Animal Car itd. typy. Do tego typu typów, właściwości niestandardowe można dodawać tylko w nielicznych przypadkach. Zazwyczaj chcesz zdefiniować je jako bardziej kompletne klasy i mieć ich publiczne właściwości dostępne za pośrednictwem {[6] } i to jest prototype.

Jeśli chcesz tylko dodać własne właściwości do funkcji, musisz tylko dodać te właściwości do funkcji.prototyp. Na przykład:

Function.prototype.SomeNewProperty = function () {//Do something awesome here...}

Jest całkowicie dopuszczalne dodawanie właściwości lub metod do obiektu funkcji. Robi się to dość często. Przykładem tego jest obiekt jQuery/$. Jest to funkcja z kilkoma załączonymi metodami.

Gdy właściwości są dodawane do konstruktora, są one nazywane właściwościami 'statycznymi' i mogą być wywoływane bez instancji klasy. np. obiekt.twórz.

Nie mam dość rep, aby napisać komentarz, więc powiem tutaj: ogólnie uważa się za złe praktyki, aby rozszerzyć prototypy wbudowanych obiektów, zwłaszcza jeśli twój kod ma grać z cudzym kodem. Może to mieć nieprzewidywalne konsekwencje, które trudno wyśledzić.

Zgadzam się, że jest to trudne pytanie, które może mieć wiele odpowiedzi, więc wolę zrobić inny przykład: {22]}

Załóżmy, że JavaScript Array, wypełniony generatorem:

var arr = [...new Array(10).keys()];

To jest

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Teraz chcemy odwzorować to do nowej tablicy o tej samej długości, stosując jakąś funkcję, więc możemy użyć natywnej właściwościmap function:

arr = arr.map((value,index) => ++value)

Właśnie wykonaliśmy value=value+1 i zwracamy, więc teraz tablica będzie wyglądać jak

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Ok, teraz powinien mieć JavaScript Object Jak

var obj=new Object()

Która została zdefiniowana jak poprzednia tablica (z jakiegoś szalonego powodu):

arr.forEach((value,index) => obj[value]=value)

Tzn.

{0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9}

W tym momencie nie możemy zastosować tej samej metody map, ponieważ nie jest ona zdefiniowana dla Object, więc musimy zdefiniować ją jako nową prototype z Object:

Object.defineProperty(Object.prototype, 'mapObject', {
      value: function(f, ctx) {
          ctx = ctx || this;
          var self = this, result = {};
          Object.keys(self).forEach(function(k) {
              result[k] = f.call(ctx, self[k], k, self);
          });
          return result;
      }
    });

W tym momencie możemy zrobić jak dla tablicy przed:

obj=obj.mapObject((value,key) => ++value )

Tak, że mamy:

{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 5: 6, 6: 7, 7: 8, 8: 9, 9: 10}

Widać, że my zaktualizowano tylko wartości:

[...Object.keys(obj)]
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

I możemy wtedy wrócić do tablicy wyjściowej:

[...Object.keys(obj).map(k=>obj[k])]
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Tutaj jest w pracy:

// Array.map
var arr = [...new Array(10).keys()];
console.log("array", arr)
arr = arr.map((value, index) => ++value)
console.log("mapped array", arr)
// new property
Object.defineProperty(Object.prototype, 'mapObject', {
  value: function(f, ctx) {
    ctx = ctx || this;
    var self = this,
      result = {};
    Object.keys(self).forEach(function(k) {
      result[k] = f.call(ctx, self[k], k, self);
    });
    return result;
  }
});

// Object.mapObject
var obj = new Object()
arr = [...new Array(10).keys()];
arr.forEach((value, index) => obj[value] = value)
console.log("object", obj)
obj = obj.mapObject((value, key) => ++value)
console.log("mapped object", obj)
console.log("object keys", [...Object.keys(obj)])
console.log("object values", [...Object.keys(obj).map(k => obj[k])])