'Javascript/Core'에 해당되는 글 24건

자바스크립트의 Prototype(프로토타입)

1. 정의

- 자바스크립트에서 객체지향 프로그램을 하기 위해 꼭 알아야 할것이 프로토타입(prototype) 이라고 한다

- 여기저기 찾다가 자바스크립트의 표준 문서와 다양한 블로그에서 정의한 걸 적었다

- object that provides shared properties for other objects -  ECMAscript

-note When a constructor creates an object, that object implicitly references the constructor’s “prototype” property for the purpose of resolving property references. The constructor’s “prototype” property can be referenced by the program expression constructor.prototype, and properties added to an object’s prototype are shared, through inheritance, by all objects sharing the prototype. Alternatively, a new object may be created with an explicitly specified prototype by using the Object.create built-in function.

- 프로토타입 객체를 참조하는 링크(_proto_)??

- 위 글을 참고하면 프로토타입 == 프로퍼티를 다른 객체와 공유하는 객체

- 생성자 함수와 연관되어 있다

2. 생성자의 구조

- 프로토타입을 알기 위해 생성자의 구조를 파악한다

1) 생성자 

function human(){ }

- human이라는 함수를 생성하면 내부적으로 위와 같은 구조가 생성된다

- Prototoype + Prototype object 위와 같이 순환 구조를 가진다

- 위와 같은 순환 구조는 아래의 코드에서도 확인 가능하다

3. Prototype Object (프로토타입 객체)

-  constructor가 되며 다른 객체들은 이 프로토타입 객체를 참조한다

- 다른객체의 원형이 되는 객체이다

function human(){ } var aa = new human();  

1)  prototype에 속성을 추가한다면

function human(){ } var aa = new human(); human.prototype.getName = function(){ return '퇴근'; } console.log(aa.getName());  

- 프로토타입 객체에 getName()가 추가될 것이다

2) 다른 객체에 속성을 추가 한다면

function human(){ } var aa = new human(); human.prototype.getName = function(){ return '퇴근'; } aa.getName = function(){ return '출근'; } console.log(aa.getName());  

-  프로토타입 객체를 참조하지만 자기 자신의 고유한 getName()를 가지고 있기 때문에 출력 값은 출근이 된다

- 이말은 이름을 다르게 한다면 객체의 참조를 통해 코드 재사용이 가능해 진다

4. Prototype(프로토타입)

- 프로토타입의 두가지 의미

1) 객체 생성 됬을 때 프로토타입을 참조하는 Link

2) 함수의 멤버인 prototype은 프로토타입 객체를 가리키는 속성 

- 결국 누군가가 프로토타입을 묻는 다면 생성자를 통해 만들어진 객체가 공유할 수 있는 객체 라고 한다면 어느 정도 맞지 않을까

Loop 안의 클로저(Closure) - Closure in loop

- 클로저는 loop 문 안에서 문제를 일으킨다

1. 문제

1) 예 1

var arry = []; for(var i = 0; i< 5; i++){ arry[i] = function(){ return i; } } for(var aa in arry){ console.log(arry[aa]()); }

- 실행 결과 : 5 5 5 5 5

- 예상과는 다른 결과가 출력되었다

- 원인 

- 클로저는 생성될 때 각자의 환경을 가진다, 그러나 위와 같은 경우 내부 함수가 생성되면서 하나의 환경을 공유한다, 그러므로 최종 결과인 5를 공유하여 배열에 5만 저장되었다

2. 해결

var arry = []; for(var i = 0; i< 5; i++){ arry[i] = function(num){ return function(){ return num; } }(i); } for(var aa in arry){ console.log(arry[aa]()); }  

- 밖에 외부 함수를 선언한다

- 배열의 외부함수의 return 값을 넣는다

- 내부함수의 변수가 외부 함수의 인자값을 지정

- 클로저가 생성될 때 마다 각각의 환경을 부여 받는다

클로저(closure)를 이용한  private 메소드 - Emulating private methods using closures

1. 정의

- Java의 private 접근 제어자 처럼  Javascript에서도 클로저를 이용해 private 메소드를 만들 수 있다

2. 구현

1) 예제1

var list = (function(){ var privateList = []; function addList(val){ privateList.push(val); } function removeList(){ privateList.shift(); } return{ add : function(_val){ addList(_val); }, remove : function(){ removeList(); }, value : function(){ return privateList; } }; })(); document.write(list.value()+"<br>"); list.add('Kyle'); list.add('Tom'); list.add('Jane'); document.write(list.value() +"<br>"); list.remove() document.write(list.value()+"<br>");

- 실행 결과 : Kyle,Tom,Jane

                 Tom,Jane

     - 설명 : privateList라는 배열에 사람이름을 저장 혹은 삭제한다

- 실행 순서

1) 먼저 익명의 함수의 리턴 값을 list라는 변수에 저장을 한다

2) 익명의 함수 안에는 private 한 값의 list변수와 addList(), removeList()가 있다

3) 익명의 함수 안에 private 값에 접근하기 위하여 클로저(add, remove, value)를 선언

- 클로저를 이용 함으로서 공통 환경에서 변수를 조작 할 수 있다

2) 예제2

function people(name){ return { getName : function(){ return name; }, setName : function(_name){ name = _name; } } } kyle = people('kyle'); tom = people('tom'); console.log(kyle.getName()); console.log(tom.getName()); kyle.setName('jane'); console.log(kyle.getName());  

- 실행 결과 : kyle, tom, jane

클로저(Closure)

1. 정의

- 자신의 범위(scope) 밖에 있는 변수의 접근 하는 함수 ?

- Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created. ?

- 외부함수의 실행이 끝나더라도 내부함수는 외부 함수의 변수에 접근할 수 있는 로직?

- MDN에서 정의한 클로저에 따르면 독립적인 변수를 참조하는 함수이며 이 함수들은 그들이 생성된 환경을 기억한다라고 한다

- 몬소린지 정확히 모르겠다.- - 

- 클로저(Closure) == 함수, 클로저(Closure) 는 변수에 접근한다

- 생성자 내에서 전용 변수를 참조하는 함수안의 함수

2. 외부함수와 내부함수

1) 예

//외부함수 function outerFun(){ var name ="Hee"; //내부함수 function innerFun(){ console.log(name); } innerFun(); } outerFun();

- 실행 결과: Hee

2) 내부함수

- 내부함수는 외부함수의 변수(var name) 의 접근이 가능하다

3. 내부함수와 클로저(Closure)

- 내부함수와 클로저는 깊은 연관 관계가 있다

- 클로저로 인해 외부함수의 생명이 끝나더도 외부 함수의 변수에 접근이 가능하다

1) 예제1

function outerFun(){ var name ="Hee"; return innerFun; function innerFun(){ console.log(name); } } var closure = outerFun(); closure();  

- 실행 결과 : Hee

- 다른 프로그램언어 (ex:java)를 보면 함수의  return은 곳 함수의 실행 종료, 함수의 생명 끝 이라는 말 과 같다

- 위의 상황

1) closure 라는 함수 객체에 외부함수 리턴 값 저장(상식적으로? return했으니 외부함수(outerFun() 끝)

2) closure() 실행 

3) 내부함수 innerFun()이 실행되며 그 안에 외부함수 변수 값 참조

2) 예제2

function sum(x){ return function(y){ return x+y; } } var closure = sum(2); document.write(closure(4));  

- 실행결과 : 6

- 외부함수의 파라미터 값은 함수의 지역 변수가 된다

- 위의 상황

1) closure 라는 객체에 sum(2) 에 해당하는 return 값을 저장한다

2) closure(4) 를 실행하면 내부함수의 return 값이 실행된다

4. 결론

The solution to this puzzle is that closure has become a closure. A closure is a special kind of object that combines two things: a function, and the environment in which that function was created.  -MDN

- 결국 클로저란 함수, 혹은 하나의 메커니즘이라고 이해했다. 정확히 말하자면 함수 + 함수가 생성되는 환경 을 종합적으로 말하는 것 같다