javascript 함수

함수 객체- 자바스크립트에서 함수는 객체- 객체는 프로토타입 객체로 숨겨진 연결을 갖는 이름/값 쌍들의 집합체- 객체 중 객체 리터럴로 생성되는 객체는 Object.prototype에 연결됨- 반면에, 함수 객체는 Function.prototype에 연결됨(Function은 Object.prototype에 연결됨)- 모든 함수는 추가적인 속성이 있음: 함수의 문맥(context), 함수의 행위를 구현하는 코드(code)- 모든 함수 객체는 prototype이라는 속성이 있음.   이 속성의 값은 함수 자체를 값으로 갖는 constructor라는 속성이 있는 객체.  이것은 Function.prototype으로 숨겨진 연결과는 구분됨.
- 함수는 객체이기 때문에 다른 값들처럼 사용할 수 있음- 함수는 변수나 객체, 배열등에 저장, 다른 함수에 전달하는 인수로도 사용, 함수의 반환값으로 사용
- 함수를 다른 객체와 구분짓는 특징은 호출할 수 있다는 것

 

 

함수 리터럴- 함수 객체는 함수 리터럴로 생성할 수 있음

?

1 2 3

var add = function (a, b) {     return a + b; };

 

- 함수 리터럴의 네가지 부분: function이라는 예약어, 함수의 이름(선택적),                                             괄호로 둘러싸인 함수의 매개변수 집합, 중괄호로 둘러싸인 문장들의 집합
- 함수 리터럴은 표현식이 나올 수 있는 곳이면 어디든지 위치할 수 있음- 함수는 다른 함수 내에서도 정의 가능- 함수 리터럴로 생성한 함수 객체는 외부 문맥으로의 연결이 있는데 이를 클로저(closure)라고 함

 

 

 

 

 

 

호출- 함수를 호출하면, 현재 함수의 실행을 잠시 중단하고 제어를 매개변수와 함께 호출한 함수로 넘김- 모든 함수는 명시되 있는 매개변수에 더해, this, arguments라는 추가적인 매개변수 두개를 받게 됨- this 매개변수는 객체지향 프로그래밍의 관점에서 매우 중요, 호출하는 패턴에 의해 값이 결정됨

- 함수를 호출하는 네가짖 패턴: 메소드 호출 패턴, 함수 호출 패턴, 생성자 호출 패턴, apply 호출 패턴- 각 패턴에 따라 this라는 추가적인 매개변수를 다르게 초기화

메소드 호출 패턴- 함수를 객체의 속성에 저장하는 경우 이 함수를 메소드라고 부름- 메소드를 호출할 때, this는 메소드를 포함하고 있는 객체에 바인딩 됨(this는 객체 자체가 됨)- 호출되는 표현식이 세부지정(마침표나 [])를 포함하고 있으면 이 방법이 메소드 호출 패턴임

?

1 2 3 4 5 6 7 8 9 10 11 12

var myObject = {         value: 0,         increment: function (inc) {             this.value += typeof inc === 'number' ? inc : 1;         } };   myObject.increment( ); document.writeln(myObject.value);   myObject.increment( 2); document.writeln(myObject.value);

- 메소드는 자신을 포함하는 개체의 속성들에 접근하기 위해서 this를 사용할 수 있음- this를 사용해 객체의 값을 읽거나 변경할 수 있음- this와 객체의 바인딩은 호출 시에 일어남

   매우 늦은 바인딩은 this를 효율적으로 사용하는 함수를 만들 수 있음

- 자신의 객체 문맥을 this로 얻는 메소드를 퍼블릭(public)메소드라고 부릅니다.

 

 

함수 호출 패턴

- 함수가 객체의 속성이 아닌 경우에는 함수로서 호출

?

1	var sum = add(3, 4);

 

- 함수 호출 패턴으로 호출할 때 this는 전역객체에 바인딩됨(설계 단계의 실수...)- 대안을 사용해야함   메소드에 변수를 정의한 후 여기에 this를 할당하고, 내부 함수는 이 변수를 통해서 메소드의 this에 접근하는 방법

?

1 2 3 4 5 6 7 8 9 10 11 12

myObject.double = function ( ) {     var that = this;       var helper = function ( ) {         that.value = add(that.value, that.value);     };       helper( ); };   myObject.double( ); document.writeln(myObject.getValue( ));

 

 

 

생성자 호출 패턴

- 자바스크립트는 프로토타입에 의해 상속이 이루어지는 언어

- 이것은 객체가 자신의 속성들을 다른 객체에 바로 상속할 수 있다는 것을 뜻함

- 자바스크립트는 클래스가 없음

 

- 함수를 new 라는 전치 연산자와 함께 호출하면, 

  호출한 함수의 prototype 속성의 값에 연결되는 (숨겨진) 링크를 갖는 객체가 생성되고, 

  이 새로운 객체는 this에 바인딩

- new 라는 전치 연산자는 return 문장의 동작을 변경

?

1 2 3 4 5 6 7 8 9 10 11

var Quo = function (string) {     this.status = string; };   Quo.prototype.get_status = function ( ) {     return this.status; };   var myQuo = new Quo("confused");   document.writeln(myQuo.get_status( ));

 

- new라는 전치 연산자와 함께 사용하도록 만든 함수를 생성자(constructor)라고 함

- 일반적으로 생성자는 이니셜을 대문자로 표기(파스칼)

- 생성자를 new 없이 호출시, 컴파일 시간이나 실행시간에 어떤 경고도 없어서 알 수 없는 결과를 초래

- 생성자 함수를 사용하는 스타일은 권장 사항은 아님

 

 

 

apply 호출 패턴

- 자바스크립트는 함수형 객체지향 언어이기 때문에, 함수는 메소드를 가질 수 있음

- apply 메소드는 함수를 호출할 때 사용할 인수들의 배열을 받아들임

- this값을 선택할 수 있도록 해줌

- apply 메소드에는 2개의 매개변수 존재: this에 묶이게될 값, 매개변수들의 배열 

?

1 2 3 4 5 6 7 8

var array = [3, 4]; var sum = add.apply(null, array);   var statusObject = {     status: 'A-OK' };   var status = Quo.prototype.get_status.apply(statusObject);

 

 

 

 

인수배열(arguments)

- 함수 호출 시, 추가적인 매개변수로 arguments라는 배열을 사용할 수 있음

- 함수를 호출할 때 전달된 모든 인수를 접글할 수 있게 함(매개변수 수보다 더 많이 전달된 인수들도 모두 포함)

- arguments라는 매개변수는 매개변수의 갯수를 정확히 정해놓지 않고, 

   넘어오는 인수의 갯수에 맞춰서 동작하는 함수를 만들 수 있게 함

 

http://croute.me/566