深入浅出了解 JavaScript 中的 this

this是Javascript语言的一个关键字;它代表函数运行时自动生成的一个内部对象,只能在函数内部使用

首先必须要说的是,this的指向不是在函数定义时确定的,只有函数执行的时候才能确定,实际上this最终指向那个调用它的对象(网上大部分的文章都是这样说的,而且在很多情况下这样理解不会出问题,但实际上这样理解是不准确的)

为什么要了解this

肯定有人会问:既然this这么难以理解,那么为个甚还要用它呢?

function identify() {
  return this.name.toUpperCase();
}
function sayHello() {
  var greeting = "Hello, I'm " + identify.call(this);
  console.log( greeting );
}
var person1= {
  name: "Kyle"
};
var person2= {
  name: "Reader"
};
identify.call( person1); // KYLE
identify.call( person2); // READER
sayHello.call( person1); // Hello, I'm KYLE
sayHello.call( person2); // Hello, I'm READER

这段代码我们定义了两个函数:identify和sayHello,并且在不同的对象环境下执行它们达到了复用的效果,而不用针对不同的对象环境写对应的函数了;简言之,this给函数带来了复用;也肯定会有人说,我不用this一样可以实现

function identify(context) {
  return context.name.toUpperCase();
}
function sayHello(context) {
  var greeting = "Hello, I'm " + identify( context);
  console.log( greeting );
}
var person1= {
  name: "Kyle"
};
var person2= {
  name: "Reader"
};
identify( person1); // KYLE
identify( person2); // READER
sayHello( person1); // Hello, I'm KYLE
sayHello( person2); // Hello, I'm READER

显然这个解决方法也达到了类似的效果,但随着代码的增加/函数嵌套/各级调用等变得越来越复杂,传递一个对象的引用将变得越来越不明智,它会把你的代码弄得非常乱,甚至你自己都无法理解清楚;而this机制提供了一个更加优雅而灵便的方案,传递一个隐式的对象引用让代码变得更加简洁和复用

纯粹的函数调用

这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global

function a(){
    var user = "名称";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

按照我们上面说的this最终指向的是调用它的对象,这里的函数a实际是被Window对象点出来的,下面的代码就可以证明

function a(){
    var user = "名称";
    console.log(this.user); //undefined
    console.log(this);　　//Window
}
window.a();

结果证明:这两段代码是一致的,其实alert也是window的一个属性,也是window点出来的

var x = 1;
function test(){
  this.x = 0;
}
test();
alert(x); //0

作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this就指这个上级对象

var o = {
    user:"名称",
    fn:function(){
        console.log(this.user);  //名称
    }
}
o.fn();

这里的this指向的是对象o,因为你调用这个fn是通过o.fn()执行的;再次强调:this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁

其实上面的例子说的并不够准确,下面这个例子就可以推翻上面的理论

var o = {
    user:"名称",
    fn:function(){
        console.log(this.user);  //名称
    }
}
window.o.fn();

这段代码和上面的那段几乎是一样的,但这里的this为什么不指向window;如果按照上面的理论:this指向的是调用它的对象;window是js的全局对象,我们创建的变量实际上是给window添加属性,所以可以用window.o对象

这里先不解释上面的代码this为什么没有指向window,我们再来看一段代码

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

这里也是对象o点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的不就都是错误的吗?其实只是一开始说的不准确,接下来补充一句话,相信你就可以彻底的理解this的指向的问题

情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是:在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,想了解可以自行上网查找

情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象

情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,如果不相信,那么接下来我们继续看几个例子

var o = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西

还有一种比较特殊的情况:

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j(); //这里将o.b.fn方法赋给j变量,此时j变量相当于window对象的一个属性,因此j()执行的时候相当于window.j(),即window对象调用j这个方法,所以this关键字指向window

这里this指向的是window,是不是有些蒙了?其实是因为你没有理解一句话,这句话同样至关重要

this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,上例中虽然函数fn是被对象b所引用,但在将fn赋值给变量j的时候并没有执行所以最终指向的是window

再换种形式：

var personA={
    name:"xl",
    showName:function(){
        console.log(this.name); //输出 XL
    }
}
var personB={
    name:"XL",
    sayName:personA.showName
}    
personB.sayName(); //虽然showName方法是在personA这个对象中定义,但是调用的时候却是在personB这个对象中调用,因此this对象指向personB

对于内部函数,即声明在另外一个函数体内的函数,这种绑定到全局对象的方式会产生另外一个问题

var point = { 
x : 0, 
y : 0, 
moveTo : function(x, y) { 
    var moveX = function(x) { 
    this.x = x; //this绑定到了哪里？
   }; 
   var moveY = function(y) { 
   this.y = y;//this 绑定到了哪里？
   };  
   moveX(x); 
   moveY(y); 
   } 
}; 
point.moveTo(1, 1); 
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1

在这个例子中打印this,会发现他是绑定到window的,所以改变了x和y的值而不是对象中的point.x和point.y的值;这属于JavaScript的设计缺陷,正确的设计方式是内部函数的this应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,聪明的JavaScript程序员想出了变量替代的方法

var point = { 
x : 0, 
y : 0, 
moveTo : function(x, y) { 
     var that = this; 
    var moveX = function(x) { 
    that.x = x; 
    }; 
    var moveY = function(y) { 
    that.y = y; 
    } 
    moveX(x); 
    moveY(y); 
    } 
}; 
point.moveTo(1, 1); 
point.x; //==>1 
point.y; //==>1

作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object),this就指这个新对象

