JavaScript基础知识点——this指向

102 阅读2分钟

this关键字在JavaScript中有着重要的作用，它用于引用当前执行代码所处的上下文对象。通过this，可以访问和操作当前对象的属性和方法。我们可以通过使用this指向来简化代码的书写。以下是this的使用方法和常见应用。

默认绑定规则

当函数独立调用时，this指向全局对象。函数在哪个词法作用域中生效，this就指向哪里(独立调用的函数this都指向window，在Node.js环境下是global对象)

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

隐式绑定规则

当一个函数被对象所拥有且调用时，函数的this指向该对象。

function foo(){
    console.log(this.a);
}
var obj={
    a:1,
    foo:foo
}
obj.foo();
var obj2={
    a:2,
    obj:obj
}
obj2.obj.foo();

隐式丢失

当函数作为对象的方法被调用，但是被保存到其他变量中并单独调用时，this会丢失绑定，指向默认绑定的对象。

var obj = {
  name: 'John',
  foo: foo
}
var obj2 = {
  name: 'Tom',
  obj: obj
}

function foo() {
  console.log(this.name);
}
obj2.obj.foo()

当函数调用前有多个对象，函数的this指向最近的对象。

显示绑定

使用call、apply或bind方法可以显式地指定一个对象来绑定到函数的this上，可以灵活地控制函数的执行上下文。

function sayHi() {
    console.log(`Hi, my name is ${this.name}`);
  }
  
  const obj1 = { name: 'John' };
  const obj2 = { name: 'Jane' };
  
  sayHi.call(obj1); // 输出：Hi, my name is John
  sayHi.call(obj2); // 输出：Hi, my name is Jane

new 绑定

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

function Person(name) {
    this.name = name;
  }
  
  const john = new Person('John');
  console.log(john.name); // 输出：John

箭头函数

箭头函数是ES6新增的一种函数声明方式，它没有自己的this，而是通过词法作用域来确定this的值。箭头函数内部的this指向外层普通函数的this，如果外层没有普通函数，就指向全局对象。

由于箭头函数没有自己的this，因此箭头函数不能使用call、apply和bind方法来修改this的指向。

function foo(){
    var bar =()=>{
        console.log(this);
    }
    bar()
}
foo.call(obj) // 箭头函数的this指向外层普通函数的this值

总结

this的指向取决于函数被调用的方式，了解this的指向可以帮助我们更好地理解和控制代码执行的上下文。通过理解和正确使用this，可以在JavaScript中更好地操作对象、调用函数和控制执行上下文，从而实现更灵活和复杂的代码逻辑。

avatar
文章
阅读
粉丝