자바스크립트 정리자료(자바와의 차이점 중심..)

알아보기 되게 어렵네여..-_-;;

http://nowsu80.springnote.com/pages/281693 걍 일루 가서 보세염..

자바를 하다자바스크립트를 할때 차이점을 중심으로

공부중인 내용들 정리한 겁니다..

계속 업데이트 중이고.. 머 별건 없습니다..

초보자 중심이니 기대는 마시길..^^;;

1.자바 스크립트와 다른이점.

특징	설명
데이터형을 명확하게 지정하지 않는다.	변수는 그저 변수라고 선언할 뿐이고, 정수형, 문자열형, 특정 객체형 등의 정확한 데이터형을 지정하지 않는다. 자바스크립트 프로그램에서는 하나의 변수에 여러가지 종류의 값을 모두 할당할 수 있다.
프로그램을 동적으로 인터프리트해서 실행한다.	자바,C, C#등의 컴파일 언어와 다르게 자바스크립트 프로그램은 코드 자체를 문자열로 보관하고 있다가 실행될 때 하위 명령어로 즉석에서 변환해 실행횐다. 따라서 웹 사이트에 접속하는 사용자는 간단한 방법으로 프로그램의 코드를 모두 볼 수 있다. 또한 컴파일 하는 과정이 필요 없기 때문에 프로그램 코드를 동적으로 쉽게 생성해 낼 수 있다.
자바스크립트 함수는 1차 객체이다.	자바 객체의 메소드는 해당 객체 자체에 연결되어 있고, 해당 객체를 통해야만 메소드를 호출할 수 있다. 자바스크립트의 함수 역시 객체에 연결할 수 있기 때문에 자바의 메서드와 비슷하게 활용할 수 있지만, 실행중에 다른 컨텍스트에서도 해당 함수를 호출할 수 있고 다른 객체로 이동시켜 연결할 수도 있다.
자바스크립트의 객체는 Prototype을 기반으로 하고 있다.	자바, C++, C# 등의 언어에서 객체는 상위 클래스,. 가상 상위 클래스, 인터페이스 등의 언어적인 특징을 사용해 특정한 구조로 정의하고, 이런 구조를 통해 객체가 어떤 기능을 갖는지도 정의된다. 하지만 자바스크립트의 객체는 그저 객체로 위장한 연결 배열일 뿐이다. Prototype을 활용하면 자바스크립트에서도 자바와 비슷한 형태로 프로그램을 짤 수 있지만 그저 모양만 비슷할 뿐이다.

2.자바스크립트의 객체

1.객체 생성

-자바스크립트의 객체는 내부적으로는 이름으로 속성과 함수 등의 내부구성요소를 읽고 쓸 수 있는 단순한 연결(associative array)배열일 뿐이다. 마침표를 찍어서 사용하는 형식을 차용하였지만 실제로는 다른방법(배열사용식)을 통해똑같이 사용할 수도 있다.

객체를 만들어 낼 수 있는 방법은 두가지가 있는데 첫번째는 자바스크립트의 인스턴스를 생성할때 일반적인 방법이고, 두번째는 JSON을 활용하는 방법이다.

＃1.자바스크립트의 객체 생성 기본 방법

myObject.shoeSize = "12";

자바라면shoeSize라는 속성을 갖고 있는객체가 정의되어 있어야하고 정의되어 있지 않은 속성을 사용하면

컴파일 조차 되지 않지만, 자바스크립트는 그렇지 않다. 자바스크립트의 객체가 실제로는 연결 배열로 만들어져 있다는 사실을

활용하면 다음과 같이 배열처럼 사용할수도 있다.

myObject['shoeSize'] ="12";

속성과 비슷하게 새로운 함수도 객체에추가할 수 있다.

myObject.speakYourShoeSize = function(){

alert("shoe Size: " +this.shoeSize);

}

이미 구현되 있는 함수를 가져다 쓸 수도 있다.

function sayHello(){

alert("hello, myshoeSizeis" +this.shoeSize);

}

......

myObject.sayHello = sayHello;

