'Javascript'에 해당되는 글 49건

자바스크립트 n 진수 구하기

- toString()을 이용하여 원하는 진수를 구할 수 있다

1. 예제

var num = 128; //2진수 console.log(num.toString(2)); // 10000000 //8진수 console.log(num.toString(8));// 200 //16진수 console.log(num.toString(16));// 80

객체 판단 (instanceOf, IsPrototypeOf , In)

1.  instanceOf

- 객체를 생성한 생성자 함수, 프로토타입 체인을 알 수 있다

- 객체명 instanceOf 생성자

var Person = function(){}; var Programer = function(){}; Programer.prototype = new Person(); var test = new Programer(); console.log(test instanceof Programer); //true console.log(test instanceof Person); //true console.log(test instanceof Object); /true

2.  isPrototypeOf

-  참조하고 있는 프로토타입확인

var Person = function(){}; var Programer = function(){}; Programer.prototype = new Person(); var test2 = new Programer(); console.log(Person.prototype.isPrototypeOf(test2)); //true console.log(Programer.prototype.isPrototypeOf(test2)); //true console.log(Object.prototype.isPrototypeOf(test2)); //true  

3. in

- 객체 생성시(생성자 방법, 리터럴) 해당 객체의 멤버 유무

var obj = { getName : function(){ }, getAge : function(){ } } console.log('getName' in obj); //true console.log('getTall' in obj); //false  

자바스크립트의 클래스와 생성자의 강제적 호출 

1. 클래스

- 자바스크립트는 클래스가 존재하지 않는다. 그렇기 때문에 함수를 이용하여 클래스를 정의한다

var Person = function(name){ this.name = name; this.toString = function(){ return 'Person:' + this.name; } } var ps = new Person('Hee'); console.log(ps.name); //Hee console.log(ps.toString()); //Person : Hee

1) 정의 법칙

a. 이름은 대문자로 시작

b. 프로퍼티는 this.이름

- this는 생성된 인스턴스를 가리킨다

c. 메소드는 함수형 프로퍼티

- 값이 함수 객체인 프로퍼티를 메소드로 동작시킴

- 메소드를 생성자에 정의하는 것은 효율적으로 좋지않다(프로토타입 사용)

d. 반환값은 필요없다

2. new 키워드 없이 객체 인스턴스 생성?

1) 문제 : 만약 new 키워드 없이 객체를 만들려고 한다면 어떻게 될까?

var Person = function(name){ this.name = name; this.toString = function(){ return 'Person:' + this.name; } } var ps = Person('Hee'); console.log(ps); console.log(name); console.log(ps.name);  

- 실행결과 : undefined, Hee, error

- new 키워드가 없다면 그건 생성자가 아닌 보통 함수가 되어버린다

- Person 객체는 생성되지 않고, 전역 변수 name이 생성된다

2) 해결

- 이런 new 키워드 실수를 방지하고자 생성자 안에 임의 소스를 삽입한다

var Person = function(name){ if(!(this instanceof Person)){ return new Person(name); } this.name = name; this.toString = function(){ return 'Person:' + this.name; } } var ps = Person('Hee'); console.log(ps); console.log(name); console.log(ps.name);  

- this는 전역객체 혹은 undefined일 것이다

- this를 이용하여 Person 객체가 아니라면 자동으로 new 로 객체를 만드는 소스를 삽입한다

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