Rev. 2.73

기존의 Function 클래스에 메서드를 두 개 추가하고 있습니다.prototype 프롭퍼티에의 추가이므로,인스턴스인 모든함수로 사용 가능해집니다.

bind 메서드
this는 자오브젝트, 즉Function 클래스의 인스턴스인 함수*1입니다.$A는 후술 하는 함수로,인수 하나를을Array 오브젝트로 변환합니다.arguments는 열거 가능합니다만 Array 오브젝트가 아닙니다. 기존 shift 메서드의 오버라이드(override)입니다.요소가 없는 경우의 동작을 개선하고 있습니다.

그 후, 무명 함수가 반환됩니다.제일 인수로 지정된 오브젝트의 프롭퍼티·메서드를 이용해 제2 인수 이후에 무명 함수 자체의 인수를 더해 이것을 인수로 해, 자오브젝트의 함수를 실행한다, 라는 것입니다.

메서드의 내부 함수로 this를 사용해도, 원의 오브젝트를 의미하지 않습니다.따라서 메서드로 변수__method에 this를 대입해, 그것을 내부 함수로 사용하고 있습니다.

반환된 함수가 반환원함수의 변수를 사용할 수 있는(내부 함수(크로쟈)의 스코프)

반환된 함수에서도, 원의 메서드의 변수를 사용할 수가 있습니다.메서드가 함수를 반환한 후도, 그 변수와 값은 보관 유지되고 있는 것 같습니다.(반환된 함수가 살아 있는 동안)

이하에 예를 나타냅니다.

function Test(){
  this.value = 1;
}
Test.prototype.method = function() {
  var obj = this; //obj에 this를 보관 유지
  var i = 0;
  return function(p) {
    alert("this.value:" + this.value);
    alert("obj.value:" + obj.value);
    i += p;
    alert("i:" + i);
  }
}
var test = new Test();

var func1 = test.method();
var func2 = test.method();

func1(11); //"this.value:undefined", "obj.value:1", "i:11" 와 표시
func2(55); //"this.value:undefined", "obj.value:1", "i:55" 와 표시
func1(22); //"this.value:undefined", "obj.value:1", "i:33" 와 표시
func1 = null; //해방된다

이 특성은 후술 하는 Enumerable 오브젝트로 자주(잘) 이용되고 있습니다.

이것을 「스코프」라고 하는 것보다는, JavaScript의 「스코프」가 이런 특성을 가진다, 라고 해야 하는 것입니까.「스코프」(변수 유효 범위)의 개념은 다른 언어 있고.그러고 보면, 다른 언어에도 이런 특성은 있는 것일까?(는, 경험 언어에 있으면(자) 레벨의 낮음을 드러내고 있네요^^;)

이벤트 핸들러에의 함수 바인드시에 편리
이 bind 메서드는, 이벤트 핸들러에 함수를 바인드 할 때에 잘 사용되고 있습니다.이벤트 핸들러에 함수를 바인드 하는 경우, 통상은 함수의 주소(라고 하는 표현으로 좋은 것인지?^^;)만의 지정으로, 인수를 지정할 수가 없습니다.

function init(msg){
  alert(msg);  //IE라면"undefined", NC등이라면 "object Event"라고 표시된다
}
window.onload = init; //init("hello!"); 와는 할 수 없다

이 경우, 인수 msg는,IE라면 미지정, NC등이면 이벤트 오브젝트가 됩니다.이것을 해결하기 위해(때문에) 이하의 방법이 잘 놓칩니다.

function init(msg){
  alert(msg);  //"hello!"라고 표시된다
}
function callInit(){
  init("hello!");
}
window.onload = callInit;

이것을 보다 범용화해, this를 사용할 수 있도록(듯이) 했던 것이 Function.prototype.bind 메서드라고 말할 수 있습니다.(고생의 구렁텅이 난폭한 설명^^;)

function Test(){
  this.value = 1;
}
Test.prototype.method = function(msg) {
  alert(msg); //"hello!"라고 표시된다
  alert(this.value); //"1"라고 표시된다
}
var test = new Test();
window.onload = test.method.bind(test, "hello!");

apply 함수에 대해
전술 「Class 오브젝트」로 쓴 것처럼,apply 함수에 대해 이하의 경우, 제일 인수는 그다지 의미를 가지지 않습니다.(한 번, 의미가 있는 것 같은 일을 써버렸습니다만, 실수입니다···)

obj.method.apply(obj, args);
//obj의 메서드(=obj.method)를 obj의 메서드로서(=제일 인수) 실행한다고 하는 의미.

위력을 발휘하는 것은, 어느 오브젝트의 메서드를, 다른 오브젝트의 메서드로서 실행하는 경우입니다.하지만, 그다지 그러한 장면은 없는 생각이 듭니다···.그런데도 apply가 prototype.js내에서 다용(7개소)되고 있는 것은, 제2 인수로, 인수의 인계속됨을 간단하게 할 수 있기 (위해)때문에라고 생각됩니다.

bindAsEventListener 메서드
구조는 전술 bind 메서드와 닮아 있습니다.

call()는인수 고정의 경우에 사용합니다. 계승오브젝트(object) 이외의 인수는 이벤트 오브젝트만입니다.이벤트 핸들러에의함수 바인드에 특화한 메서드가 됩니다.Netscape등에서는 무명 함수의 인수로부터,IE에서는 window.event에에 의해, 이벤트 오브젝트를 취득해 call()에 건네주고 있습니다*2.이것에 의해, 바인드 하는 함수에서는,브라우저의 차이를 신경쓰는 일 없이 인수의 이벤트 오브젝트를 사용할 수 있습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar