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);

来说明

你可能感兴趣的:(javascript深入理解系列——(八)this关键字)