10분 선착순으로 댓글 달아주시면 드립니다.
'방명록' 카테고리의 다른 글
| 티스토리 초대장 드려요 (3차) (28) | 2018.02.14 |
|---|---|
| 티스토리 초대장 드려요(2차) (23) | 2017.12.28 |
| 티스토리 초대장 드려요 (18) | 2017.12.22 |
꼴통보안인
'분류 전체보기'에 해당되는 글 91건
- 2018.03.06 티스토리 초대장 드려요 (4차) 20
- 2018.02.14 티스토리 초대장 드려요 (3차) 28
- 2018.01.03 복제, 참조, 함수
- 2018.01.03 데이터 타입, 래퍼객체
- 2018.01.03 표준내장객체, Object 객체
- 2018.01.03 상속, prototype
- 2018.01.03 전역객체와 this
- 2018.01.03 생성자와 new
- 2018.01.03 함수의 호출
- 2018.01.03 arguments, 매개변수의 수
선착순으로 10장 뿌리겠습니다.
댓글 달아주세요.
'방명록' 카테고리의 다른 글
| 티스토리 초대장 드려요 (4차) (20) | 2018.03.06 |
|---|---|
| 티스토리 초대장 드려요(2차) (23) | 2017.12.28 |
| 티스토리 초대장 드려요 (18) | 2017.12.22 |
꼴통보안인
복제 : 파일을 복사하는 것과 같은 의미다.
예시
var a=1;
var b=a;
b=2;
cosole.log(a);
참조 : 심볼릭 링크 혹은 바로가기를 만드는 것과 비슷하다.
예시
var a={'id':1};
var b=a;
b.id=2;
console.log(a.id);
함수와 참조
예시
//
var a=1;
function func(b){
b=2;
}
func(a);
console.log(a);
//
var a={'id':1};
function func(b){
b={'id':2};
}
func(a);
console.log(a.id);
//
var a={'id':1};
function func(b){
b.id=2;
}
func(a);
console.log(a.id);
사진 참조 : 생활코딩
'Programming > Javascript' 카테고리의 다른 글
| 데이터 타입, 래퍼객체 (0) | 2018.01.03 |
|---|---|
| 표준내장객체, Object 객체 (0) | 2018.01.03 |
| 상속, prototype (0) | 2018.01.03 |
| 전역객체와 this (0) | 2018.01.03 |
| 생성자와 new (0) | 2018.01.03 |
꼴통보안인
데이터 타입 : 데이터의 형태를 의미하며, 객체와 객체가 아닌것으로 구분한다.
원시/기본 데이터 타입 : 객체가 아닌 데이터 타입이다.
- 숫자
- 문자열
- boolean(true/false)
- null
- undefined
래퍼객체 : 원시 데이터형을 객체처럼 다룰수 있도록 하기 위한 객체다.
- Number
- String
- Boolean
'Programming > Javascript' 카테고리의 다른 글
| 복제, 참조, 함수 (0) | 2018.01.03 |
|---|---|
| 표준내장객체, Object 객체 (0) | 2018.01.03 |
| 상속, prototype (0) | 2018.01.03 |
| 전역객체와 this (0) | 2018.01.03 |
| 생성자와 new (0) | 2018.01.03 |
꼴통보안인
표준 내장객체(Standard Built-in Object) : 자바스크립트가 기본적으로 가지고 있는 객체들이다. 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에 중요하다.
- Object
- Function
- Array
- String
- Boolean
- Number
- Math
- Date
- RegExp
예제
//
var arr = new Array('seoul','daejeon','daegu','pusan', 'gwangju');
function getRandomValueFromArray(arr){
var index = Math.floor(arr.length*Math.random());
return arr[index];
}
console.log(getRandomValueFromArray(arr));
//
Array.prototype.random = function(){
var index = Math.floor(this.length*Math.random());
return this[index];
}
var arr = new Array('seoul','daejeon','daegu','pusan', 'gwangju');
console.log(arr.random());
Object 객체 : 객체의 가장 기본적인 형태를 가지고 있는 객체다. 아무것도 상속받지 않는 순수한 객체이며. 값을 저장하는 기본적인 단위로 사용한다.
예시
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//Object.keys()
var arr=["a","b","c"];
console.log('Object.keys(arr)',Object.keys(arr));
//Object.prototype.toString()
var o = new Object();
console.log('o.toString()', o.toString());
var a = new Array(1,2,3);
console.log(a.toString()', a.toString());
</script>
</body>
</html>
//
Object.prototype.contain = function(neddle) {
for(var name in this){
if(this[name] === neddle){
return true;
}
}
return false;
}
var o = {'name':'egoing', 'city':'seoul'}
console.log(o.contain('egoing'));
var a = ['egoing','leezche','grapittie'];
console.log(a.contain('leezche'));
'Programming > Javascript' 카테고리의 다른 글
| 복제, 참조, 함수 (0) | 2018.01.03 |
|---|---|
| 데이터 타입, 래퍼객체 (0) | 2018.01.03 |
| 상속, prototype (0) | 2018.01.03 |
| 전역객체와 this (0) | 2018.01.03 |
| 생성자와 new (0) | 2018.01.03 |
꼴통보안인
상속 : 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해준다.
예시
//
function Person(name) {
this.name=name;
this.introduce=function (){
return 'My name is '+this.name;
}
}
var p1 = new Person('gildong');
document.write(p1.indroduce()+"<br />");
//
function Person(name) {
this.name=name;
}
Person.prototype.name=null;
Person.prototype.introduce=function (){
return 'My name is '+this.name;
}
var p1 = new Person('gildong');
document.write(p1.introduce()+"<br />");
//
function Person(name) {
this.name=name;
}
Person.prototype.name=null;
Person.prototype.introduce=function (){
return 'My name is '+this.name;
}
function Programmer(name){
this.name=name;
}
Programmer.prototype = new Person();
var p1=new Programmer('gildong');
document.write(p1.introduce()+"<br />");
//
function Person(name){
this.name = name;
}
Person.prototype.name=null;
Person.prototype.introduce = function(){
return 'My name is '+this.name;
}
function Programmer(name){
this.name = name;
}
Programmer.prototype = new Person();
Programmer.prototype.coding = function(){
return "hello world";
}
var p1 = new Programmer('egoing');
document.write(p1.introduce()+"<br />");
document.write(p1.coding()+"<br />");
prototype : 객체의 원형이다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. 객체와 객체를 연결하는 체인의 역할을 한다. 이러한 관계를 prototype chain이라 한다.
예제
//
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);
'Programming > Javascript' 카테고리의 다른 글
| 데이터 타입, 래퍼객체 (0) | 2018.01.03 |
|---|---|
| 표준내장객체, Object 객체 (0) | 2018.01.03 |
| 전역객체와 this (0) | 2018.01.03 |
| 생성자와 new (0) | 2018.01.03 |
| 함수의 호출 (0) | 2018.01.03 |
꼴통보안인
전역객체 : 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티다. 모든 전역함수와 변수는 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다.
예시
//
function func(){
alert('hello?');
}
func();
window.func();
//
var o = {'func':function (){
alert('hello?');
}}
o.func();
window.o.runc();
this : 함수 내에서 함수 호출 맥락을 의미한다. 함수와 객체의 관계를 연결시켜주는 실질적인 연결점 역할을 한다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에, this가 아니면 어떠한 작업도 할 수 없다. 함수의 메소드인 apply, call을 이용하면 this의 값을 제어 할 수 있다.
예시
//
function func(){
if(window === this){
document.write("window === this");
}
}
func();
//
var o = {
func : function (){
if(o === this){
document.write("o === this");
}
}
}
o.func();
//
var funcThis = null;
function Func(){
funcThis = this;
}
var o1 = Func();
if(funcThis === window){
document.write('window <br />');
}
var o2 = new Func();
if(funcThis === o2){
document.write('o2 <br />');
}
//
var o = {}
var p = {}
function func(){
switch(this){
case o:
document.write('o<br />');
break;
case p:
document.write('p<br />');
break;
case window:
document.write('window<br />');
break;
}
}
func();
func.apply(o);
func.apply(p);
'Programming > Javascript' 카테고리의 다른 글
| 표준내장객체, Object 객체 (0) | 2018.01.03 |
|---|---|
| 상속, prototype (0) | 2018.01.03 |
| 생성자와 new (0) | 2018.01.03 |
| 함수의 호출 (0) | 2018.01.03 |
| arguments, 매개변수의 수 (0) | 2018.01.03 |
꼴통보안인
생성자 : 객체를 만드는 역할을 하는 함수다. 객체의 구조를 재활용 할때 사용하는 것이다. 자바스크립트에서 함수는 객체를 만드는 창조자이다. 그리고 함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴한다. 생성자 함수는 일반 함수와 구분하기 위해서 첫글자를 대문자로 표시한다.
예시
//
function Person(){}
var p = new Person();
p.name = 'egoing';
p.introduce = function(){
return 'My name is '+this.name;
}
document.write(p.introduce());
//
function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
return 'My name is '+this.name;
}
document.write(p1.introduce()+"<br />");
var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
return 'My name is '+this.name;
}
document.write(p2.introduce());
//
function Person(name){
this.name = name;
this.introduce = function(){
return 'My name is '+this.name;
}
}
var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");
var p2 = new Person('leezche');
document.write(p2.introduce());
'Programming > Javascript' 카테고리의 다른 글
| 상속, prototype (0) | 2018.01.03 |
|---|---|
| 전역객체와 this (0) | 2018.01.03 |
| 함수의 호출 (0) | 2018.01.03 |
| arguments, 매개변수의 수 (0) | 2018.01.03 |
| 내부함수와 클로저 (0) | 2018.01.03 |
꼴통보안인
함수 호출
기본방법 예제
function func(){
}
func();
apply 예제
function sum(arg1, arg2){
return arg1+arg2;
}
alert(sum.apply(null,[1,2]));
sum은 Function 객체의 인스턴스다. 그렇기 때문에 객체 function의 메소드 apply를 호출할 수 있다. apply 메소드는 두개의 인자를 가질 수 있는데, 첫번째 인자는 함수가 실행될 맥락이다.
//
o1 = {val1:1, val2:2, val3:3}
o2 = {v1:10, v2:50, v3:100, v4:25}
function sum(){
var _sum = 0;
for(name in this){
_sum += this[name];
}
return _sum;
}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185
우선 두개의 객체를 만들었다. o1는 3개의 속성을 가지고 있다. 각각의 이름은 val1, val2, val3이다. o2는 4개의 속성을 가지고 있고 o1과는 다른 속성 이름을 가지고 있고 속성의 수도 다르다.
그 다음엔 함수 sum을 만들었다. 이 함수는 객체의 속성을 열거할 때 사용하는 for in 문을 이용해서 객체 자신(this)의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 저장한 후에 이를 리턴하고 있다.
객체 Function의 메소드 apply의 첫번째 인자는 함수가 실행될 맥락이다. 이렇게 생각하자. sum.apply(o1)은 함수 sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제한다.
//
function sum(){
var _sum = 0;
for(name in this){
if(typeof this[name] !== 'function')
_sum += this[name];
}
return _sum;
}
o1 = {val1:1, val2:2, val3:3, sum:sum}
o2 = {v1:10, v2:50, v3:100, v4:25, sum:sum}
alert(sum.apply(o1)) // 6
alert(sum.apply(o2)) // 185
'Programming > Javascript' 카테고리의 다른 글
| 전역객체와 this (0) | 2018.01.03 |
|---|---|
| 생성자와 new (0) | 2018.01.03 |
| arguments, 매개변수의 수 (0) | 2018.01.03 |
| 내부함수와 클로저 (0) | 2018.01.03 |
| 값으로써의 함수와 콜백, 그리고 비동기 처리 (0) | 2018.01.03 |
꼴통보안인
arguments : 함수에 있는 유사 배열이다.
예제
function sum(){
var i, _sum = 0;
for(i = 0; i < arguments.length; i++){
document.write(i+' : '+arguments[i]+'<br />');
_sum += arguments[i];
}
return _sum;
}
document.write('result : ' + sum(1,2,3,4));
함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수다. 그런데 1행처럼 함수 sum은 인자에 대한 정의하가 없다. 하지만 마지막 라인에서는 4개의 인자를 함수 sum으로 전달하고 있다. 함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달 할 수 있는 것은 왜 그럴까? 그것은 arguments라는 특수한 배열이 있기 때문이다.
arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다. arguments[0]은 함수로 전달된 첫번째 인자를 알아낼 수 있다. 또 arguments.length를 이용해서 함수로 전달된 인자의 개수를 알아낼 수도 있다. 이러한 특성에 반복문을 결합하면 함수로 전달된 인자의 값을 순차적으로 가져올 수 있다. 그 값을 더해서 리턴하면 인자로 전달된 값에 대한 총합을 구하는 함수를 만들 수 있다.
매개변수의 수 : 함수.length와 arguments.length 두가지 수가 존재한다. 함수.length는 함수로 전달된 실제 인자의 수를 의미하고, arguments.length는 함수에 정의된 인자의 수를 의미한다.
예제
function zero(){
console.log(
'zero.length', zero.length,
'arguments', arguments.length
);
}
function one(arg1){
console.log(
'one.length', one.length,
'arguments', arguments.length
);
}
function two(arg1, arg2){
console.log(
'two.length', two.length,
'arguments', arguments.length
);
}
zero(); // zero.length 0 arguments 0
one('val1', 'val2'); // one.length 1 arguments 2
two('val1'); // two.length 2 arguments 1
'Programming > Javascript' 카테고리의 다른 글
| 생성자와 new (0) | 2018.01.03 |
|---|---|
| 함수의 호출 (0) | 2018.01.03 |
| 내부함수와 클로저 (0) | 2018.01.03 |
| 값으로써의 함수와 콜백, 그리고 비동기 처리 (0) | 2018.01.03 |
| 유효범위 (0) | 2018.01.02 |
꼴통보안인