Js中的this指向一篇搞定

简述

this就是指针，指向调用函数的对象，这个对象我们称为函数执行的上下文对象。

全局上下文(就是全局作用域) this指的是全局对象 window，

函数上下文（就是局部作用域）this指的是当前函数所属的对象。

其实总结就一句话：就是谁调用就指向谁。

调用方式

• 全局环境中this指向全局变量(window)
• 函数中的this，由调用函数的方式来决定

1、如果函数是独立调用的，在严格模式下（use strict）指向undefined；

2、如果这个函数是被某一个对象调用，那么this指向被调用的对象。

实例

全局作用域

var name="全局";

function a(){
var name="函数内部";
  console.log(this.name)//全局
  console.log(this)//window
}
a()

函数作用域

var obj={
name:"obj-name",
fn:function(){
console.log(this.name)//obj-name
}
}
obj.fn();

全局下把对象赋值给变量时

把对象赋值给一个变量，调用该方法时，this 指向window

var obj= {
    name:"obj的name",
    fn:function(){
        console.log(this.name); 
    }
}
var test=obj.fn;
test()//undefined

包含多个对象，只指向上一级

var obj={
  name:"zs",
  person:{
    name:"ls",
    fn:function(){
      console.log(this.name)
    }
  }
}
obj.person.fn()//ls

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

var obj = {
    name:"zs",
    person:{
        fn:function(){
            console.log(this.name); //undefined
        }
    }
}
obj.person.fn();

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

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

这里this指向的是window

总结

this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。

在js的严格模式中this指向的不是window

箭头函数

箭头函数没有自己的this，指向外层作用域

var obj = {
  foo() {
    console.log(this);
  },
  bar: () => {
    console.log(this);
  }
}

obj.foo() // {foo: ƒ, bar: ƒ}
obj.bar() // window

自执行函数

自执行函数的this指向window

 var obj = {
            foo: "test",
            fn: function () {
                var mine = this;//这个this是指向obj的，可以clg一下
                console.log(this.foo);       //test
                console.log(mine.foo);       //test

                (function () {
                    console.log(this.foo);    //undefined
                    console.log(mine.foo);    //test
                    console.log(this);//window
                    console.log(mine);//object
                })();
            }
        };
        obj.fn();

clg是console.log()