[Javascript] This 와 call(), apply()

Javascript/Core 2016. 12. 21. 10:40
donaricano-btn

This 와 call(), apply()


1. 정의

1)  call()

- The call() method calls a function with a given this value and arguments provided individually.

(call()는 지정된 this(현재객체)와 파라미터들을 이용하여 함수를 호출한다) 

a. 문법

fun.call(thisArg[,arg1[.arg2[,....]]])


2) apply()

- The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).

(apply()는 call()과 비슷하지만 파라미터의 형태가  배열의 형태로 넘어간다)

a. 문법

fun.apply(thisArg, [argArray])


3) 비교와 설명

    - call()과 apply()는 Function.prototype의 객체에 속해 있다

    - 결과적으로 function()을 이용하여 함수를 생성하면 모두 call(), apply()를 사용 할 수 있다

- call()이 살짝 빠르다는 결과가 있다.

- 고정적인 인자일 경우 call()이 좋고 유동적으로 변하는 값은 apply()가 좋다고 한다


2. 사용

1) call()

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function sum(num1, num2){
    return num1 + num2;
}
 
function minusCall(num3){
    return sum.call(this,3,3) - num3;
}
 
function minus(num3){
    return sum(3,3) - num3;
}
 
console.log(minusCall(2)); //4
console.log(minus(2));    //4

- minusCall() 과 minus()의 결과값은 4로 같다

2) apply()

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function sum(num1, num2){
    return num1 + num2;
}
 
function minusApply(num3,num4){
    return sum.apply(this,[num3,num4]) - num3;
}
 
function minusArg(num3,num4){
    return sum.apply(this,arguments) - num3;
}
 
function minus(num3, num4){
    return sum(num3, num4) - num3;
}
 
console.log(minusApply(4,5)); //5
console.log(minusArg(4,5));   //5
console.log(minus(4,5));      //5
 

- 세 함수 호출시 결과는 모두 5로 같다

3) 문제 : 결과가 같은데 번거롭게 call()/ apply()를 써서 함수를 호출할 필요가 있을까?

4) This의 변환

- call()/apply()의 주 목적은 함수 안의 this를 변환하는데 있다.


3. 호출에 따른 this의 변환

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.name = 'Hee';
 
var local = {
    name : 'Kyle'
};
 
//전역 함수
function global(){
    return this.name;
}
 
console.log(global());              //Hee
console.log(global.call(this));     //Hee
console.log(global.call(window));   //Hee
console.log(global.call(local));    //Kyle

- 위 결과 call()의  this에 어떤 값을 넘기느냐에 따라 함수안의 this의 내용이 변하는 것을 확인 할 수 있다


'Javascript > Core' 카테고리의 다른 글

[Javascript] 객체 판단 (instanceOf, isPrototypeOf , In)  (0) 2016.12.23
[Javscript] 자바스크립트의 클래스와 생성자의 강제적 호출  (0) 2016.12.21
[Javascript] 익명의함수 call(this)?  (0) 2016.12.20
[Javascript] 지정된 함수 인수  (0) 2016.12.20
[Javascript] 자바스크립의 내장객체 (built-in object)  (0) 2016.12.16
블로그 이미지

리딩리드

,

[Javascript] 익명의함수 call(this)?

Javascript/Core 2016. 12. 20. 22:21
donaricano-btn

익명의함수 call(this)?


1. call(this)

?
1
2
3
4
(function(){
    var data = 108;
    console.log(data);
}).call(this);

- call(this) :  그 자리에서 실행한다.

1) call(this)

?
1
2
3
4
5
6
7
8
9
10
(function(){
    var data = 108;
    console.log(data);
}).call();
//108
(function(){
    var data = 108;
    console.log(data);
})();
///108
 

- 두 함수 모두 같은 값을 반환한다

- 하지만 this가 없다면 환경에 따라 오류를 일으킬 수 있다

- 함수 안에서 동작 모드에 따라 this가 가리키는 것이 다르다

a. 표준모드 this : 전역객체(window 객체)

b. strict 모드 this : undefined

- call()는 전달된 객체를 this로 익명의 함수를 호출 한다. 전역 스코프에서 this는 전역 객체를 의미하기 때문에 환경에 상관없이 함수 안에 this는 전역 객체가 된다


