인형 용 게터 \ 세터

인형 용 게터 \ 세터

---

나는 getters와 setter 주위에 머리를 갖기 위해 노력하고 있었고 그것의 침몰하지 않았다. 나는 JavaScript Getters and Setters 와 Getters and Setters 정의하고 그것을 얻지 못했다.

누군가가 명확하게 진술 할 수 있습니까?

1. 게터와 세터가해야 할 일
2. 아주 간단한 예를 들어보십시오.

---

@millimoose의 답변 외에도 setter를 사용하여 다른 값을 업데이트 할 수도 있습니다.

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];
    }
};

지금, 당신은 설정할 수 있습니다 fullName, 그리고 first및 last반대의 업데이트 및 그됩니다.

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"

---

예를 들어 계산 된 속성을 구현하는 데 사용합니다.

예를 들면 다음과 같습니다.

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

^{(코드 펜)}

---

JavaScript의 게터와 세터

개요

JavaScript의 Getter 및 Setter는 계산 된 속성 또는 접근 자를 정의하는 데 사용됩니다 . 계산 된 속성은 함수를 사용하여 개체 값을 가져 오거나 설정하는 속성입니다. 기본 이론은 다음과 같습니다.

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'

이 기능은 범위에 숫자를 유지하거나 문자열을 다시 포맷하거나 변경된 값 이벤트를 트리거하거나 관계형 데이터를 업데이트하고 개인 속성에 대한 액세스를 제공하는 등 속성에 액세스 할 때 배후에서 자동으로 작업을 수행하는 데 유용합니다.

아래 예제는 기본 구문을 보여 주지만 특별한 작업을 수행하지 않고 내부 객체 값을 가져오고 설정합니다. 실제 상황에서는 위에서 언급 한대로 필요에 맞게 입력 및 / 또는 출력 값을 수정합니다.

키워드 가져 오기 / 설정

ECMAScript 5는 계산 된 속성을 정의하기위한 키워드 get및 set키워드를 지원 합니다. IE 8 이하를 제외한 모든 최신 브라우저에서 작동합니다.

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

커스텀 게터와 세터

get그리고 set그들은 사용자 정의, 크로스 브라우저가 계산 된 속성 기능을 만들 오버로드 할 수 있도록, 예약어되지 않습니다. 이것은 모든 브라우저에서 작동합니다.

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' );

또는보다 콤팩트 한 접근을 위해 단일 기능을 사용할 수 있습니다.

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' );

이와 같은 작업을 피하면 코드가 부풀어 질 수 있습니다.

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

위의 예에서 내부 속성 이름은 밑줄로 요약되어 사용자가 단순히 foo.barvs 를 사용하지 foo.get( 'bar' )않고 "요리되지 않은"값을 얻지 못하게합니다. 조건부 코드를 사용하여 액세스중인 속성의 이름에 따라 ( name매개 변수 를 통해 ) 다른 작업을 수행 할 수 있습니다 .

Object.defineProperty ()

사용 Object.defineProperty()은 게터와 세터를 추가하는 또 다른 방법이며 정의 된 객체에 사용할 수 있습니다. 또한 구성 가능하고 열거 가능한 동작을 설정하는 데 사용될 수 있습니다. 이 구문은 IE 8에서도 작동하지만 불행히도 DOM 객체에서만 작동합니다.

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

__defineGetter __ ()

마지막으로 __defineGetter__()또 다른 옵션입니다. 더 이상 사용되지 않지만 웹에서 여전히 널리 사용되므로 곧 사라질 것 같지 않습니다. IE 10 이하를 제외한 모든 브라우저에서 작동합니다. 다른 옵션은 비 IE에서도 잘 작동하지만 유용하지 않습니다.

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

또한보십시오

MDN get , set , Object.defineProperty () , __defineGetter __ () , __defineSetter __ ()
MSDN IE8 Getter 지원

---

오래된 질문을 부활 시켜서 죄송하지만, 몇 가지 매우 기본적인 예와 시험 설명에 도움을 줄 수 있다고 생각했습니다. 지금까지 게시 된 다른 답변 중 어느 것도 MDN 가이드 의 첫 번째 예제 와 같은 구문을 보여주지 않습니다.

