Daum 에 사용되고 있는 Jigu 라는 JavaScript 라이브러리 에는 문자를 치환하는 replaceAll 이라는 함수가 존재한다.

해당 함수는 정규 표현 식을 통한 치환 역시 지원하지만,

난 단순히 텍스트를 치환하는 코드를 통해 느낀 바가 커서 이곳에 기록해 두기로 마음 먹었다.

Code

function replaceAll(s, findstr, newstr) {
	 // .. 생략, 이곳에서 정규 표현식 처리 ..
	return s.split(findstr).join(newstr);
}

코드의 내용은 어렵지 않다, 단순히 찾고자 하는 단어를 기준으로 자른 배열을 만들고(split), 새로운 단어를 구분자로 사용하는 문자열을 만들라(join)는 코드이다

이 코드가 훌륭하다고 느끼는 이유는 split, join 모두 Native 함수라는 것. 그리고 그 연산으로 replaceAll을 만들어 낸 것이다.

The backspash character (\) has a special purpose in JavaScript string
...
Is the \' escape, which represents the single quote character.

예전에 읽었던 내용이였는데, 까먹었던 내용이다 겹따옴표(") 사이에 겹따옴표나 홑따옴표(') 사이에 홑따옴표는 백슬래시(\)와 함께 쓰면 된다는 것을.

"\"I\'m ok!?\""

근데, 더 충격적인 사실은, JavaScript 문자열과 JSON 문자열이 다르다는 사실이다.(자세한 내용은 여기서 보자.)

설명

사용 방법

AsyncTrigger 생성

var aTrigger = new AsyncTrigger();

감시할 Callback 함수 생성

var cbFunc1 = aTrigger.getCallback(function(response) {
  // 콜백 함수에서 해야 할 내용
});
var cbFunc2 = aTrigger.getCallback(function(xhrResponse) {
  // 콜백 함수에서 해야 할 내용
});

onComplete 함수(=이벤트) Override

aTrigger.onComplete = function() {
  // 모든 콜백이 호출된 다음 수행해야 할 작업.
}

첨부파일

AsyncTrigger_0.1.js

그리고..

foo; // 'undefined'
foo(); // this raises a TypeError
var foo = function() {};

Due to the fact that var is a declaration, that hoists(=올리다.) the variable name foo before the actual execution of the code starts, foo is already defined when the script gets executed.
JavaScript Garden

즉 다음과 같은 코드로 해석된다는 이야기.

var foo;
foo; // 'undefined'
foo(); // this raises a TypeError
foo = function() {};

 빈 객체가 생성되면, new 연산자는 해당 객체의 프로토타입을 설정한다. 이때 생성된 객체는 자신을 만들어낸 생성자의 prototype 값을 자신의 프로토타입으로 설정한다. 모든 함수에는 prototype이라는 프로퍼티가 있는데, 이것은 함수가 정의될 때 부터 자동으로 새성되고 초기화 된다. prototype 프로퍼티의 초기값은 프로퍼티가 하나 있는 개체로 지정된다. 이 프로퍼티는 constructor 라고 불리우는 데 프로토타입이 연관되어 있는 생성자 함수를 가르킨다.
자바스크립트 완변가이드, 202 페이지

> "Handsome Guy".replace("Guy","Sangpil")
'Handsome Sangpil'

> "Handsome Guy".replace(/Guy/, function(){return "Sangpil";});
'Handsome Sangpil'

function replacer(str, p1, p2, offset, s){
	return "!HERE!";
}
var newStr = "XXXXz XXXzz XXzzz Xzzzz".replace(/(X+)(z+)/g, replacer);
console.log(newStr); // !HERE! !HERE! !HERE! !HERE!

HTML의 A 태그에는 target이라는 속성이 존재한다. 그리고 그 Target은 해당 액션의 결과를 표시할 창을 가리키는 속성값이다.

최근에 알게 된 사실이지만 이 속성값에도 아래와 같이 _top, _self 등과 같이 이미 지정된 값이 존재했다.

<!--  HTML  -->
<a href="http://blog.sangpire.pe.kr" target="_top">

// JavaScript
top.location.href = "http://blog.sangpire.pe.kr";

<!--  HTML  -->
<a href="http://blog.sangpire.pe.kr" target="_self">

// JavaScript
self.location.href = "http://blog.sangpire.pe.kr";

<!--  HTML  -->
<a href="http://blog.sangpire.pe.kr" target="_parent">

// JavaScript
parent.location.href = "http://blog.sangpire.pe.kr";

<!--  HTML  -->
<a href="http://blog.sangpire.pe.kr" target="_blank">

<!--  HTML sub는 창 이름, 없을 경우 새창으로.  -->
<a href="http://blog.sangpire.pe.kr" target="sub">

기존에 내가 알고 있던 this 에 대한 이해 - 모든 메소드는 메소드를 실행하는 객체를 this로 가르킨다.

이건 오해였다.  그런가?..

실제로 동작하는건 다음과 같았다. 우선 alertName 이라는 함수를 생각해 보자.

alertName은 위와 같이 단순히 this의 name 속성을 화면에 띄워주는 역할을 한다.

위의 예제를 실행하며, "바보"가 출력될 것이다.

다음과 같이 버튼의 onclick 이벤트에 함수를 할당 해주면,

그리고 버튼을 클릭(Click) 하게 된다면, 무엇이 표시될까?

바로 "버툰" 이라는거..

그럼 다음의 경우는?

이 경우는 무엇이 출력될까?.. "신바보" 또는 "바보"?

정답은 "바보" 다. 함수를 호출 할 때, 함수 안에서 this는 그 함수를 소유하고 있는 객체를 가르키게 되는 것이다. 위의 경우 babo.alertName()은 alertName() 이 여전히 babo의 것이기 때문에 "바보"가 출력되는 것이다. 그럼 위의 onclick의 경우는 왜? "버툰"이 출력 되는 것일까?

이건, button1의 onclick 이벤트에 babo의 alertName 함수를 복사해 놓았기 때문이다. 이제 onclick은 babo의 alertName과 동일한 일을 하게 되는 것이고, onclick의 소유주는 button1 이기 때문에, button1의 이름인 "버툰"이 출력되는 것이다.

즉, 결론은 모든 메소드는 메소드의 주인(Owner)을 this로 가르킨다. 단 이때 메소드를 복사(주인 교체)한 경우와 메소드를 참조(주인 불변)인 경우를 주의하자!!!

보다 명쾌한 해설은 참고 링크를 읽어보자~~!!

결론

In Javascript 'this' always refers to the "owner" of the function we're executing. or rather(더 정확하게 말하자면), to the object that a function is a method of. - ppk

참고 자료

• http://www.quirksmode.org/js/this.html - 매우 이해하기 쉬운 정리

이 글은 스프링노트에서 작성되었다가 뭐가 마음에 안들어 HTML을 직접 수정 하였습니다.