为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript中this指向的深入解析

2018.07.29 16:02 1773浏览
普通函数的this指向

简单说说

首先,按照惯例,我们先举个栗子:

var bar = 2;
function foo() {
  this.bar = 1;
  this.getBar = function() {
    console.log(this.bar);
  }
}
var test = new foo();
var getBar = test.getBar;

test.getBar();  //1
getBar();       //2

通过这个例子我们就能看到,虽然是同一个函数,但是实际上得到的结果却不一样。这个原因相信大家都能知道。不知道的也告诉你:this其实是指向调用该函数的那个对象。那么当我们在全局环境中调用的时候,this自然就指向了全局环境。

那么到是有个问题:this为什么会随调用者变化而变化?

这可能需要你继续往下看看

深入说说

那么如果说深层次的理解this的指向,我觉得大概可以从数据类型讲起

我们都知道,栈中存放的是基本数据类型,也就是StringNumberBooleanSymbolNullUndefined这七种数据类型,当然Symbol是ES6新增的一个数据类型。那么堆中存放的就是一些引用类型了,如ObejctFunction。实际上当我们定义一个引用类型的时候,js会同时定义一个地址指针指向内存中的对象

例如:当我们声明一个字面量对象时候let a = {num:1};实际上a中存放的是指向{num:1}的地址

定义引用类型时

现在我们解析一下上面那段代码是如何执行的

// 在全局环境下定义一个变量bar
var bar = 2;

function foo() {
    //在foo中也声明了一个bar
    this.bar = 1;

    //在foo中声明一个getBar函数
    this.getBar = function() {
        console.log(this.bar);
    }
}

//构造函数模式自定义对象,将foo的this赋予test
var test = new foo();

//将test中的getBar方法赋予getBar
var getBar = test.getBar;

//调用test中的getBar
test.getBar();  //1

//调用getBar
getBar();       //2

现在列出来一看,放佛恍然大悟,终于知道为啥输出的是不同的结果了。那么我这里倒是有几个问题

  • 为什么调用同一个函数却有不同的结果?
  • foo中的this是指向foo的,为什么foo中的函数可以取得外部的this?
  • 为什么this会随调用它的对象变化而变化?

ok,其实要弄清楚上述问题,我们需要明白一点,函数也是个引用类型。那么我们上面讲过,创建引用类型的时候会同时创建一个地址指针。那么我们就可以这样理解上面的foo对象

this.png

*实际上foo中的getBar只是存放了一个函数的地址而已**。那么这个函数并不是foo所私有。什么东西是foo的呢?一个值为1的bar和一个指向function() {console.log(this.bar);}函数的getBar而已。

这样我们就不难理解,为什么调用同一个函数会有不一样的结果了,因为这个函数并不是foo所私有。好比内存就是深圳,函数就只是深圳的一套房。getBar就是这套房的钥匙。那么一开始foo这个人建好了这房子,就他有这房子的钥匙,那么当然只有他能进出该房子,后来有一天他把钥匙多配了一把给了window这好朋友。于是乎window也能进这套房了。给window配钥匙的过程:var getBar = test.getBar;这里只是将该函数的地址赋给全局下的getBar而已,房子也只是一套房子,函数还是一个函数。

由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

所以当window调用这个函数的时候,this就不是指向foo了。而是指向window。this是指向他们自己。window的衣服不会在进了foo的房子以后就变成foo的衣服。

ok,我们现在再把刚刚的代码重新注释一下

// 在全局环境下定义一个变量bar
var bar = 2;

function foo() {
    //在foo中也声明了一个bar
    this.bar = 1;

    //在foo中声明一个getBar函数,getBar存放该函数的地址
    this.getBar = function() {
        console.log(this.bar);
    }
}

//构造函数模式自定义对象,将foo的this赋予test
var test = new foo();

//将test中的getBar方法的地址赋予全局的getBar
var getBar = test.getBar;

//调用test中的getBar函数
test.getBar();  //1

//调用getBar函数
getBar();       //2

于是乎我们就把普通的this指向弄明白了。顺便还明白了堆栈的区别。接下来看看不普通的函数this指向是如何的

箭头函数this指向

箭头函数内没有this,箭头函数的this是父级函数的this

// 在全局环境下定义一个变量bar
var bar = 2;

function foo() {
    //在foo中也声明了一个bar
    this.bar = 1;

    //在foo中定义一个箭头函数,getBar存放该函数的地址
    this.getBar = () => {
        console.log(this.bar);
    }
}

//构造函数模式自定义对象,将foo的this赋予test
var test = new foo();

//将test中的getBar方法的地址赋予全局的getBar
var getBar = test.getBar;

//调用test中的getBar函数
test.getBar();  //1

//调用getBar函数
getBar();       //1

如果定义了箭头函数的情况下,this执行就不会随意的改变了。普通函数的this是会跟随调用者变化,但是箭头函数就很特别,他只会继承父级的this而且一旦建立就不会改变了。所以在这里我们就可以看见,尽管全局下面调用getBar,但是实际上还是取到了foo的this。

因此箭头函数不可以用来当作构造函数。因为它本身是没有this的!

所以箭头函数使用的话需要与普通函数区别开这点,它的this指向定义函数时候的父级。

后话

关于this就介绍到这里,如果有什么不懂的欢迎随时提问,我会随时回答大家的问题。

那么最后,成功不在一朝一夕,我们都需要努力

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

13人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消