function Fn(){
    this.user = "名称";
}
var a = new Fn();
console.log(a.user); //名称

之所以对象a可以点出函数Fn里的user是因为new关键字可以改变this的指向,将这个this指向对象a;为什么说a是对象,因为new就是创建一个对象实例,即这里用变量a创建了一个Fn实例(相当于复制一份Fn到对象a里面),此时只是创建并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a

为了表明这时this不是全局对象,我对代码做一些改变

var x = 2;
function test(){
  this.x = 1;
}
var o = new test();
console.log(x); //2

运行结果为2,表明全局变量x的值根本没变

除上面这些外,还可以通过JS中call,apply,bind方法自行改变this的指向

new操作符

下面这段代码模拟了new操作符(实例化对象)的内部过程

function person(name){
    var o={};
    o.__proto__=Person.prototype;  //原型继承
    Person.call(o,name);
    return o;
}
var personB=person("xl");
console.log(personB.name);  // 输出  xl 

首先在person里创建一个空对象o,将o的proto指向Person.prototype完成对原型的属性和方法的继承

Person.call(o,name)即函数Person作为apply/call调用,将Person对象里的this改为o,即完成了o.name=name操作

返回对象o

因此person("xl")返回了一个继承了Person.prototype对象上的属性和方法,以及拥有name属性为"xl"的对象,并将它赋给变量personB,所以console.log(personB.name)会输出"xl"

使用apply或call调用

再一次重申,在JavaScript中函数也是对象,对象则有方法,apply和call就是函数对象的方法,他们允许切换函数执行的上下文环境(context),即this绑定的对象;很多JavaScript中的技巧以及类库都用到了该方法;它们的第一个参数为改变后调用这个函数的对象;因此this指的就是这第一个参数

var x = 0;
function test(){
  console.log(this.x); //0
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //apply()的参数为空时默认调用全局对象,这时的运行结果为0,证明this指的是全局对象;如果把最后一行代码修改为
o.m.apply(o); //1

当this碰到return

function fn(){  
  this.user = '名称';  
  return {};  
}
var a = new fn;  
console.log(a.user); //undefined

再看一个

function fn(){  
  this.user = '名称';  
  return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

再来

function fn(){  
  this.user = '名称';  
  return 1;
}
var a = new fn;  
console.log(a.user); //名称

function fn(){  
  this.user = '名称';  
  return undefined;
}
var a = new fn;  
console.log(a.user); //名称

什么意思呢?如果返回值是一个对象,this指向的就是那个返回的对象;如果返回值不是一个对象,那么this还是指向函数的实例

function fn(){  
  this.user = '名称';  
  return undefined;
}
var a = new fn;  
console.log(a); //fn {user: "名称"}

还有一点就是虽然null也是对象,但在这里this还是指向那个函数的实例,因为null比较特殊

function fn(){  
  this.user = '名称';  
  return null;
}
var a = new fn;  
console.log(a.user); //名称

Function.prototype.bind()方法

.apply()和.call()都立即执行了函数,而.bind()函数返回了一个新方法,绑定了预先指定好的this,并可以延后调用;.bind()方法的作用是创建一个新的函数,执行时上下文环境为.bind()传递的第一个参数,它允许创建预先设置好this的函数

var name="XL";
function Person(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name); //my name is XL
        },50)
    }
}
var person=new Person("xl");
person.sayName()

