深入浅出了解 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); // KYLEidentify.call( person2); // READERsayHello.call( person1); // Hello, I'm KYLEsayHello.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); // KYLEidentify( person2); // READERsayHello( person1); // Hello, I'm KYLEsayHello( 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; //==>0point.y; //==>0x; //==>1y; //==>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就会被这个空的对象替代

阅读原文http://click.aliyun.com/m/34548/