*이미 정의된 함수를 가져다 사용할 때 주의할 부분이 있는데 바로 괄호를 생략한다는 점이다. 만약 괄호를생략하지 않고 myObject.sayHello=sayHello(); 와 같이 사용한다면sayHello()의 결과값을myObject.sayHello에 대입하게 된다.

＃2. JSON 객체 생성 방법

JSON(JavaScript Object Notation)을 활용하면 객체나 배열등을 만들어 내는 코드를 아주 깔끔하게 작성할 수 있다.

JSON이 어떻게 동작하는지를 살펴 보려면 자바스크립트에서 배열이 어떤 구조르 동작하는 지를 이해해야 한다.

자바스크립트는 Array라는 배열 클래스가 내장되어있고,new 키워드를 사용해 자바와같이 생성이 가능하다.

또한 중괄호를 사용하여 각각의 속성과 그 값을 키:값 의 형태로나열해 만들 수 있다.

myLibray.books = {

bestSeller :predeFinedBook1,

cookBook :predeFinedBook2,

spaceFiller : predFinedBook3

};

*문자열 가운데에 공백이 들어간다면"Best Seller" : predeFinedBook1과 같이따옴표를 사용해야 한다.

JSON으로 객체를 생성할 때에는 여러개의 JSON생성 부분을 계층구조로 연결해 복잡한 구조의 객체를 한번에 만들어 낼 수 있다.

varmyLibrary = {

location : "myhouse",

keyWords :["root vegetables","turnip","tedium"],

books:[

{ title: "Turnip Cultivation throughthe Ages",

authors :[

{name: " Jim Brown". age : 9},

{name:"Dick Turnip",age : 312}

],

publicationDate : "long ago"

}

{

title: "Turnip Cultivation through the Ages, vol.2",

authors : [

{name: "Jim Brown",age: 35}

],

publicationDate: new Date(1605,11, 05) //gunpowderPlot() 과 같이 함수를 지정해도 됨

}

]

};

*일반적인객체 생성 방법을 사용했을 때 수십줄의 코드를 사용했어야 할 만한 부분이지만,JSON을 활용하면 단 한번의 단계에 정보를 모두 넘겨주면서 똑같은 객체를 생성할 수 있다. 또한 JSON으로 객체를 생성할 때 속성과 함수를 모두 지정할 수 있고, 객체를 생성한 이후에도 함수나 속성을 얼마든지 추가할 수 있다.

var turnipVol2={

title: "TurnipCultivation through the Ages, vol." +volNum,

authors : [

{name :"Jim Brown",age: 35}

],

publicationDate : gunpowderPlot()

}

],

summarize:function(len){

if(!len){

len = 7;

}

var summary = this.title+ "by" + this.authors[0].name+"and his cronies is very boring.Z";

for(var i =0; i<len; i++){

summary+="z";

}

alert(summary);

}

};

*1. 객체를 생성하고나면그저 똑같은객체일 뿐이기 때문에 JSON도얼마든지섞어서 사용할 수 있다. JSON으로 생성한 자바스크립트 객체의 내용을 일부 수정해야 할 필요가 있다면 기본 방법을 활용해도 된다.

varnumbers ={one:1, two:2, three:3};

numbers.five =5;

*2.JSON으로 생성한 객체는 내용이 다르다 해도 모두 Object 아니면 Array객체이기 떄문에 instanceof연산자로 구분할 수 없다.

#3.생성메서드, 클래스, 프로토타입

자바에서는 모든것은 객체이고자바 가상머신은 클래스, 속성, 메서드등에 대한 내용을 완벽하게 알고 있다.

MyObject object = new MyObject(arg1, arg2);

이와 같은 코드를 정의하려면 MyObject라는 클래스가 정의되 있는 상태여야 하고, 인자를 두개 받는 생성자도정의 되어있어야 한다.

하지만 자바스크립트 객체는 속성과 함수를 실행중에 마음대로변경할 수 있는 기능을 가졌다.

MyJavaScriptObject.completelyNewProperty ="something";

실행 도중에도 객체에 정의되지 않았던 위와 같은코드를 마음대로 추가 할수 있다.