这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象调用,因此this的指向为window, this.name则为XL;那么如何才能输出"my name is xl"呢?

var name="XL";
function Person(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name); //my name is xl
        }.bind(this),50)  //注意这个地方使用的bind()方法,绑定setTimeout里面的匿名函数的this一直指向Person对象
    }
}
var person=new Person("xl");
person.sayName(); 

这里setTimeout(function(){console.log(this.name)}.bind(this),50);匿名函数使用bind(this)方法后创建了新的函数,这个新的函数不管在什么地方执行this都指向Person而非window,因此最后的输出为"my name is xl"而不是"my name is XL"

使用.bind()时应该注意:.bind()创建了一个永恒的上下文链并且不可修改;一个绑定函数即使使用.call()或.apply()传入其他不同的上下文环境也不会更改它之前连接的上下文环境,重新绑定也不会起任何作用;只有在构造器调用时,绑定函数可以改变上下文,然而这并不是推荐的做法

tips

超时调用的代码都是在全局作用域中执行的,因此函数中的this的值,在非严格模式下是指向window对象,在严格模式下是指向undefined;因此setTimeout/setInterval/匿名函数执行的时候this默认指向window对象,除非手动改变this的指向

var name="XL";
function Person(){
    this.name="xl";
    this.showName=function(){
        console.log(this.name); //XL
    }
    setTimeout(this.showName,50); //在setTimeout(this.showName,50)语句中，会延时执行this.showName方法
}
var person=new Person(); 

this.showName方法即构造函数Person()里面定义的方法;50ms后执行this.showName方法,this.showName里面的this此时便指向了window对象,则会输出"XL";修改上面的代码:

var name="XL";
function Person(){
    this.name="xl";
    var that=this;
    this.showName=function(){
        console.log(that.name); //xl
    }
    setTimeout(this.showName,50)
}
var person=new Person(); 

这里在Person函数当中将this赋值给that,即让that保存Person对象,因此在setTimeout(this.showName,50)执行过程当中console.log(that.name)即会输出Person对象的属性"xl"

下面来看个匿名函数:

var name="XL";
var person={
    name:"xl",
    showName:function(){
        console.log(this.name);
    }
    sayName:function(){
        (function(callback){
            callback();
        })(this.showName)
    }
}
person.sayName();  //输出 XL 

更改后:

var name="XL";
var person={
    name:"xl",
    showName:function(){
        console.log(this.name); //xl
    }
    sayName:function(){
        var that=this;
        (function(callback){
            callback();
        })(that.showName)
    }
}
person.sayName();  //匿名函数的执行同样在默认情况下this是指向window的，除非手动改变this的绑定对象 

Eval函数

该函数执行的时候，this绑定到当前作用域的对象上

var name="XL";
var person={
    name:"xl",
    showName:function(){
        eval("console.log(this.name)");
    }
}
person.showName();  //输出  "xl"
var a=person.showName;
a();  //输出  "XL"

箭头函数

es6里面this指向固定化,始终指向外部对象,因为箭头函数没有this,因此它自身不能进行new实例化,同时也不能使用call/apply/bind等方法来改变this的指向;箭头函数一次绑定上下文后便不可更改,即使使用了上下文更改的方法:

function Timer() {
    this.seconds = 0;
    setInterval(() => this.seconds ++, 1000);
} 
var timer = new Timer();
setTimeout(() => console.log(timer.seconds), 3100); // 3  

在构造函数内部的setInterval()内的回调函数,this始终指向实例化的对象并获取实例化对象的seconds的属性,每1s这个属性的值都会增加1否则最后在3s后执行setTimeOut()函数执行后输出的是0

知识点补充

1.在严格版中的默认的this不是window而是undefined

2.new操作符会改变函数this的指向问题,虽然我们上面了解过了,但是并没有深入的讨论这个问题,网上也很少说,所以在这里有必要说一下

function fn(){
    this.num = 1;
}
var a = new fn();
console.log(a.num); //1

什么this会指向a?首先new关键字会创建一个空的对象,然后会自动调用一个函数apply方法(new一个空对象的时候js内部并不一定是用apply方法来改变this指向的,这里我只是打个比方而已)将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代

感悟：谦虚，谨慎是每个人都应该具备的