반응형
method, this
바로 실습을 통해 확인하자
this.html
<html>
<head>
<meta charset="utf-8">
<script src="this.js"></script>
</head>
<body>
this
</body>
</html>this.js
function f(){
console.log(this);
console.log("f is called");
}
var o={name:"object", method:f};
f();
o.method();결과를 확인하면 다음과 같다.
처음 f함수를 그냥 호출한 경우 this 부분이 window라고 출력되게 되고
다음 변수 o의 method를 통해 호출한 경우에는 this 부분이 변수 o에 대한 정보가 출력되게 된다.
this.js
function setName(name){
this.name=name;
}
var o={name:"object", setName:setName};
var o2={name:"", setName:setName};
o.setName("object1");
o2.setName("object2");
console.log(o, o2);다음과 같이 바꾸어 결과를 확인하면
다음과 같이 나온다. 변수들의 이름을 지정해 주었지만 setName함수를 호출하면서 현재 자신의 name(this.name)이 파라미터의 name으로 바뀌게 되고 이를 출력하는 것을 볼 수 있다.
closure
함수, 함수가 선언될 때의 environment로 구성된다.
함수가 정의 될 때의 environment가 함께 closure로 결합되면서, 다양한 활용이 가능하다.
예시 코드
function makeCounterFunction(initVal){
var count = initVal;
function Increase(){
count++;
console.log(count);
}
return Increase;
}
var counter1 = makeCounterFunction(0);
var counter2 = makeCounterFunction(10);
counter1의 closure
함수 : function Increase(){}
환경 : var count = 0;
counter2의 closure
함수 : function Increase(){}
환경 : var count = 10;
반응형
'Computer Science > Javascript' 카테고리의 다른 글
| Javascript -10- scope, shadowing (0) | 2020.01.25 |
|---|---|
| Javascript -9- 반복문 (0) | 2020.01.25 |
| Javascript -8- 조건문 (0) | 2020.01.23 |
| Javascript -7- 배열, 주석 (0) | 2020.01.23 |
| Javascript -6- String (0) | 2020.01.23 |