이렇게 자유도가 높지만 그에 비해 구조화된 수준은 떨어질 수밖에 없다. 이럴때 특정 함수를사용해 객체를 만들면 어떤 속성과 함수가 해당 객체에 자동으로 연결되는지를 정의하는 프로토타입을 활용하면 객체지향 개발자의 눈에 익은 형태로 객체 생성 부분을 정리할 수 있다.

프로토타입은 자바스크립트 객체의 속성이라고 볼 수 있으며 일반적인 객체지향 언어에서는이와 비슷한예를 찾을수가없다. 생성 메서드의 프로토타입에는 함수와 속성을 연결해둘 수 있도록 되있다. 그러면 new 키워드와 함께 프로토타입이 동작하게 되는데new 키워드를통해 생성메서드를 호출하게 되면 해당 함수의 프로토타입에 들어있는 모든 속성과 함수가 새로 생성되는 객체에 추가된다.

function myObject(name, size){

this.name = name;

this.size = size;

}

MyObject.prototype.tellSize = function(){

alert("size of " + this.name+ " is " + this.size);

}

var myObj = new MyObject("tiddles", "7.5meters");

myObj.tellSize();

일반적인 방법으로 생성 메서드를 선언한 다음 tellSize메서드를 프로토타입에 연결 하였다. 그러면 객체를 생성했을 때 해당 함수가 객체에 자동으로 연결된다. this는 실행되는 그 시점에도 항상 새로 만든 객체를 가리키도록 되어있다.

프로토타입은 항상 생성 메서드를 정의한 다음에야 사용할 수 있고, 객체는 생성 메서드가 호출되기 이전에 프로토타입에 지정되 있던 내용만을 가져오게 된다. 생성 메서드를 호출해 객체를 생성하는 사이마다 프로토타입을 원하는대로 변경해 함수 뿐만 아니라 속성도 얼마든지 추가할 수 있다.

MyObject.prototype.color ="red";

var obj1 = new MyObject();

MyObject.prototype.colore = "blue";

var obj2 = new MyObject();

위의 예에서는 실행 도중에 프로토타입을 바꿔서 별로 득될게 없지만 이런 형태로 프로그램을 작성할 수 있다는 점을 알아 둔다는데 의미가 있고, 프로토타입은 자바스크립트의 객체 구성 방법에 객체지향 언어의 클래스와 비슷한 개념을 사용할 수 잇도록 도와주는 정도로 사용하는게 가장 안전하고 확실한 방법이다. 자바스크립트에 내장된 클래스(브라우저 내부에서 정의하고 자바스크립트 엔진을 통해서 불러다 쓸 수 있는 객체, 호스트 객체 라고도 한다)의 프로토타입을 사용하면 특이하게도 기능을 상속받아 사용할 수 있다.

#4.내장 클래스 상속받기

자바스크립트에 내장된 Array 객체를 예로 들어 함수를 만들어 본다.

Array.prototype.indexOf = function(obj){

......................

}

Array.prototype.cointains= function(obj){

.....................

}

Array.prototype.apped = function(obj){

.................

}

이렇게 프로토타입을 선언해 두고 나면 선언한 이후에 생성되는 모든 Array객체는 new 연산자를 사용하건 JSON을 사용하건 간에추가한 3가지 함수를 모두 활용할 수 있다. 이렇게 자바스크립트는 기본적으로 상속이라는 개념을 갖고 있지 않지만. 프로토타입을 잘 황용하면 일종의 상속개념을 도입할 수 있다.

*브라우저의 내장객체는 내장 객체간의 상속을 지원한다. 예를 들어Function이나 Array등의 객체는 모두Object 객체를 상속받기 떄문에instanceof연산자를 적용하는 순서에 신경을 써야 한다.

3.메서드와 함수

#1. 1차 함수

