关键词

JavaScript关键字this的用法总结

JavaScript关键字this的用法总结

1. 什么是this

在 JavaScript 中,this 关键字指的是当前作用域下的对象,通常是在函数内部使用的。

2. this的用法

在 JavaScript 中,this 的值是动态确定的,即它的值依赖于函数的调用方式。下面就 someFunction 函数来说明 this 的用法。

function someFunction(arg1, arg2) {
  console.log(this);
}

2.1 函数作为对象的方法调用

如果函数是作为对象的方法被调用的,那么 this 就会绑定到这个对象上。

const myObject = {
  name: 'John',
  age: 30,
  sayHello: function() {
    console.log(this.name);
  }
}

myObject.sayHello(); // 输出 John

2.2 函数作为构造函数调用

如果函数被用作构造函数,那么 this 就会绑定到新创建的对象上。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('John', 30);
console.log(person1); // 输出 Person { name: "John", age: 30 }

2.3 函数作为普通函数调用

如果函数作为普通函数调用,那么 this 就会绑定到全局对象(浏览器中通常是 window,Node.js 中是 global)上。

function someFunction() {
  console.log(this);
}

someFunction(); // 在浏览器中输出 window,在 Node.js 中输出 global

3. 注意事项

  • 使用箭头函数定义的函数没有自己的 this 值,继承的是其父作用域的 this 值。

  • 使用 call()、apply() 或 bind() 可以更改 this 的上下文。

4. 总结

在 JavaScript 中,this 关键字的值是动态的,它的值由函数的执行环境决定。在函数内部,this 可以被用来引用对象,其中 this 的实际值在代码执行时才会得到确定。

5. 示例代码

下面给出了一个更多 this 的用法和示例代码

var name = 'global'

var obj = {
  name: 'obj',
  sayName: function() {
    console.log(this.name)
  }
}

function sayName() {
  console.log(this.name)
}

var bindObjFn = sayName.bind(obj)

obj.sayName()         // 输出 obj
sayName()             // 输出 global
bindObjFn()           // 输出 obj

在该示例代码中:

  • obj.sayName() 为调用对象方法的形式,函数内部 this 的指向为调用该方法的对象 obj

  • sayName() 调用是通过全局对象调用的普通函数,所以函数内 this 的指向为全局对象。

  • bindObjFn() 调用是通过 bind() 改变 this 指向,bind() 是函数的原型方法,利用闭包可以保存 objbindObjFn() 调用方法就会指向 obj

本文链接:http://task.lmcjl.com/news/9734.html

展开阅读全文