얻는 사람:

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

console.log(settings.fullname);

John Smith물론 로그 합니다. 게터의 변수 개체 속성처럼 동작하지만 이벤트 즉시 그 반환 값을 계산하는 기능의 유연성을 제공합니다. 기본적으로 호출 할 때 ()가 필요없는 함수를 만드는 멋진 방법입니다.

세터:

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);

... New York콘솔에 로그인 합니다. getter와 마찬가지로 setter 는 객체 속성 값을 설정하는 것과 동일한 구문으로 호출되지만 ()없이 함수를 호출하는 또 다른 멋진 방법입니다.

보다 철저하고 실용적인 예를 보려면 이 jsfiddle 을 참조하십시오 . 객체의 setter에 값을 전달하면 다른 객체 항목의 생성 또는 채우기가 트리거됩니다. 특히, jsfiddle 예제에서 숫자 배열을 전달하면 setter가 평균, 중앙값, 모드 및 범위를 계산하도록 프롬프트합니다. 그런 다음 각 결과에 대한 객체 속성을 설정합니다.

---

게터와 세터는 클래스의 전용 속성이있을 때만 의미가 있습니다. Javascript에는 일반적으로 객체 지향 언어에서 생각하는 것처럼 개인 클래스 속성이 없으므로 이해하기 어려울 수 있습니다. 다음은 개인 카운터 개체의 예입니다. 이 개체의 좋은 점은 개체 외부에서 내부 변수 "count"에 액세스 할 수 없다는 것입니다.

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());

If you are still confused, take a look at Crockford's article on Private Members in Javascript.

---

I think the first article you link to states it pretty clearly:

The obvious advantage to writing JavaScript in this manner is that you can use it obscure values that you don't want the user to directly access.

The goal here is to encapsulate and abstract away the fields by only allowing access to them thru a get() or set() method. This way, you can store the field/data internally in whichever way you want, but outside components are only away of your published interface. This allows you to make internal changes without changing external interfaces, to do some validation or error-checking within the set() method, etc.

---

Although often we are used to seeing objects with public properties without any access control, JavaScript allows us to accurately describe properties. In fact, we can use descriptors in order to control how a property can be accessed and which logic we can apply to it. Consider the following example:

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: "boris.sergeev@example.com"
};

The final result:

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

---

What's so confusing about it... getters are functions that are called when you get a property, setters, when you set it. example, if you do

obj.prop = "abc";

You're setting the property prop, if you're using getters/setters, then the setter function will be called, with "abc" as an argument. The setter function definition inside the object would ideally look something like this:

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

I'm not sure how well that is implemented across browsers. It seems Firefox also has an alternative syntax, with double-underscored special ("magic") methods. As usual Internet Explorer does not support any of this.

---

You can define instance method for js class, via prototype of the constructor.

Following is the sample code:

// 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

And, this should work for any browser, you can also simply use nodejs to run this code.

---

I was also somewhat confused by the explanation I read, because I was trying to add a property to an existing prototype that I did not write, so replacing the prototype seemed like the wrong approach. So, for posterity, here's how I added a last property to Array:

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

Ever so slightly nicer than adding a function IMHO.

---

If you're referring to the concept of accessors, then the simple goal is to hide the underlying storage from arbitrary manipulation. The most extreme mechanism for this is

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();

If you're referring to the actual JS getter/setter feature, eg. defineGetter/defineSetter, or { get Foo() { /* code */ } }, then it's worth noting that in most modern engines subsequent usage of those properties will be much much slower than it would otherwise be. eg. compare performance of

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;

---

I've got one for you guys that might be a little ugly, but it does get'er done across platforms

function myFunc () {

var _myAttribute = "default";

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

this way, when you call

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

If you really want to spice things up.. you can insert a typeof check:

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];

or go even crazier with the advanced typeof check: type.of() code at codingforums.com

참고URL : https://stackoverflow.com/questions/812961/getters-setters-for-dummies