달력

1

« 2020/1 »

  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  

자바스크립트의 객체

-숫자, 문자열, 불린값, null, undefined같은 기본 타입을 제외한 모든 값은 객체.

-따라서 배열, 함수, 정규표현식 등도 모두 자바스크립트 객체로 표현됨.

-이러한 객체는 자바스크립트에서 참조타입이라고 부릅니다.

-이름(key):값(value)형태의 프로퍼티들을 저장하는 컨테이너

-참조 타입인 객체는 여러 개의 프로퍼티들을 포함(기본 타입은 하나의 값만 가짐)함

-객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수 있음

-객체의 모든 연산은 실제 값이 아닌 참조값으로 처리됨

   

   

객체 생성하기 

자바

클래스 정의하고 클래스의 인스턴스를 생성하여 객체 생성

자바스크립트

클래스 개념 없음.

객체 리터럴이나 생성자 함수등 별도의 생성 방식 존재

   

  • Object()생성자 함수 이용

//Object()메소드를 이용해서 foo라는 빈 객체 생성

var foo = new Object();

   

//foo객체에 프로퍼티 생성

foo.name ='foo';

foo.age =33;

foo.gender='femaile';

   

//출력

document.write(typeof foo);

console.log(foo);

   

   

  • 객체 리터럴 방식으로 객체를 생성

중괄호({ })를 이용해서 객체 생성

중괄호안에 "프로퍼티이름":"프로퍼티값" 형태로 표기(key와 value의 쌍)로 속성 지정

var member = {

name:'foo',

age:20,

job:'student'

};

   

객체에 메서드 지정

var member = {

name:'foo',

age:20,

job:'student'

eat:function(){

코드

}

};

   

   

  • 생성자 함수 이용하여 객체 생성

자바스크립트는 함수를 통해 객체 생성 할 수 있습니다.

생성자 함수: 객체를 생성하는 함수

   

   

객체 호출 하기

객체 프로퍼티 접근 방법

대괄호 표기법으로 접근

[ ]

member['name']

접근하려는 프로퍼티 이름을 문자열 형태로 지정해야 합니다.

member[name]이라고 접근하면 'foo'가 아닌 undefined값이 출력됨

대괄호 안에 접근하려는 프로퍼티의 속성은 문자열 형태로 작성되어야 하지만 자바스크립트 엔진는 []연산자 내에 숫자가 사용될 경우, 해당 숫자를 자동으로 문자열 형태로 바꿔주어 정상적으로 결과를 출력해 줍니다.

마침표 표기법으로 접근

.

member.name

java, C++과 유사

   

생성된 객체에서 메서드 호출

member.eat()

   

   

   

속성 호출시 대괄호 연산자만 쓸 수 있는 경우

(1) 식별자로 사용할 수 없는 프로퍼티명을 사용하는 경우 

obj = {'foo-bar':5};

   

//obj.foo와 bar의 뺄셈이라고 해석되어 에러가 발생

obj.foo-bar;

   

//[] 연산자를 사용해 문자열 값으로 지정

obj['foo-bar'];

   

(2) 변수의 값을 프로퍼티명에 사용하는 경우

var key = 'x';

//프로퍼티 x (프로퍼티 key가 아님)

obj[key];

   

   

객체 관련 키워드

   

in

해당 키가 객체 안에 있는지 확인 

var output = '';

   

var student = {

이름 : '홍길동',

국어 : 92,

수학 : 98,

영어 : 96,

과학 : 98

};

   

output += "'이름' in student: " + ('이름' in student) + '\n';

output += "'성별' in student: " + ('성별' in student);

alert(output);

   

with

객체명을 등록하고 속성에 접근할 때 속성명만 호출할 수 있도록 처리 

var student = {

이름: '홍길동',

국어: 92,

수학: 98,

영어: 96,

과학: 98

};

   

var output = '';

 

//with에 객체를 전달하면 with 블럭내에서 속성명만으로 객체의 속성에 접근 가능

with (student) {

output += '이름: ' + 이름 + '\n';

output += '국어: ' + 국어 + '\n';

output += '수학: ' + 수학 + '\n';

output += '영어: ' + 영어 + '\n';

output += '과학: ' + 과학 + '\n';

output += '총점: ' + (국어 + 수학 + 영어 + 과학);

}

alert(output);

  

   

   

동적 객체 생성과 추가

처음 객체를 생성하는 시점 이후에 객체의 속성 및 메서드 추가하거나 제거

   

속성 추가 

//객체 생성

var student = {};

   

//객체에 속성 추가

student.이름 = '홍길동';

student.취미 = '악기';

student.특기 = '프로그래밍';

student.장래희망 = '프로그래머';

   

   

속성 갱신

//이미 취미라는 프로퍼티가 존재하므로 해당 값이 갱신됨

student.취미='댄스';

   

//프로퍼티가 존재하지 않으므로 나이라는 프로퍼티가 동적으로 생성된 다음, 33이라는 값이 할당됨

student.나이 = 33;

   

메서드 추가 

//객체 생성

var student = {};

   

student.greet = function(){

return 'Hello students!!';

};

   

