반응형

Programming/JavaScript 22

복제와 참조

var a = 1; var b = a; b = 2; console.log(a); // 1 위 코드에서 b = a이고 b의 값을 2로 정의했는데 a의 값이 1이 나온 이유는 a = 1로 정의를 하고 b = a 를 하였을때 b는 a의 값 본체에 연결되어 있는것이 아니라 b는 a의 값과 똑같은 값에 연결되어 있는것이다. 한마디로 b는 a의 값을 복제한 값을 대입하는 것이다. 이러한 개념을 복제라고 하는데 복제는 a = 1; 처럼 원시데이터 타입일때 일어난다. 원시데이터가 아닌 다른 데이터 타입, 즉 객체에서는 복제가 발생하지 않는다. var a = {'id':1}; var b = a; b.id = 2; console.log(a.id); // 2 여기서 a를 객체로 정의하였고 b = a를 했을경우, a의 값이 ..

데이터 타입

데이터 타입은 크게 두가지로 나뉠 수 있다. 원시 데이터 타입 primitive type (기본 데이터 타입) 객체 데이터 타입 (참조 데이터 타입) 원시 데이터 타입에는 숫자 문자열 불린(true/false) null undefined 가 있고 이것 이외에 나머지가 객체 데이터 타입이다. var str = 'coding'; console.log(str.length); // 6 console.log(str.charAt(0)); // "C" 분명 객체처럼 사용되고 있는데 왜 문자열이 객체가 아니라고 할까? 그이유는 문자열과 관련된 어떤 작업을 하려고 할 떄 자바스크립트는 임시로 문자열을 객체로 만들고 사용이 끝나면 제거하기 때문이다. 이러한 처리는 내부적으로 자동적으로 일어난다. str = new Stri..

Object

자바스크립트에는 Object라고 하는 객체가 따로있다. Object 객체는 모든 객체의 부모 객체라고 부를 수 있는 가장 기본적인 형태를 가지고 있는 객체이다. 모든 객체는 Object 객체를 상속 받는데 그러하기 떄문에 모든 객체는 Object 객체의 prototype 프로퍼티를 가지고있다. 모든 객체가 공통적으로 가지고 있어야 할(하는) 기능이 있다면 Object의 prototype으로 지정하면 된다. Object.prototype.contain = function(neddle) { for(var name in this){ if(this[name] === neddle){ return true; } } return false; } var o = {'name':'apple', 'city':'seoul'}..

표준 내장 객체의 확장

표준 내장 객체(Standard Built-in Object)란 자바스크립트가 기본적으로 가지고 있는 객체를 말한다. Object Array String Boolean Number Math Date RegExp 자바스크립트 내장 객체는 이렇게 몇가지 안되지만 사용하는 호스트 환경에서 제공하는 내장 객체들도 있어 실질적으론 더 많아진다. 배열을 확장 var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba'); function getRandomValueFromArray(arr){ var index = Math.floor(arr.length*Math.random()); return arr[index]; } console.log(getRandomV..

Prototype

프로토타입을 통해서 자바스크립트는 상속이라고 하는 개념을 제공하고있다. function Ultra(){} Ultra.prototype.ultraProp = true; function Super(){} Super.prototype = new Ultra(); function Sub(){} Sub.prototype = new Super(); var o = new Sub(); console.log(o.ultraProp); > true sub를 통해 만들어진 객체 자체에는 ultraProp 라는 값을 가지고 있지 않다. 이 값은 sub의 부모 객체인 super의 부모 객체인 ultra가 ultraProp이라는 값을 가지고 있다. 서브는 슈퍼를 상속받고, 슈퍼는 울트라를 상속받고 있는 것이다. 그리고 울트라안에 u..

상속(inheritance)

객체(오리지널, 부모객체)를 그대로 물려받아서 새로운 객체를 만들 수 있다. 상속받은 객체가 부모객체의 어떠한 기능은 제거하거나 추가해서 자신의 맥락에 맞게 부모의 객체의 로직을 재활용하면서 추가하거나 제거하는 것이 상속의 기본적인 동작방법이다. 부모의 재산을 상속받듯이 오리지널 객체가 가진 기능을 상속받는 객체가 동일하게 가질수 있다. function Person(name){ this.name = name; this.introduce = function(){ return 'My name is '+this.name; } } var p1 = new Person('apple'); document.write(p1.introduce()+" "); > My name is apple function Person(n..

this

this는 함수를 어떻게 호출하냐에따라 가리키는 대상이 달라진다. function func(){ if(window === this){ document.write("window === this"); } } func(); > window === this var o = { func : function(){ if(o === this){ document.write("o === this"); } } } o.func(); > o === this 객체의 소속인 메소드의 this는 메소드를 호출한 객체를 가리킨다. 첫번째 경우는 전역 객체인 window를 넣어주면 함수를 호출할때 window.func();로 두 경우 모두 메소드가 속한 객체를 가리키고 있다. var funcThis = null; function Func..

생성자와 new

var person1 = { 'name' : 'apple', 'introduce' : function(){ return 'My name is '+this.name; } } var person2 = { 'name' : 'banana', 'introduce' : function(){ return 'My name is '+this.name; } } 이런식으로 여러 사람의 이름을 담는 객체를 여러개 만든다고 한다면 introduce메소드들은 내용이 완전히 동일하고 객체의 취지가 같다고할때 메소드의 동작방법을 바꾼다고 하면 객체들이 가지고 있는 메소드들을 전부 찾아서 똑같이 바꿔줘야 하는 일이 생긴다. 이러한 것을 중복이라고 한다. 중복이 있다는것은 코드 가독성이 떨어진다는 것. 코드의 양이 많아진다는 것. 유지..

함수의 호출 apply

자바스크립트에서 함수라고 하는것은 일종의 객체이다. 객체는 속성을 가지고 있고 그 속성에 '값'이 저장되어 있다면 그냥 속성(property)라고 하고, 그 속성(property)에 함수가 저장되어 있다면 메소드(method)라고 한다. 함수의 가장 기본적인 호출 방법이다. func라는 변수에 담겨있는 자바스크립트 호출하게 된다. function func(){ } func(); func라는 이름의 함수는 객체이기 때문에, 저 함수는 메소드를 가지고 있다. 저 메소드는 기본적으로 가지고 있는 내장된 메소드, 내장된 객체이다. func라는 이름의 함수를 정의하게 되면 func.apply혹은 func.call 이라고 하는 메소드에 접근을 할 수가 있다. 메소드들이 하는 역할은 정의한 함수를 호출하는 역할을 한..

arguments

arguments 함수 안에서 함수의 여러가지 정보를 담고있는 (특히나 인자에 관련된) 객체, 사용방법이 배열과 유사하다. 유사배열이라고도 한다. 매개변수(parameter)와 인자(arguments)의 차이 function a(arg){ // arg를 매개변수 실행시킬 코드 } a(1);// 1을 인자라고 한다. 매개변수는 변수이고 그 변수에 들어가는 값을 인자라고 하는데 엄격하게 구분하지 않는 경우가 많이 있다. function sum(){ var _sum = 0; for(var i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i]; } return _sum; } document...

반응형