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

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

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

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의 변환

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의 내용이 변하는 것을 확인 할 수 있다

익명의함수 call(this)?

1. call(this)

(function(){ var data = 108; console.log(data); }).call(this);

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

1) call(this)

(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는 전역 객체가 된다

지정된 함수 인수 

1. 정의   

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

2. 구현

1) 문제

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) 해결

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

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

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

자바스크립의 내장객체 (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 랜덤 수

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

- 1~100 랜덤 수

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

3. 내장객체 확장

- 만약 이런 문제가 있다면

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

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

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

- 사용자 정의함수

Array.prototype.duplicate = function(){ var arry = this.concat(this); return arry.join(); }