arguments
arguments 객체 : 함수 호출 시, 전달인자들이 배열 형태로 저장된 객체이다.
함수 호출 시 전달인자와 함께 arguments 객체가 함수내부로 전달된다.
<script>
var self = function(){
console.log('a');
return function(){
console.log('b');
}
}
self = self();
self();
function func(arg1,arg2) {
console.log(arg1,arg2);
}
func();
func(1);
//함수의 인자보다 적게 함수를 호출했을 경우, 넘겨지지않은 인자에는 undefined 값이 할당된다
func(1,2);
func(1,2,3);
//반대로 정의된 인자 개수보다 많게 함수를 호출했을 경우에는 에러가 발생되지 않고, 초과된 인자는 무시된다.
//add 함수
function add(a,b){
//arguments 객체 출력
console.dir(arguments);
return a+b;
}
//arguments객체는 함수를 호출할때 넘긴 인자들이 배열형태로 지정된 객체들을 의미한다.
//실제 배열이 아닌 유사배열이기때문에 배열의 메소드는 쓸 수 없다
</script>arguments-callee 속성
-자바스크립트 재귀함수 등에 자주 쓰이는 arguments 객체의 callee속성
: 자바스크립트의 함수는 arguments 객체를 가지고 있으며,
현재 실행중인 함수 객체를 반환하는 데 함수 실행 시 넘어온 인자는 물론이고
callee()를 사용해서 재귀함수로써 반복도 가능하다.
<script>
var test = function(a,b,c){
return arguments[0] + arguments[1] + arguments[2];
}
console.log(test(1,2,3)); //6
</script>-자바스크립트의 함수는 전달받은 매개변수를 특정한 arguments에 담고 있는데,
만약 코드에서 함수에 전달된 매개변수에 접근할 경우 변수명을 사용해도 되지만
arguments를 사용할 수 있다.
<script>
//arguments객체를 사용하여 재귀함수를 만드는 예제
function test(num){
if( num == 0 ){
return num;
}else{
return num + arguments.callee(num-1);
}
}
console.log(test(2)); //3
console.log(test(10)); //55
</script>append
append(), appendTo()
선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가한다.
$(요소선택).append(새요소);
$(새요소).appendTo(요소선택);
html
<body>
<ul id="list_ul">
<li>html1</li>
<li>html2</li>
</ul>
<button id="append_btn" onclick="AppendBtn();">클릭시li추가</button>
<button id="remove_btn" onclick="RemoveBtn();">삭제해</button>
</body><script>
//요소 추가하기 javascript
function AppendBtn() {
var target = document.getElementById('list_ul');
var li = document.createElement('li');
var textNode = document.createTextNode('추가된 li입니다.');
li.appendChild(textNode);
li.style.color = 'red';
target.appendChild(li);
}
function RemoveBtn() {
var target = document.getElementById('list_ul');
var li = document.querySelector('li');
target.removeChild(li);
}
</script>
----> 브라우저
----> 클릭시 li 추가 눌렀을 시 추가된 li입니다. 가 추가되는 것을 볼 수 있다.
----> 삭제해 클릭시 html1 삭제됨
<script>
//제이쿼리에서 append사용
$(function(){
$('ul').append('<li>append</li>');
$('ul').prepend('<li>prepend</li>');
});
</script>apply
apply()메서드를 이용한 명시적인 this바인딩
apply() 메소드를 사용해서 Person()함수를 호출한다.
-첫번째 인자로 넘긴 foo가 Person()함수에서 this로 바인딩 되고, apply()메서드의
두번째 인자로 넘긴 배열 ['foo',30,'man']은 호출하려는 Person()함수의 인자 name,age,gender로 각각 전달되고, Person('foo',30,'man')함수를 호출하면서 this를 foo객체에 명시적으로 바인딩 된것이다.
<script>
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//빈객체 생성,리터럴 방식
var foo = {};
//apply 메서드 호출
Person.apply(foo,['foo',30,'man']);
console.dir(foo);
Person.call(foo,'foo',30,'man');
</script>-
call()메서드의 경우에는 apply()메서드와 기능은 같지만 apply() 두번째 인자에서
배열형태로 넘긴것을 각각 하나의 인자로 넘긴다 -
call(),apply()메서드는 this를 원하는 값으로 명시적으로 매핑해서 특정함수나 매서드를 호출 할 수 있다는 장점이 있다.
