javascript深入理解系列——（八）this关键字

javascript深入理解系列文章网址
https://www.jianshu.com/p/451eed9094f5

this关键字在源码思想里面起着至关重要的作用，理解this能够让你更好的理解javascript
首先我们必须要记住this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有一点问题，后面我们会说明的）

接下来我们举一些基本例子和一些面试例子来帮助大家认识this指向

例子一：
首先我们必须了解一个常识

console.log(this);

如果我们只是这样写，this指向谁？答案是window，一定要牢记，这些会让你在以后看一些框架的源码的时候起很大的作用，比如看underscore源码的中

var root =this;
root._ = _;

为了避免全局污染，这些语句都在一个闭包当中，而this指向window，然后就可以把_挂载到全局作用域，外面就能访问到，注意使用技巧

例子二：

function person(){
        var name="ws";
        console.log(this.name);//输出undefined
        console.log(this);//输出window
    }
    person();

想要知道this指向谁，就看谁调用this所在的函数了，如何函数前面没有调用的对象，那么就是window调用的，而window并没有定义name属性，所以输出undefined

例子三：
如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

var person={
        name:"ws",
        a:{
            name:"ls",
            sout:function(){
                console.log(this.name);
            }
        }
    }
    person.a.sout();//ls

我们从此可以得出一个结论，主要看这个函数的属性在哪个对象里面，这个this就指向谁

例子四：
下面说一种特殊情况

var person={
        name:"ws",
        a:{
            name:"ls",
            sout:function(){
                console.log(this.name);
            }
        }
    }
    var d=person.a.sout;
    d();//输出undefined

我们再来记住一条准则那就是，this永远指向最后调用他们函数的对象，此时调用d()的是window，因为window没有定义那么属性，所以输出为undefined

例子五：

构造函数中的this指向

 function Person(name,age){
    this.name=name;
    this.age=age;
   }
   var xiaoming=new Person("xiaoming",12);
   console.log(xiaoming.name);

js是面向对象语言，上面的过程就是根据构造函数Person创建了实例对象xiaoming，那么Person构造函数中的this指向谁呢，答案是xiaoming这个实例对象，为什么会是这样呢，我们可以写一个简单的new源码

  function Person(name,age){
    this.name=name;
    this.age=age;
   }

function _new(){
    var args=[].slice.call(arguments);
    var construct=args.shift();
      //创建一个空对象，继承构造函数的原型
    var context=Object.create(construct.prototype);
       //并且更改构造函数中的this指向为context对象
    construct.apply(context,args);
        //返回context对象
    return context;
}
var xiaoming=_new(Person,"xiaoming",13);//实例对象等于context对象，所以this也就指向xiaoming
   console.log(xiaoming.age);

来说明

最后编辑于：2018.10.07 19:32:02