javascript_javascript 기술 아래의 동적 this 및 동적 바인딩 예제 코드

그런 다음 함수는 두 부분으로 나누어 객체에 저장됩니다. 하나는 함수 이름(키)이고 다른 하나는 함수 본문(값)입니다. 그러면 함수에서 이 부분은 일반적으로 함수가 있는 객체를 가리킵니다. 위치하고 있습니다. 그러나 이것은 단지 일반적인 경우입니다. 전역적으로 함수를 호출할 때 호출자가 표시되지 않거나 현재 창입니다. 그러나 함수가 선언된 후에는 실제로 어떤 개체에도 바인딩되지 않으므로 호출 적용 메서드를 사용하여 호출자를 설정할 수 있습니다.

간단한 예:
[script]
<script> <br>window.name = "window"; <br>var run = function() { <br>alert( " 내 이름은 " this.name); <br>} <br>run(); <br></script>
[/html]
여기서는 run이 window의 속성이라고 말할 수 없습니다. 이지만 실제로는 window 속성에 의해 호출됩니다. 실제로 상단에 노출된 것의 대부분은 창에 의해 차지됩니다. 호출해야 할 경우 window 개체에 복사되므로(단, IE에서는 window가 개체를 상속하지 않음) window['xxx']와 window.xxx 간에 성능 차이가 있습니다. 이는 내부 구현이므로 더 자세히 다루지는 않겠습니다.
또 다른 예, 명시적 객체에 바인딩

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

대답은 분명히 보기 쉽습니다. 이는 항상 호출자를 위한 것입니다. 하지만 좀 더 복잡하다면 어떨까요?

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

하지만 내부적으로는 run 함수 내부에 정의되어 있지만 팝업되는 것은 object 속성도 run 속성도 아니기 때문에 object도 run도 아닙니다. 실행 범위 내에서 느슨하게 사용되며 처음 두 개에서는 호출할 수 없으므로 창에서만 저장할 수 있습니다. 창과 같은 기본 개체는 모든 스크립트 내부에 스며들어 기여해야 하는 모든 곳에 적용됩니다. 하지만 일반적으로 도움이 필요한 것은 아니므로 호출과 적용이라는 두 가지 강력한 도구를 개발해야 합니다.

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

호출과 적용의 차이점은 첫 번째 매개변수 이후 매개변수의 형식, 호출은 하나씩, 적용은 모두 배열에 배치된다는 점입니다. 매개변수가 명확하지 않은 경우 인수와 배열을 사용하여 쉽게 처리할 수 있습니다. .일부분.

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

] 이것은 매우 유명한 기능이 나왔습니다. 다음은 가장 간단한 버전입니다.

코드를 복사하세요

코드는 다음과 같습니다.


var bin = function(context, fn) {
return function() {

return fn.apply(context, Arguments)
}

}

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 하지만 더 복잡한 문제를 해결하려면 다음 버전을 사용하는 것이 좋습니다.

<script> window.name = "window"; object = { name: "object", run: function() { alert("My name is " + this.name); } }; object.run(); </script>코드 복사<script> window.name = "window"; object = { name: "object", run: function() { var inner = function(){ alert("My name is " + this.name); } inner(); } }; object.run(); </script><script> window.name = "window"; var object = { name: "object", run: function() { inner = function() { alert( this.name); } inner.call(this); } } object.run(); </script><script> window.name = "Window"; var cat = { name: "Cat" }; var dog = { name: "Dog", sound: function(word) { alert(this.name + word); } }; dog.sound(" is pooping"); dog.sound.call(window, " is banking"); dog.sound.call(dog, " is banking"); dog.sound.apply(cat, [" miaowing"]); </script> 코드는 다음과 같습니다.<script> window.name = "Window"; var cat = { name: "Cat" }; var dog = { name: "Dog", sound: function(word) { alert(this.name + word); } }; var bind = function(context, fn) { return function() { return fn.apply(context, arguments); } } var sound2 = bind(window,dog.sound); sound2(" is banking"); var sound3 = bind(cat,dog.sound); sound3(" miaowing") </script>

