Próbowałem poradzić sobie z metodami pobierającymi i ustawiającymi, ale to nie zagłębia się. Przeczytałem JavaScript Getters and Setters i Defining Getters and Setters i po prostu nie rozumiem .

Czy ktoś może jasno stwierdzić:

1. Co getter i setter mają zrobić i
2. Podaj BARDZO proste przykłady?

Oprócz odpowiedzi @ millimoose, metody ustawiające mogą być również używane do aktualizowania innych wartości.

function Name(first, last) {
    this.first = first;
    this.last = last;
}

Name.prototype = {
    get fullName() {
        return this.first + " " + this.last;
    },

    set fullName(name) {
        var names = name.split(" ");
        this.first = names[0];
        this.last = names[1];
    }
};

Teraz można ustawić fullName, a firsti lastbędzie aktualizowany i vice versa.

n = new Name('Claude', 'Monet')
n.first # "Claude"
n.last # "Monet"
n.fullName # "Claude Monet"
n.fullName = "Gustav Klimt"
n.first # "Gustav"
n.last # "Klimt"

Metody pobierające i ustawiające w JavaScript

Przegląd

Pobierające i ustawiające w JavaScript są wykorzystywane do definiowania obliczonych właściwości lub akcesorów . Właściwość obliczona to taka, która używa funkcji do pobrania lub ustawienia wartości obiektu. Podstawowa teoria robi coś takiego:

var user = { /* ... object with getters and setters ... */ };
user.phone = '+1 (123) 456-7890'; // updates a database
console.log( user.areaCode ); // displays '123'
console.log( user.area ); // displays 'Anytown, USA'

Jest to przydatne do automatycznego wykonywania czynności za kulisami, gdy uzyskuje się dostęp do właściwości, takich jak utrzymywanie liczb w zakresie, ponowne formatowanie łańcuchów, wyzwalanie zdarzeń spowodowanych zmianą wartości, aktualizowanie danych relacyjnych, zapewnianie dostępu do właściwości prywatnych i nie tylko.

Poniższe przykłady pokazują podstawową składnię, chociaż po prostu pobierają i ustawiają wewnętrzną wartość obiektu, nie robiąc nic specjalnego. W rzeczywistych przypadkach zmodyfikowałbyś wartość wejściową i / lub wyjściową, aby dopasować ją do swoich potrzeb, jak wspomniano powyżej.

pobierz / ustaw słowa kluczowe

ECMAScript 5 obsługuje get i setsłowa kluczowe do definiowania obliczonych właściwości. Działają ze wszystkimi nowoczesnymi przeglądarkami z wyjątkiem IE 8 i starszych.

var foo = {
    bar : 123,
    get bar(){ return bar; },
    set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;

Niestandardowe metody pobierające i ustawiające

get i set nie są słowami zastrzeżonymi, więc można je przeciążać w celu tworzenia własnych niestandardowych funkcji obliczanych właściwości w różnych przeglądarkach. To zadziała w każdej przeglądarce.

var foo = {
    _bar : 123,
    get : function( name ){ return this[ '_' + name ]; },
    set : function( name, value ){ this[ '_' + name ] = value; }
};
foo.set( 'bar', 456 );
var gaz = foo.get( 'bar' );

Lub dla bardziej zwartego podejścia, można użyć pojedynczej funkcji.

var foo = {
    _bar : 123,
    value : function( name /*, value */ ){
        if( arguments.length < 2 ){ return this[ '_' + name ]; }
        this[ '_' + name ] = value;
    }
};
foo.value( 'bar', 456 );
var gaz = foo.value( 'bar' );

Unikaj robienia czegoś takiego, co może prowadzić do rozdęcia kodu.

var foo = {
    _a : 123, _b : 456, _c : 789,
    getA : function(){ return this._a; },
    getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};

W powyższych przykładach nazwy właściwości wewnętrznych są wyabstrahowane podkreśleniem, aby zniechęcić użytkowników do prostego działania foo.bar vs. foo.get( 'bar' )i uzyskiwania wartości „niegotowanej”. Możesz użyć kodu warunkowego, aby wykonać różne czynności w zależności od nazwy właściwości, do której uzyskujesz dostęp (za pośrednictwem nameparametru).

Object.defineProperty ()

Użycie Object.defineProperty()jest innym sposobem dodawania metod pobierających i ustawiających i może być używane na obiektach po ich zdefiniowaniu. Może być również używany do ustawiania konfigurowalnych i wyliczalnych zachowań. Ta składnia działa również z IE 8, ale niestety tylko w przypadku obiektów DOM.

var foo = { _bar : 123 };
Object.defineProperty( foo, 'bar', {
    get : function(){ return this._bar; },
    set : function( value ){ this._bar = value; }
} );
foo.bar = 456;
var gaz = foo.bar;

__defineGetter __ ()

Wreszcie __defineGetter__()jest inna opcja. Jest przestarzały, ale nadal jest szeroko stosowany w sieci, więc prawdopodobnie nie zniknie w najbliższym czasie. Działa na wszystkich przeglądarkach oprócz IE 10 i starszych. Chociaż inne opcje działają również dobrze w wersji innej niż IE, więc ta nie jest tak przydatna.

var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );

Warto również zauważyć, że w tych ostatnich przykładach nazwy wewnętrzne muszą być inne niż nazwy akcesorów, aby uniknąć rekursji (tj. foo.barWywoływanie foo.get(bar)wywoływania foo.barwywoływania foo.get(bar)...).

Zobacz też

MDN get , set , Object.defineProperty () , __defineGetter __ () , __defineSetter __ () Obsługa
MSDN IE8 Getter

Używałbyś ich na przykład do implementacji obliczonych właściwości.

Na przykład:

function Circle(radius) {
    this.radius = radius;
}

Object.defineProperty(Circle.prototype, 'circumference', {
    get: function() { return 2*Math.PI*this.radius; }
});

Object.defineProperty(Circle.prototype, 'area', {
    get: function() { return Math.PI*this.radius*this.radius; }
});

c = new Circle(10);
console.log(c.area); // Should output 314.159
console.log(c.circumference); // Should output 62.832

^(CodePen)

Przepraszam, że wskrzeszam stare pytanie, ale pomyślałem, że mogę wnieść kilka bardzo podstawowych przykładów i wyjaśnień dla manekinów. Żadna z pozostałych odpowiedzi opublikowanych w ten sposób nie ilustruje składni tak jak pierwszy przykład z przewodnika MDN , który jest tak prosty, jak tylko można.

Rębacz:

var settings = {
    firstname: 'John',
    lastname: 'Smith',
    get fullname() { return this.firstname + ' ' + this.lastname; }
};

console.log(settings.fullname);

... będzie się logować John Smith oczywiście się . Funkcja pobierająca zachowuje się jak zmienna właściwość obiektu, ale zapewnia elastyczność funkcji do obliczania zwracanej wartości w locie. Jest to po prostu fantazyjny sposób tworzenia funkcji, która nie wymaga () podczas wywoływania.

Seter:

var address = {
    set raw(what) {
        var loc = what.split(/\s*;\s*/),
        area = loc[1].split(/,?\s+(\w{2})\s+(?=\d{5})/);

        this.street = loc[0];
        this.city = area[0];
        this.state = area[1];
        this.zip = area[2];
    }
};

address.raw = '123 Lexington Ave; New York NY  10001';
console.log(address.city);

... będzie się logować New York się do konsoli. Podobnie jak metody pobierające, metody ustawiające są wywoływane z taką samą składnią, jak ustawianie wartości właściwości obiektu, ale są kolejnym wymyślnym sposobem wywołania funkcji bez ().

Zobacz ten plik jsfiddle, aby uzyskać dokładniejszy, być może bardziej praktyczny przykład. Przekazywanie wartości do metody ustawiającej obiekt wyzwala tworzenie lub zapełnianie innych elementów obiektu. W szczególności, w przykładzie z jsfiddle, przekazanie tablicy liczb skłania ustawiającego do obliczenia średniej, mediany, trybu i zakresu; następnie ustawia właściwości obiektu dla każdego wyniku.

Metody pobierające i ustawiające mają sens tylko wtedy, gdy masz prywatne właściwości klas. Ponieważ Javascript tak naprawdę nie ma właściwości klasy prywatnej, jak normalnie myślisz w językach obiektowych, może być trudny do zrozumienia. Oto jeden przykład prywatnego obiektu licznika. Zaletą tego obiektu jest to, że do zmiennej wewnętrznej „count” nie można uzyskać dostępu z zewnątrz obiektu.

var counter = function() {
    var count = 0;

    this.inc = function() {
        count++;
    };

    this.getCount = function() {
        return count;
    };
};

var i = new Counter();
i.inc();
i.inc();
// writes "2" to the document
document.write( i.getCount());

Jeśli nadal jesteś zdezorientowany, zapoznaj się z artykułem Crockforda na temat prywatnych członków w Javascript .

Wydaje mi się, że pierwszy artykuł, do którego odsyłasz, stwierdza to dość jasno:

Oczywistą zaletą pisania JavaScript w ten sposób jest to, że można go używać do ukrywania wartości, do których użytkownik nie powinien mieć bezpośredniego dostępu.

Celem jest tutaj hermetyzacja i abstrakcja pól, umożliwiając dostęp do nich tylko za pomocą metody get()lub set(). W ten sposób możesz przechowywać pole / dane wewnętrznie w dowolny sposób, ale zewnętrzne komponenty są tylko z dala od opublikowanego interfejsu. Pozwala to na dokonywanie zmian wewnętrznych bez zmiany zewnętrznych interfejsów, dokonywanie walidacji lub sprawdzania błędów w set()metodzie itp.

Chociaż często jesteśmy przyzwyczajeni do oglądania obiektów z właściwościami publicznymi bez żadnej kontroli dostępu, JavaScript pozwala nam dokładnie opisać właściwości. W rzeczywistości możemy użyć deskryptorów, aby kontrolować, w jaki sposób można uzyskać dostęp do właściwości i jaką logikę możemy do niej zastosować. Rozważmy następujący przykład:

var employee = {
    first: "Boris",
    last: "Sergeev",
    get fullName() {
        return this.first + " " + this.last;
    },
    set fullName(value) {
        var parts = value.toString().split(" ");
        this.first = parts[0] || "";
        this.last = parts[1] || "";
    },
    email: "[email protected]"
};

Wynik końcowy:

console.log(employee.fullName); //Boris Sergeev
employee.fullName = "Alex Makarenko";

console.log(employee.first);//Alex
console.log(employee.last);//Makarenko
console.log(employee.fullName);//Alex Makarenko

Co w tym jest tak mylącego… metody pobierające to funkcje, które są wywoływane, gdy otrzymujesz właściwość, czyli ustawiacze, gdy ją ustawisz. na przykład, jeśli tak

obj.prop = "abc";

Ustawiasz właściwość właściwości, jeśli używasz metod pobierających / ustawiających, zostanie wywołana funkcja ustawiająca z „abc” jako argumentem. Definicja funkcji ustawiającej wewnątrz obiektu idealnie wyglądałaby mniej więcej tak:

set prop(var) {
   // do stuff with var...
}

Nie jestem pewien, jak dobrze jest to zaimplementowane w różnych przeglądarkach. Wygląda na to, że Firefox ma również alternatywną składnię, ze specjalnymi („magicznymi”) metodami z podwójnym podkreśleniem. Jak zwykle Internet Explorer nie obsługuje tego.

Możesz zdefiniować metodę instancji dla klasy js, poprzez prototyp konstruktora.

Poniżej znajduje się przykładowy kod:

// BaseClass

var BaseClass = function(name) {
    // instance property
    this.name = name;
};

// instance method
BaseClass.prototype.getName = function() {
    return this.name;
};
BaseClass.prototype.setName = function(name) {
    return this.name = name;
};


// test - start
function test() {
    var b1 = new BaseClass("b1");
    var b2 = new BaseClass("b2");
    console.log(b1.getName());
    console.log(b2.getName());

    b1.setName("b1_new");
    console.log(b1.getName());
    console.log(b2.getName());
}

test();
// test - end

Powinno to działać dla każdej przeglądarki, możesz też po prostu użyć nodejs do uruchomienia tego kodu.

Byłem również nieco zdezorientowany wyjaśnieniem, które przeczytałem , ponieważ próbowałem dodać właściwość do istniejącego prototypu, którego nie napisałem, więc zastąpienie prototypu wydawało się złym podejściem. Tak więc, dla potomności, oto jak dodałem lastwłaściwość do Array:

Object.defineProperty(Array.prototype, "last", {
    get: function() { return this[this.length - 1] }
});

Nieco ładniejsze niż dodanie funkcji IMHO.

Jeśli odnosisz się do koncepcji akcesorów, prostym celem jest ukrycie podstawowej pamięci masowej przed dowolną manipulacją. Najbardziej ekstremalnym mechanizmem jest to

function Foo(someValue) {
    this.getValue = function() { return someValue; }
    return this;
}

var myFoo = new Foo(5);
/* We can read someValue through getValue(), but there is no mechanism
 * to modify it -- hurrah, we have achieved encapsulation!
 */
myFoo.getValue();

Jeśli odnosisz się do rzeczywistej funkcji getter / setter JS, np. defineGetter/ defineSetterlub { get Foo() { /* code */ } }, wtedy warto zauważyć, że w większości nowoczesnych silników późniejsze wykorzystanie tych właściwości będzie znacznie wolniejsze niż w innym przypadku. na przykład. porównaj wydajność

var a = { getValue: function(){ return 5; }; }
for (var i = 0; i < 100000; i++)
    a.getValue();

vs.

var a = { get value(){ return 5; }; }
for (var i = 0; i < 100000; i++)
    a.value;

Mam dla was jeden, który może być trochę brzydki, ale działa na różnych platformach

function myFunc () {

var _myAttribute = "default";

this.myAttribute = function() {
    if (arguments.length > 0) _myAttribute = arguments[0];
    return _myAttribute;
}
}

w ten sposób, kiedy dzwonisz

var test = new myFunc();
test.myAttribute(); //-> "default"
test.myAttribute("ok"); //-> "ok"
test.myAttribute(); //-> "ok"

Jeśli naprawdę chcesz coś urozmaicić ... możesz wstawić rodzaj czeku:

if (arguments.length > 0 && typeof arguments[0] == "boolean") _myAttribute = arguments[0];
if (arguments.length > 0 && typeof arguments[0] == "number") _myAttribute = arguments[0];
if (arguments.length > 0 && typeof arguments[0] == "string") _myAttribute = arguments[0];

lub jeszcze bardziej szalony dzięki zaawansowanemu kodowi typu check: type.of () na stronie codingforums.com