深入了解this-1

0x00、从我对this的感想说起

JavaScript中的this机制是一个令人非常苦恼的机制，即使你在写JS代码中可以去尽量避免它，但是当去阅读一些源代码或者大牛的代码时候你却依旧绕不开它，而且作为一个很常用机制之一，this当然有他足够优雅的一面，那么何不去发现它奥秘的一面，并尽量驯服它了

0x01、为什么要运用this

先看一个函数的传入参数为一个对象的例子

• demo1：

function identify(context){
      return context.name.toUpperCase();
    } 
    var edg = {
      name:'qi'
    }
    identify(edg);         //QI,其中egd作为对象作为参数被传入函数中

在这个例子的基础上，我们来增加复杂点实现一个函数复合调用

• demo2：

function identify(context){
     return context.name.toUpperCase();
} 
function upIde(context){
    var a = 'hello' + identify(context);
    console.log(a);
    return a
}
var edg = {
     name:'qi'
}

  identify(edg);    //QI
  upIde(edg);      //'helloQI'，只有upIde()和identify()的形参需要保持一致性才可以得到了我们想要的结果

那么使用this可以如何去解决demo2中的效果了

• this-demo:

function identify(){
      return this.name.toUpperCase();
    } 
    function upIde(){
      var a = 'hello'+identify.call(edg);
      console.log(a);
    }
    var edg = {
      name:'qi'
    }
    identify.call(edg);    //QI
    upIde.call(edg);     //'helloQI'

上面的demo运用call()方法，将this指向edg对象，从而实现了和demo2中函数传对象作为参数一样的效果。

___总结: ___ 通过对比我们可以发现this提供了一种更优雅的方式来隐隐式“ 传递”一个对象引用，这样API的设计更简洁和易于复用；而且伴随你使用模式越来越复杂， 显式传递上下文对象（demo2中演示的）会让代码变得越来越混乱， 使用this则不会这样。