function bind(context,fn) {
var args = Array.prototype.slice.call(arguments, 2);
return args.length == 0 ? function() {
return fn.apply(context, arguments);
} : function() {
return fn.apply(context, args.concat.apply(args, arguments));
};
};

它还有一个孪生兄弟叫bindAsEventListener ，绑定事件对象，没什么好说的。

复制代码 代码如下:

var bindAsEventListener = function(context, fn) {
return function(e) {
return fn.call(context, (e|| window.event));
}
}

Prototype的版本

复制代码 代码如下:

Function.prototype.bind = function() {
if (arguments.length < 2 && (typeof arguments[0]==='undefined'))
return this;
var _slice = Array.prototype.slice
var __method = this, args = _slice.call(arguments,0), context = args.shift();
return function() {
return __method.apply(context, args.concat(_slice.call(arguments,0)));
}
}

<script> Function.prototype.bind = function() { if (arguments.length < 2 && (typeof arguments[0]==='undefined')) return this; var _slice = Array.prototype.slice var __method = this, args = _slice.call(arguments,0), context = args.shift(); return function() { return __method.apply(context, args.concat(_slice.call(arguments,0))); } } var sound2 = dog.sound.bind(window); sound2(" is banking"); var sound3 = dog.sound.bind(cat); sound3(" miaowing") </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

bind函数是如此有用，google早早已把它加入到Function的原型中了（此外还有inherits，mixin与partial）。

复制代码 代码如下:

//在chrome中
var a = function(){};
alert(a.bind)

有绑定就有反绑定，或者叫剥离更好！例如原生对象的泛化方法我们是无法通过遍历取出它们的。

<script> for(var i in Array){ alert(i + " : "+ Array[i]) } for(var i in Array.prototype){ alert(i + " : "+ Array.prototype[i]) } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

要取出它们就需要这个东西：

复制代码 代码如下:

var _slice = Array.prototype.slice;
function unbind(fn) {//第一步取得泛化方法
return function(context) {//第二部用对应原生对象去重新调用！
return fn.apply(context, _slice.call(arguments, 1));
};
};

이전에 예시가 주어졌으니 기사를 참조하세요.
요약:
이 값은 함수가 호출되는 방식에 따라 달라지며, 총 4가지 유형이 있습니다.
만약 함수는 객체의 속성입니다. 함수가 호출되면 this의 값은 이 객체입니다. 함수가 호출하는 표현식에 마침표(.) 또는 []가 포함된 경우 this의 값은 마침표(.) 또는 [] 앞의 개체입니다. 예를 들어 myObj.func 및 myObj["func"]에서 func가 호출되면 이는 myObj입니다.
함수가 객체의 속성이 아닌 경우 함수가 호출될 때 this의 값은 전역 객체입니다. 함수에 내부 함수가 포함되어 있을 때, 정확한 의미를 이해하지 못하면 오류가 발생하기 쉽습니다. 이는 내부 함수의 this 값이 외부 함수의 this 값과 다르기 때문입니다. 해결책은 외부 함수의 this 값을 변수에 저장하고 이를 내부 함수에서 사용하여 변수를 찾는 것입니다.
함수 앞에 new를 사용하면 새 객체가 생성되고 함수도 호출되며 이 값이 새로 생성된 객체가 됩니다. 예를 들어 User(name) {this.name = name}; var user1 = new User("Alex");에서 new User("Alex")를 호출하면 user1이 참조하는 새 개체가 생성됩니다. User 이 함수도 호출되어 값이 Alex인 user1 개체에 name이라는 속성을 설정합니다.
함수 호출 시 이 값을 지정하기 위해 함수의 적용 및 호출 메서드를 사용할 수 있습니다. Apply 및 Call의 첫 번째 매개변수는 지정할 값입니다. 그 존재 덕분에 우리는 온갖 종류의 유용한 기능을 만들 수 있습니다.