关于JS 中 this的指向(学习)

this在定义函数的时候还未确定,在函数被调用的时候,那个调用的对象就是 this  

比如  按钮的点击触发了一个函数: 那this只带的就是这个button

例子1:

function a(){

    var user ="name";

    console.log(this.user);//undefined

    console.log(this);//Window}

window.a();   //写成a()也是一样的

this指向调用函数的对象,在这就是window对象调用的该函数,window省略也是一样的.

例子2:

var o = {

    user:"bunny",

    fn:function(){

        console.log("hello"+this.user);

 }}

o.fn();  //   hello bunny

这里使用this 就指的是对象o了,因为调用的是对象o的函数。

因为this 就指向对象o,进而访问到对象o的user属性。

例子3:

var o = {

    user:"bunny",

    fn:function(){

        console.log(this.user);  }

}

window.o.fn(); //bunny

这里的this为什么没指向window。window是js中的全局对象,我们创建变量其实是给window添加属性,所以这里可以用 window.o来表示对象。

var o = {

    a:10,

    b:{

        a:12,

        fn:function(){

            console.log(this.a);  }

    }

}

o.b.fn(); //12 

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

  情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是,在js的严格版中this指向的不是window。

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

        情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。

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

例子4:

var o = {

    a:10,

    b:{

        a:12,

        fn:function(){

            console.log(this.a);//undefined

            console.log(this);//window        }

    }

}

var j = o.b.fn;

j();

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

function Fn(){

this.user = "bunny";

}

var a = new Fn();

console.log(a.user); //bunny

        这里之所以对象a可以点出函数Fn里面的user,是因为new关键字可以改变this的指向,将这个this指向对象a,为什么a是对象?因为用了new关键字就是创建一个对象实例,理解这句话可以想想我们的例子3,这里用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份。

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

}vara =new fn; 

console.log(a); //fn {user: "追梦子"}

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

function fn()

    this.user = '追梦子'; 

    returnnull;

}vara =new fn; 

console.log(a.user); //追梦子

知识点:

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方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

  注意: 当你new一个空对象的时候,js内部的实现并不一定是用的apply方法来改变this指向的,这里我只是打个比方而已.

  if (this === 动态的\可改变的) return true;



参考文章:

https://www.cnblogs.com/pssp/p/5216085.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上...
    Mr__王阅读 747评论 0 3
  • 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上...
    web蜗牛阅读 593评论 1 4
  • 大家好,我是IT修真院成都分院第09期学员。今天分享的内容是js中this的用法? 1.背景介绍 JavaScri...
    我要夏天_11ec阅读 483评论 0 0
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,964评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,151评论 1 10