今天去面试了，面试地点就在北京建外SOHO七号写字楼，以前没来过这个地方到了看见中国尊的时候也不知道是个啥，挺普通的一个高楼，而这里的SOHO相比于望京SOHO给我的感觉可能差点。尤其是电梯的设计，楼这么的高就两个小小的电梯，也不分高层和底层，所以做电梯的时候基本都是挤的状态，而且电梯停的时候也是比较浪费时间。进入之后每层的写字楼的空间也不是很大。反正我看是很小。
进去面试我的是一个大约 28 岁的小伙子吧，技术应该还可以，因为我在提 ES6 的 trim，去除掉字符串的首尾空格，讲成了去除全部空格，他给指出来了，这个东西是在地铁上临时复习到的。另一个就是关于 http 以及浏览器的缓存问题。这个原理我只是稍微懂一点，但是明显感觉他会。
面试的时候让我讲下 bind 的原理。这可尴尬了，面试的时候一般不喜欢动脑子，就喜欢快问快答不会就是不会，也不用浪费时间。本来面试就是为了考察求职者业务和基础能力。
好了，现在来看看如何实现 call、apply、bind 三个方法，它们的用法就不用了多讲了，直接看怎么实现：
一、上下文（this）
首先我们要搞清一个上下文的问题：
var obj = {
"name" : "Condor"
};
var name = "Hero";
function fun(){
console.log(this.name)
};
fun();
函数执行，this 指向 window，this.name 就是 window.name，控制台打印出 Hero。
现在变一下：
var name = "Hero";
var obj = {
"name" : "Condor",
fun(){
console.log(this.name)
}
};
obj.fun();
obj 对象属性有个函数，通过 obj.fun(); 来执行 this 指向 obj，此时的 this.name 就是 obj.name 打印结果为：Condor，记住这个用法下面立马用到。
二、自定义 call
先来看看 call 是怎么用的：
var name = "Hero";
var obj = {
"name" : "Condor"
};
function fun(){
console.log(this.name);//Condor
console.log(...arguments);//1 2 3
}
fun.call(obj,1,2,3);
要实现 call，分为两步：
- 改变 this 指向
- 处理传入的参数
先看看怎么改变 this 的指向问题。call 这个方法是属于函数的，所以我们要实现的类似功能方法的话，需要给在构造函数上的原型上绑定自定义方法，这个方法现在我们就叫它_call：
var name = "Hero";
var obj = {
"name" : "Condor"
};
//如果你看不懂Function构造函数里面的this请去复习ES5的原型链
Function.prototype._call = function(){
// ctx需要绑定的上下文，如果没有就去绑定window
ctx = arguments[0] || window;
//此处的this就是fun这个函数
//现在把这个函数，作为ctx(obj)这个对象的属性
//执行ctx.fn()，fun函数里面的this就变成了obj
ctx.fn = this;
return ctx.fn();
}
function fun(){
console.log(this.name);
console.log(...arguments);
}
fun._call(obj);
程序运行结果是：Condor。成功改变 this 的指向。再来看看怎么传参的问题：
var name = "Hero";
var obj = {
"name" : "Condor"
};
//如果你看不懂Function构造函数里面的this请去复习ES5的原型链
Function.prototype._call = function(){
// ctx需要绑定的上下文，如果没有就去绑定window
ctx = arguments[0] || window;
//此处的this就是fun这个函数
//现在把这个函数，作为ctx(obj)这个对象的属性
//执行ctx.fn()，fun函数里面的this就变成了obj
ctx.fn = this;
let argv = [];
//第一个参数是绑定上下文的所以从第二个开始拿参数
for(let i = 1;i < arguments.length;i++){
argv.push(arguments[i]);
}
//把参数argv传给fun
return ctx.fn(...argv);
}
function fun(){
console.log(this.name);
console.log(arguments);
}
fun._call(obj,1,2,3);
顺利解决传参的问题，call 的功能模仿完成。
小小的优化一下：改变 this 指向的时候，我们给 ctx ，指定属性是 fn，万一 obj 里面有这个东西不是把原来的给覆盖了吗。所以使用 ES6 的 Symbol，重名也不怕，使用完使用 delete 删掉。
let fn = Symbol();//新增
ctx[fn] = this;//改动
let result = ctx[fn](...argv);//改动
delete ctx[fn];//改动
return result;//改动
在仔细想想 ctx(obj) 是一个对象，它构造函数 Object 的实例，而方法一般都是绑定在 Object 的原型上的。所以方法绑定在原型上：
ctx.__proto__[fn] = this;
三、自定义 apply
call 和 apply 的在使用的时候，有个区别就是 apply 的参数必须是通过数组的形式，参数进去。类似这样 fun.apply(obj,[1,2,3]); 这个实现起来就比较简单了， 改变 this 指向和 call 同理，参数直接是个数组都省的我们去处理了。
var name = "Hero";
var obj = {
"name" : "Condor",
"fn" : 12
};
Function.prototype._apply = function(){
ctx = arguments[0] || window;
let fn = Symbol();
ctx.__proto__[fn] = this;
let argv = [];
if(arguments[1]){
argv = arguments[1];
}else{
argv = [];
}
let result = ctx[fn](...argv);
delete ctx[fn];
return result;
}
function fun(){
console.log(this.name);
console.log(...arguments);
}
fun._apply(obj,[1,2,3]);
四、自定义 bind
bind 和 call 差不多，有点不同的就是 bind 终生绑定不立即执行返回一个新函数，传参和 call 是一样的。
var name = "Hero";
var obj = {
"name" : "Condor",
"fn" : 12
};
Function.prototype._bind = function(){
ctx = arguments[0] || window;
let fn = Symbol();
ctx.__proto__[fn] = this;
let argv = [];
//第一个参数是绑定上下文的所以从第二个开始拿参数
for(let i = 1;i < arguments.length;i++){
argv.push(arguments[i]);
}
let result = function(){
return ctx[fn](...argv);
};
return result;
}
function fun(){
console.log(this.name);
console.log(...arguments);
}
let newfun = fun._bind(obj,1,2,3);
newfun();
newfun();
newfun();
思路和 call 是一样唯一的难点是函数不能立即执行，那我们就顺着思路返回一个匿名函数，当它执行的时候在去改变 this 指向和处理参数。
网友评论