<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bind</title>
</head>
<body>
<button id="btn">click</button>
<script>
// bind 的基本使用
// var x = 10;
// function show(){
// console.log(this.x); // window
// }
// show(); // 10
// var Duyi = {
// x : 20
// }
// // function
// var newShow = show.bind(Duyi);
// newShow(); // 20
// 單對象編程
// var list = {
// init: function () {
// this.ms = 'duyi';
// this.dom = document.getElementById('btn');
// this.bindEvent();
// },
// bindEvent: function(){
// this.dom.onclick = this.show.bind(this,5,5); // this --> dom --> list
// // bind 構成一個新的函數 onclick就會往裏面傳入一個新的事件對象 而這個對象就會加入到實參列表的前面
// },
// show: function (x,y,e) { // 這裏多寫一個參數e 就會返回出這個隱式的onclick事件對象
// // alert(this.ms);
// console.log(this.ms,x,y,e); // duyi 5 5 MouseEvent
// }
// }
// list.init();
// 在單對象編程裏遇見綁定事件 改變this的指向到對象且不直接執行
// var x = 10;
// function show(a,b) {
// console.log(this.x,a,b); // window
// }
// show(5,3); // 10 5 3
// var Duyi = {
// x: 20
// }
// // function
// var newShow = show.bind(Duyi,3); // 改變this 順便還可以傳參數 這裏3相當於newShow(3,5) 會加到實參列表之前
// newShow(5); // 20 3 5
// console.log(new newShow().constructor) // show
// 總結
// 1. 函數A調用bind方法時，需要傳遞的參數o ,x ,y,z.....
// 2. 返回新的函數B
// 3. 函數B在執行的時候 具體的功能還是使用的是A 不過this的指向變爲了 o|| window
// 4. 函數B在執行的時候 傳遞的參數 會拼接到 x,y,z 後面，一併內部傳遞到A執行
// 5. new B() 構造函數依舊是A, 而且o不會起到任何作用
Function.prototype.newBind = function (target) {
var self = this;
var args = [].slice.call(arguments, 1); // 實參數組將最前一位切割掉
var temp = function () {};
var f = function () {
// var this = {};
var _args = [].slice.call(arguments)
return self.apply(this instanceof temp ? this : target || window, args.concat(
_args)); // 1. 啥都沒有傳那麼this指向還是window
// 2. 如果new了就說明 不用傳了你的原型鏈一定能找到temp 也就是self
}
temp.prototype = self.prototype;
f.prototype = new temp(); // new newShow().constructor == show
return f;
}
var x = 10;
function show(a, b) {
console.log(this.x, a, b); // window
}
show(); // 10
var Duyi = {
x: 20
}
// function
var newShow = show.newBind(Duyi, 1, 2); // 改變this 順便還可以傳參數 這裏3相當於newShow(3,5) 會加到實參列表之前
newShow(); // 20
console.log(new newShow().constructor) // show
</script>
</body>
</html>
JavaScriptDemo——Day 27（bind的基本使用和仿寫bind）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章