前端中的this，指的是什么？

lsekfe

　1.this是什么
　　this 是 JavaScript 中的一个关键字。依赖于函数调用的上下文条件，与函数被调用的方式有关。它指向谁，完全是由函数被调用的调用点来决定的。
　　所以，this，是在运行时绑定的，与编写时的绑定无关。随着函数使用场合的不同，this 的值也会发生变化。但是有一个总的原则：那就是this 总会指向调用函数的那个对象。
　　ES6中箭头函数的不绑定this。在判断this的指向时，将其看作普通的方法即可。普通的方法中的this指的是包含它的函数的this。这样一来this的指向就清楚了。

　　2.call/apply
　　this的指向可以通过调用对象的改变而改变，也可以通过call/apply来改变。
　　调用方法为Function.call(obj,...args)/Function.apply(obj,args)。它是说用obj这个上下文去调用Function。他们的区别在于args的类型。

　　3.原生实现call和apply
　　最简单的call是如何调用的 func.call(obj)(obj可能为null)。
　　分析该代码：某个函数要调用这个方法call，证明原生实现的方法mycall应该是函数原型上的一个方法。
　　因此原生call的实现方法如下：

1. Function.prototype.myCall = function(context){
   
2.     if(typeof context === 'object'){
   
3.         context = context?context:window ;//在没有传入context的情况下，默认为window
   
4.     }else{
   
5.         context = Object.create(null);//传入的context类型不对，应该创建对象
   
6.     }
   
7.     let func = this;//谁调用mycall这个函数，谁就是this
   
8.                //就是执行func这个函数，用context这个对象去调用
   
9.     let fn = Symbol();//防止context对象以前有过fn这个属性
   
10.     context[fn] = func;//将func作为context这个对象的属性存储起来，去调用的时候this也就会指向context
    
11.     let args = [];
    
12.     for(let i=1;i<arguments.length;i++){   
    
13.         args.push(arguments[i]);
    
14.     }//如何接受调用时候的传参，还没有实现call,不能使用slice函数
    
15.     let result = context[fn](...args);//用context对象调用这个函数
    
16.     delete context[fn];//删除绑定在context上的属性
    
17.     return result;
    
18. }
    

复制代码

myApply的实现和myCall的实现类似，只是传输参数的方式不同而已。

1. Function.prototype.myApply = function(context){
   
2.     if(typeof context === 'object'){
   
3.         context = context?context:window ;//在没有传入context的情况下，默认应该是window
   
4.     }else{
   
5.         context = Object.create(null);//传入context类型不对时，创建对象
   
6.     }
   
7.     let func = this;//谁调用mycall这个函数，谁就是this
   
8.                    //执行func这个函数，只不过是用context这个对象去调用
   
9.     let fn = Symbol();//防止context对象以前有过fn这个属性
   
10.     context[fn] = func;//将func作为context这个对象的属性存储起来，去调用的时候this也就会指向context
    
11.     let args = arguments[1];//函数的输入参数是一个数组，包含了应该输入的参数
    
12.     let result = context[fn](...args);//用context对象调用这个函数
    
13.     delete context[fn];//删除绑定在context上的属性
    
14.     return result;
    
15. }

复制代码

4.bind是什么
　　调用方法为func.bind(obj,[...args]),它会返回一个函数，这个函数是将obj绑定到func的this上之后返回的函数。
　　bind的调用方式为： func.bind(obj),因此同样还是要在函数的原型上面写。
　　原生实现bind的方法为：

1. Function.prototype.myBind = function(context){
   
2.     let outArgs = Array.prototype.slice.mycall(arguments,1);//获取绑定时传入的参数
   
3.     let func = this;//记录应该执行的函数
   
4.     return function(){//bind函数返回一个参数
   
5.         let inArgs = Array.prototype.slice.mycall(arguments);
   
6.         let args = outArgs.concat(inArgs);//为了支持函数柯里化
   
7.         return func.myApply(context,args)
   
8.     }
   
9. }

复制代码

　5.结束语
　　this 总是指代了函数当前的运行环境，依赖于函数在调用时的上下文，只有在函数运行时才会进行绑定。想要判断this的指向，只需要记住：this 总会指向，调用函数的那个对象。