Prototype.bind
阿新 • • 發佈：2019-01-08
一、控制給一個給定函式的作用域
1.1 使用bind()方法
<script> window.onload = function () { window.name = "window"; var data = { name: "testObject", sayOne: function () { console.log("1111" + this.name); sayTwo = function (type) { console.log(type + " " + this.name); };//.bind(this); sayTwo("2222"); } }; data.sayOne("****"); }; </script>
<script> window.onload = function () { window.name = "window"; var data = { name: "testObject", sayOne: function () { console.log("1111" + this.name); sayTwo = function (type) { console.log(type + " " + this.name); }.bind(this); sayTwo("2222"); } }; data.sayOne("****"); }; </script>
this關鍵字表示函式的所有者或作用域。
在該解決方案中，字面值物件的一個方法sayOne()，其中包含一個巢狀的sayTwo()函式。
沒有使用bind()方法，打印出的訊息大相徑庭，原因在於，巢狀的函式與包圍的物件的內部函式分離開了，並且無作用域的函式自動變成視窗物件的屬性。bind()方法所做的就是，使用apply()方法把函式繫結到傳遞給物件的物件。使用bind()方法可將其繫結到父物件。
1.2 bind()與定時器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="item"> 20 </div> <script> var theCounter = new Counter('item', 20, 0); theCounter.countDown(); function Counter(id, start, finish) { this.str = this.start = start; this.finish = finish; this.id = id; this.countDown = function () { if (this.str == this.finish) { this.countDown = null; return; } document.getElementById(this.id).innerHTML = this.str--; setTimeout(this.countDown.bind(this), 1000); }; } </script> </body> </html>
1.3 self與this
使用bind()的替代方法，就是將this賦值給外部函式中的一個變數，該變數隨後在尾部可供使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="item">
20
</div>
<script>
var theCounter = new Counter('item', 20, 0);
theCounter.countDown();
function Counter(id, start, finish) {
var self = this;
this.str = this.start = start;
this.finish = finish;
this.id = id;
this.countDown = function () {
if (this.str == this.finish) {
this.countDown = null;
return;
}
document.getElementById(this.id).innerHTML = this.str--;
setTimeout(this.countDown.bind(self), 1000);
//setTimeout(this.countDown, 1000);//若沒有bind()，當定時器內部呼叫該方法的時候，物件作用域和計數器已經丟失了
};
}
</script>
</body>
</html>