JavaScript基础知识：函数进阶(三)

JavaScript基础知识：函数进阶(一)
JavaScript基础知识：函数进阶(二)

一、函数绑定

1. 丢失 this

看个例子，如下，setTimeout 获得了函数user.sayHi，但是却丢失了上下文，并且setTimeout有些特殊，
它为函数调用设定了 == this = window==，所以 this.name ==> window.name，而全局变量中并没有 name 这个变量，所以是 undefined

let user = {
	name : 'John',
	sayHi(){
		alert(`Hello, ${this.name}`);  // Hello,
		alert(`Hello, ${user.name}`);  // Hello, John
	}
}
setTimeout(user.sayHi,1000);

那么，怎么将一个对象方法传递到别的地方，然后确保在正确的上下文中调用它呢？

有两种解决方法：

1）包装器：最简单的办法是用一个包装函数，用这个方法调整下上面的例子

let user = {
	name : 'John',
	sayHi(){
		alert(`Hello, ${this.name}`);  // Hello, John
	}
}
setTimeout(function(){
	user.sayHi();       // 成功显示名字：    Hello, John
},1000);

小问题setTimeout有1秒的延迟，若在这1秒中 **user **的值改变了的话，alert 的将是其它的结果了

2）使用 bind

语法：

let  boundFunc = func.bind(context);

继续上面的例子：

let user = {
	name : 'John',
	sayHi(){
		alert(`Hello, ${this.name}`);  // Hello, John
	}
}

let sayHi = user.sayHi.bind(user);
// 可以在没有对象的情况下使用 
sayHi();                               // Hello, John 
setTimeout(sayHi, 1000);               // Hello, John 

若对象中，有很多方法都需要传递出去的时候，我们可以：

for(let key in obj){
	if(typeOf obj[key] == 'Function'){
		obj[key] = obj[key].bind(obj);
	}
}

2. 偏函数（Partial functions）

除了可以绑定this，还可以绑定函数的 起始参数。
语法：

let bound = func.bind( context,  [args1], [args2],   ...   )

使用示例：
虽然例子中并未涉及 this 的使用， 但是 bind 需要，所以需要传入 null 之类的东西

function mul(a, b){
	return a*b;
}

let double = mul.bind(null,2);

alert(double(5));   //  10

二、箭头函数

JavaScript 的精髓在于创建一个函数并将其传递到某个地方。

在这种情况下，我们当然不想丢失上下文，此时就能用上箭头函数啦。

以上内容参考于 https://zh.javascript.info/bind， 在此学习记录！！！