Js中的this

在JavaScript中，this关键字是一个非常重要且有时可能引起混淆的概念。它通常指向函数执行时的上下文对象，但具体指向什么取决于函数的调用方式。简单来说，它在不同的执行环境下指向不同的对象。

this的不同指向：

1.在全局上下文或普通函数直接调用中，应用this的默认绑定规则

在全局上下文中，this会被默认绑定到全局对象，也就是指向全局对象（在浏览器中通常是window）。

 var a = 1
 console.log(this.a);

我们在浏览器中打开并运行这段代码，可以得到如下结果：

我们发现：因为a是定义在全局的变量，而在全局上下文中this指向全局对象（window），所以当访问this.a时，js引擎就会在全局对象中找到变量a，并打印出来。

同样的，在普通函数调用中，如下代码：

var a = 1
function foo(){
    //"use strict";
    var b = 2
    console.log(this.b);
}
foo()

因为foo（）是直接使用不带任何修饰的函数引用进行调用的，所以此时this同样被默认绑定到全局对象（指向全局对象），所以在浏览器中此时运行结果为1。

但是有一个特例！！如果使用严格模式（如被注释的第三行代码），则不能将全局对象用于默认绑定，因此this会绑定到undefined。

2.在对象方法中，应用this的隐式绑定规则

当函数作为某个对象的方法被调用时，this的隐式绑定规则会把this绑定到（指向）该对象

let obj = { 
  name: 'Alice',
  sayHello: function() { 
  console.log(this.name); 
  }
}
obj.sayHello() 

此时， function() { console.log(this.name)}函数作为对象obj的sayHello方法被调用时，隐式绑定规则会把函数调用中的this绑定到对象obj，所以此时this.a和obj.a是一样（相等）的。所以this指向该对象，所以会打印出对象中的name属性的值‘Alice’。

3.在构造函数或类的方法中，应用this的new绑定规则

当使用new关键字调用构造函数时，new绑定规则会把this绑定到（指向）新创建的实例对象

function foo(a){
    this.a = a;
}

var bar = new foo(2);
console.log(bar.a);

在这段代码中，使用new来调用foo()时，我们会构造一个新对象并把它绑定到foo（）调用中的this上，所以这时的this就指向新创建的实例对象。所以此时代码结果为2。

4.call，apply，bind方法设置this的值，this的显式绑定

在js中，允许使用.call(), .apply(), .bind()方法设置this的绑定（指向）。它们之间最明显的区别就是，call和apply方法是立即调用函数，而bind方法返回一个新函数。

function foo(){
    console.log.(this.a);
}

var obj = {
    a : 2
};

foo.call(obj); //   2
//foo.apply(obj); //   2

当一个函数调用.call()或.apply()方法时，这个函数中的this会被强制绑定到（）中的对象上，所以此时foo中的this就指向obj。如果（）中传入的是一个原始值（字符串类型，布尔类型或者数字类型），这个原始值会被转换成它的对象形式。

但如果调用的是.bind()方法，则会返回一个新函数，我们需要先接收这个新函数。

function foo(){
    console.log.(this.b);
}

var newObj = {
    b : 5
};

const Foo = foo.bind(newObj);
Foo(); //   5

这里使用.bind()方法this仍然会指向（）中的对象，但我们须先用Foo接收.bind（）方法返回的新函数，再调用Foo即可。

5.箭头函数中的this指向

在Js的ES6版本中介绍了一种无法使用以上规则的特殊函数类型：箭头函数，它并不是使用function关键字定义的，而是使用被称为“胖箭头”的操作符 => 定义的。

箭头函数不会创建自己的this值，它会继承外层非箭头函数中的this值，如果外层还是箭头函数，那么会一直往外层找，直到找到全局为止。

var obj = {
    a : 1,
    foo : functiono(){
        const fn = () =>{
            console.log(this.a);
        }
        fn()
    }
}
obj.foo() // 1

结束

最后简单总结一下：

1.当在全局上下文或普通函数调用中，this会默认指向全局对象（严格模式下为undefined）。

2.当函数作为某个对象的方法被调用时，this会指向这个对象。

3.当使用new关键字调用构造函数时，this会指向构造函数创建的实例对象。

4..call（），.apply（），.bind（）方法可以设置this的值，将this指向（）中的对象。

5.箭头函数中的没有自己的this，此时会继承外层非箭头函数中的this。

以上就是关于Js中this关键字的一些细节，希望对大家有帮助！！