자바스크립트의 함수는 인자도 갖고 있고 결과값을 리턴하기도 하기 때문에 자바에서의 메서드와 비슷하다고 생각할수 있지만 중요한 차이점이 있다. 자바의 메서드는 해당 클래스의 내부에만 존재할 수 있지만 자바스크립트의 함수는 객체와 관계없이 혼자 떠돌아다닐 수 있는 존재 이기 때문에 함수 자체로 보면 1차 객체라고 생각할 수 있다. 자바스크립트에서는 함수 역시 Function이라는 내장 객체이다. 함수에는 자바스크립트 엔진이 실행할 수 있는 프로그램 코드가 들어 있고 외부에서 호출할 수 도 있지만 어쨌거나 Object 클래스를 상속받은 객체이기 때문에 자바스크립트 객체로써 할 수 있는 일, 예를 들어 특정 이름의 속성을 추가하는 등의 작업도 모두 처리할 수 있다. 함수는 1차 객체이기 때문에 다음과 같이 call()함수를 사용해 호출 할 수도 있다.

var result=MyObject.doSomething.call(MyOtherObject,x,y,z,);

Functino.call() 함수에 넘겨주는 첫 번째 인자는 호출될 함수가 동작하는 동안 해당 함수의 컨텍스트로 사용할 객체를 의미하고, 두번째 인자부터는 호출하는 함수의 인자로 그대로 넘기도록 되어있다. (applay()함수는 호출할 함수에 넘길 인자 목록을 두번쨰 인자에 배열로지정하도록 되있기 때문에 인자의 길이가 정해지지 않은 함수를 호출해 사용할때 유용하다)

*자바스크립트 함수의 인자 목록에는 개수가 정해져 있지 않다. 필요 이상으로 넘겨받은 인자는 모두 무시하고, 개수가모자르는 경우에는 모자르는 인자를undefined값으로 처리한다. 이 방법을활용하면 getter/setter 메서드를 한꺼번에 구현할 수 있다.

function area(value){

if(value){

this.area = value;

}

return this.area;

};

만약 area()라고 호출하면 value값은 undefined로처리되 값이 없기 때문에this.area값이 그대로 유지된다. (getter기능)반대로 인자를 넘겨 줬다면 set함수의 기능으로 작동한다.

#2. 객체에 함수 연결

자바스크립트는 함수기반의 언어이기때문에 객체를 따로 정의하지 않더라도 함수를 얼마든지 구현해 사용할 수 있다.

function doSomething(x,y,z){....}

var doSomething = function(x,y,z){....}

객체지향 언어와 비슷하게함수를 객체에 연결해 사용할 수 있기 때문에 마치 자바나 C#의 메서드를 사용하는 것처럼 생각할 수 있다. 그런데 객체에 함수를 연결할 때 여러가지 방법을 사용할 수 있다. 가장 먼저 미리 정의되어 있는 함수를 역시 미리 만들어 둔 객체에 연결할 수 있다.(같은프로토타입을 상속받은 객체만이 해당 함수를 호출할 수 있는 경우)

myObj.doSomethingNew =doSomething;

myObj.doSomethingNew(x,y,z);

객체를 생성할 때 필요한 함수(독립함수나 인라인함수)를 만들어 추가하거나 함수를 프로토타입에 추가하는 방법을 사용하면, 해당 객체를 상속받는 모든 객체가 같은 함수를 호출해 기능을 공유할 수 있다. 위의 예와 같은 방법으로 객체에 함수를 추가하긴 했지만 아직도 객체에 단단하게 붙어있는 상태는 아니다.

#3. 다른 객체의 함수 불러오기

함수를 1차 객체로 구현했다는 점을 통해 자바스크립트는 다른 언어에 비해 언어적으로 상당한 양의 추가기능을얻은 것과 같다.

가장 먼저 손꼽아 볼 항목은 바로 다른 객체의 함수를 불러온 다음 자신의 함수인 양 호출할 수 있다는 점이다.

나무에 해당하는 부분을구성해보자.

functionTree(name, leaf,bark){

this.name = name;

this.leaf = leaf;

this.bark =bark;

}

그리고 특정나무에 대한 설명을 얻어 낼수 잇는 간단한 함수도 추가해보자.

Tree.prototype.describe = function(){

returnthis.name + " :leaf =" +this.leaf+", bark =" + this.bark;

}

지금 시점에서 describe()함수를 호출하면 어떤 값이 나올지는 충분히 예측이 가능하다.

이제 강아지를 뜻하는 객체를 하나