彻底理解JavaScript中this的指向

在网上,大部分文章都会出现下面这段话:

this的指向在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁,实际上this最终指向的是那个调用他的对象

这句话总是让人有哦一种琢磨不透的感觉。

为什么要理解this?如果已经学过了面向对象,那么就应该指导this的重要性!

1.我们来看一个例子:

function fun(){
    var userName = "lzh";
    console.log(this.userName); //undefined
    console.log(this); //Window
}
fun();


按照上面加粗的字体所说的 this最终指向的是那个调用他的对象。上述代码中的函数fun,实际上是属于window这个大对象下的一个方法,下shutdown代码便可证明:

function fun(){
    var userName = "lzh";
    console.log(this.userName); //undefined
    console.log(this); //Window
}
window.fun();

2.我们来看下面的例子2:
var obj = {
    userName:"lzh",
    fun:function(){
        console.log(this.userName);  //lzh
    }
}
obj.fun();

在这个例子里,this的指向是对象obj,调用的fun是通过obj.fun实现的,那么this的指向自然就是obj这个对象;

再次强调一下:this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,哪个对象调用,this就指向谁

3.我们来看第三个例子:

var obj = {
    userName:"lzh",
    fun:function(){
        console.log(this.userName);  //lzh
    }
}
window.obj.fun();


例2和例3两段代码,只有在调用时候的写法不一样;

但是,例3 里面的this为什么不指向window?

我们首先要知道window是js中的全局对象,我们创建的变量市级上就是给window这个大对象添加属性,

接着我们来看代码段4
var obj = {
    a:6,
    b:{
        a:12,
        fun:function(){
            console.log(this.a); //12
        }
    }
}
obj.b.fun();

代码4中的fun是由对象obj ”.“出来的,同样this并没有指向obj;所以本文最开始那一段黑体字说的难道有错误吗?

应该算是说的并不准确(我觉得说的很别扭,就当他不对)

来看下面三短话(百度了好多资料觉得这几句写的非常好):

1. 如果一个函数中有this,但是他没有被上一级的对象所调用,那么this的指向就是window
2. 如果一个函数中有this,这个函数有被上一级对象所调用,那么this的指向就是上衣及对象
3. 如果一个函数中有this,这个函数中包含了多个对象,尽管这个哈哈哈书是被最外层的对象所调用,this的指向也只是他上一级的对象

对于第三段话 我们来看下面这段代码:

var obj = {
    a:6,
    b:{
       
      // a:12, 对象b中的 a 已经被隐掉
fun: function (){ console.log( this.a); //undefined } }}obj.b.fun();

尽管对象b中没有属性a,但是这个this仅指向对象b,并不会向上一级寻找。

但是(万事万物都有但是,哈哈哈):

我们来看一个特殊的例子:

var obj = {
    a:6,
    b:{
        a:12,
        fun:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var fun1 = obj.b.fun;
fun1();


在这里 this的指向就变成了 window,奇怪吗?不奇怪!原因是因为:

this永远指向的是最后调用他的对象;这句话的意思就是说:看他执行的时候是谁调用的,上面的例子中,虽然函数fun是被对象b引用的,但是将fun赋值给变量fun1的时候并没有执行,而是有fun1执行的,所以this最终的指向是window,而例子3中是直接执行了fun;

   
















  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值