속성 제거 

객체의 프로퍼티를 delete연산자를 이용해 즉시 제거할 수 있습니다.

delete연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못합니다.

delete(student.취미);

   

   

   

생성자 함수를 이용한 객체 생성

   

new 키워드를 사용해 객체 생성할 수 있는 함수 

function Student(name,korean,math,english,science){

this.이름 = name;

this.국어 = korean;

this.수학 = math;

this.영어 = english;

this.과학 = science;

//메서드 지정

this.getSum = function(){

return this.국어 + this.수학 + this.영어 + this.과학;

};

this.getAverage = function(){

return this.getSum() / 4;

};

this.toString = function(){

return this.이름 + ', ' + this.getSum() + ', ' + this.getAverage();

};

}

//생성자 함수를 이용한 객체 생성

var student = new Student('홍길동',100,99,98,97);

   

   

   

instanceof 연산자

- 생성자 함수를 통해 만들어진 객체가 인스턴스instance

- 해당 객체가 어떠한 생성자 함수를 통해 생성됐는지 확인할 때 사용 

function Student(name) { this.name = name; }

   

var student = new Student('홍길동'');

   

alert(student instanceof Student);

   

   

캡슐화

객체 내부에 데이터가 저장되는 영역을 지역변수화해서 객체 외부에서 직접 접근을 불허하고 메서드를 이용해 접근하도록 처리함 

// 생성자 함수를 선언

function Rectangle(w, h) {

   

var width = w; //지역변수

var height = h; //지역변수

 

this.getWidth = function () { return width; };

this.getHeight = function () { return height; };

this.setWidth = function (w) {

width = w;

};

this.setHeight = function (h) {

height = h;

};

}

   

   

상속

- 기존의 생성자 함수나 객체를 기반으로 새로운 생성자 함수나 객체를 쉽게 만드는 것

- 기존의 객체를 기반으로 생성

- 상속을 통해 새로 만들어지는 객체에는 기존 객체의 특성 존재

   

   

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

프로젝트 생성  (0) 2014.08.24
jQuery API 문서 2  (0) 2014.08.23
객체 (Object)  (0) 2014.08.19
전역객체, 전역변수, this바인딩  (0) 2014.08.17
메소드 호출시 this바인딩  (0) 2014.08.12
arguments 객체 이용  (0) 2014.08.08
Posted by codedragon codedragon

댓글을 달아 주세요

2014. 8. 18. 08:28

JAVA (자바) Development/Java

   

자바의 탄생

  • 1991년경 제임스 고슬링과 아서 밴 호프와 같은 Sun Microsystems의 연구진들은 가전제품에 탑재될 소프트웨어를 만들 목적으로 '오크(Oak)'라는 언어 개발
  • 인터넷 시대가 도래하면서 Oak를 인터넷에 적합하도록 그 개발 방향을 바꾸면서 이름을 자바(Java)로 변경
  • 1996년1월 자바의 정식 버전 발표

   

   

자바의 특징

  • 배우기 쉽다.
  • 플랫폼 독립성
  • 객체지향 프로그래밍
  • 가비지 컬렉션
  • 멀티스레드
  • 네크워크와 분산처리 지원

   

'Development > Java' 카테고리의 다른 글

자바 플랫폼(Java Platform)  (0) 2014.09.01
식별자  (0) 2014.08.25
JAVA (자바)  (0) 2014.08.18
자바 버전확인 경로  (0) 2014.08.10
Error-The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path  (0) 2014.07.22
JDK 이전 버전 설치하기  (0) 2014.05.20
Posted by codedragon codedragon

댓글을 달아 주세요

전역객체, 전역변수, this바인딩

   

전역변수는 전역객체(window)의 프로퍼티로 접근가능합니다.

자바스크립트에서 함수를 호출하면 this는 자동으로 전역객체에 바인딩됩니다.

   

   

소스 코드

<html>

<head>

<meta charset="UTF-8">

<title>전역객체, 전역변수, this바인딩</title>

<script type="text/javascript">

//전역 변수 선언

var name = "I'm Javascript";

//전역 변수 출력

document.write(name + '<br>');        

//전역객체(window) 프로퍼티 출력

document.write(window.name + '<br>');

   

// getName() 함수 정의

var getName = function () {

// getName()함수 호출 this 전역 객체에 바인딩됩니다.

document.write(this.name + '<br>');

};

//getName() 호출하여 this.name출력

//getName() 호출시 this 전역객체인 window객체에 자동으로 바인딩됩니다.

getName();

</script>

</head>

<body>

</body>

</html>

   

출처: <https://github.com/10zeroone/study_javascript/blob/master/WebContent/ch04-function/32.html>

   

   

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

jQuery API 문서 2  (0) 2014.08.23
객체 (Object)  (0) 2014.08.19
전역객체, 전역변수, this바인딩  (0) 2014.08.17
메소드 호출시 this바인딩  (0) 2014.08.12
arguments 객체 이용  (0) 2014.08.08
arguments 객체  (0) 2014.08.06
Posted by codedragon codedragon

댓글을 달아 주세요