javascript_javascript 스킬에서 바인드 기능의 역할 소개
- WBOY원래의
- 2016-05-16 16:34:591182검색
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {background-color:#0f0;}
</style>
</head>
<body>
<button id="button"> 按钮 </button>
<input type="text">
<script>
var button = document.getElementById("button");
button.onclick = function() {
alert(this.id); // 弹出button
};
//可以看出上下文的this 为button
</script>
</body>
</html>
지금 바인딩에 참여하세요
코드 복사 코드는 다음과 같습니다.
var text = document.getElementById("text");
var 버튼 = document.getElementById("버튼");
버튼.온클릭 = function() {
Alert(this.id); //팝업버튼
}.bind(텍스트);
//컨텍스트에서 이것이 버튼임을 알 수 있습니다
이 시점에서 텍스트로 변경되는 것을 볼 수 있습니다
이것은 함수 리터럴에도 적용됩니다. 목적은 위쪽과 아래쪽을 가리키는(this)을 변경하지 않고 유지하는 것입니다.
var obj = {
color: "#ccc",
element: document.getElementById('text'),
events: function() {
document.getElementById("button").addEventListener("click", function(e) {
console.log(this);
this.element.style.color = this.color;
}.bind(this))
return this;
},
init: function() {
this.events();
}
};
obj.init();
버튼을 클릭하면 텍스트의 색상이 변경됩니다. 이것은 버튼이 아니라 obj임을 알 수 있습니다.
bind() 메서드는 IE, 6, 7, 8에서는 적용할 수 없습니다. 이 메서드는 Function 프로토타입을 확장하여 확장해야 합니다.
if (!Function.prototype.bind) {
Function.prototype.bind = function(obj) {
var slice = [].slice, args = slice.call(arguments, 1), self = this, nop = function() {
}, bound = function() {
return self.apply(this instanceof nop ? this : (obj || {}),
args.concat(slice.call(arguments)));
};
nop.prototype = self.prototype;
bound.prototype = new nop();
return bound;
};
}
이때 ie6, 7, 8에서도 바인딩()이 지원되는 것을 볼 수 있습니다.
코드 복사 코드는 다음과 같습니다.
슬라이스 = Array.prototype.slice,
또는
array = Array.prototype.slice.call( array, 0 );
유사 배열을 배열로 변환
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.