'Javascript > Core' 카테고리의 다른 글

[Javscript] 자바스크립트의 클래스와 생성자의 강제적 호출  (0) 2016.12.21
[Javascript] This 와 call(), apply()  (0) 2016.12.21
[Javascript] 지정된 함수 인수  (0) 2016.12.20
[Javascript] 자바스크립의 내장객체 (built-in object)  (0) 2016.12.16
[Javascript] 자바스크립트 함수 인수의 기본값 설정 및 인수확인  (0) 2016.12.15
블로그 이미지

리딩리드

,

[Javascript] 지정된 함수 인수

Javascript/Core 2016. 12. 20. 21:56
donaricano-btn

지정된 함수 인수 


1. 정의   

- 함수의 인수를 전달할 때 지정된 인수만 전달 함으로서 불필요한 인수의 전달을 막는다


2. 구현

1) 문제

?
1
2
3
4
5
6
7
function showPanel2(height, width, length){
    var height = height;
    var width = width;
    var length = length;
 
    console.log(height, width, length);
}

a. 위 같은 상황에서 height와 length의 인수만 전달 하고 싶다면 어떻게 해야되는가?

- showPanel2(20,undefined,10);

b. 이렇게 진행 할 경우 불필요한 undefined를 넘겨 줌으로서 length 길이를 맞춘다

2) 해결

?
1
2
3
4
5
6
7
8
9
10
11
12
13
showPanel({
     height : 50,
     width:100
 });
 
 function showPanel(arg){
 
     var height = arg.height;
     var width = arg.width;
     var length = arg.length
 
     console.log(height, length, width);
 }
 

- 인수를 객체화 시켜 해시 형태로 넘겨준다.

- 불필요한 인수의 사용을 막을 수 있다

'Javascript > Core' 카테고리의 다른 글

[Javascript] This 와 call(), apply()  (0) 2016.12.21
[Javascript] 익명의함수 call(this)?  (0) 2016.12.20
[Javascript] 자바스크립의 내장객체 (built-in object)  (0) 2016.12.16
[Javascript] 자바스크립트 함수 인수의 기본값 설정 및 인수확인  (0) 2016.12.15
[Javascript] 자바스크립트 실행문맥 (Execution context)  (0) 2016.12.15
블로그 이미지

리딩리드

,

[Javascript] 자바스크립의 내장객체 (built-in object)

Javascript/Core 2016. 12. 16. 14:13
donaricano-btn

자바스크립의 내장객체 (built-in object)


1. 정의

- object specified and supplied by an ECMAScript implementation

- 자바스크립트가 기본적으로 내장하고 있는 object 이다

1) 종류 

- Number, Math, Date, String, Boolean, Function , Array, Object, RegExp

- 각각의 오브젝트들은 프로퍼티와 함수들을 가진다


2. 내장객체(built-in object) 사용

1) Math 이용하기

- 1~10 랜덤 수

?
1
console.log(Math.floor(Math.random()*10)+1);

- 1~100 랜덤 수

?
1
console.log(Math.floor(Math.random()*100)+1);
 


3. 내장객체 확장

- 만약 이런 문제가 있다면

- 문제: 아래 결과가 나올 수 있도록 만들어라

?
1
2
3
4
var aa = [1,2,3,4,5];
 console.log(aa.duplicate());
 
// 1,2,3,4,5,1,2,3,4,5
 

- Array 내장객체 prototype의 함수를 만들어 사용한다

- 사용자 정의함수

?
1
2
3
4
5
Array.prototype.duplicate = function(){
     var arry = this.concat(this);
 
     return arry.join();
 }
 

'Javascript > Core' 카테고리의 다른 글

[Javascript] 익명의함수 call(this)?  (0) 2016.12.20
[Javascript] 지정된 함수 인수  (0) 2016.12.20
[Javascript] 자바스크립트 함수 인수의 기본값 설정 및 인수확인  (0) 2016.12.15
[Javascript] 자바스크립트 실행문맥 (Execution context)  (0) 2016.12.15
[Javascript] 자바스크립트 기본 함수 정의  (0) 2016.12.14
블로그 이미지

리딩리드

,

공지사항

카테고리

글 보관함

달력

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

티스토리툴바