JavaScript基础之this和箭头函数详析

本文主要介绍JavaScript中的this关键字和箭头函数的使用方法和注意事项。

什么是this

在JavaScript中，this关键字代表当前执行上下文的对象。它的值是在函数执行时确定的，具体取决于函数的调用方式。

全局作用域下的this

在全局作用域下，this指向的是全局对象window。

console.log(this);  // Window对象

函数作用域下的this

在函数作用域下，this指向的是调用该函数的对象。

直接调用函数

如果函数被直接调用，则this指向的是全局对象window。

function test() {
  console.log(this);  // Window对象
}

test();

对象方法调用

如果函数作为对象的方法被调用，则this指向的是该对象。

let obj = {
  name: '张三',
  sayName: function() {
    console.log(this.name);  // '张三'
    console.log(this);       // obj对象
  }
}

obj.sayName();

构造函数调用

如果函数作为构造函数调用，则this指向的是新创建的对象。

function Person(name) {
  this.name = name;
  console.log(this);     // Person {name: '张三'}
}

let p = new Person('张三');

显示绑定this

除了默认绑定，this还可以通过显示绑定的方式来指定它的值。Javascript中提供了apply、call和bind三个方法来实现显示绑定。

apply方法

apply方法用于改变函数中的this指向，并将传入的参数以数组的形式传递给函数。

let obj1 = {
  name: '张三'
}

let obj2 = {
  name: '李四'
}

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

sayName.apply(obj1);  // '张三'
sayName.apply(obj2);  // '李四'

call方法

call方法与apply类似，不同的是它接收的参数是一个一个单独传递的，而不是数组形式。

let obj1 = {
  name: '张三'
}

let obj2 = {
  name: '李四'
}

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

sayName.call(obj1);  // '张三'
sayName.call(obj2);  // '李四'

bind方法

bind方法返回一个新的函数，它的this关键字会被永久性的绑定到传入的对象上。

let obj1 = {
  name: '张三'
}

let obj2 = {
  name: '李四'
}

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

let sayName1 = sayName.bind(obj1);
let sayName2 = sayName.bind(obj2);

sayName1();  // '张三'
sayName2();  // '李四'

箭头函数

箭头函数是ES6中新增的一种函数声明方式。它除了语法上的差异，还具有一些特殊的行为。

箭头函数的语法

箭头函数的语法结构为：

(param1, param2, ..., paramN) => { statements }

其中，params是函数需要的参数，用逗号分隔，statements是函数体，可以包含多条语句。

箭头函数的特性

箭头函数有以下几个特性：

1. 箭头函数没有自己的this

在箭头函数中，this关键字指向的是定义时所在的对象，而不是执行时所在的对象。

let obj = {
  name: '张三',
  sayName: () => {
    console.log(this.name);    // undefined
    console.log(obj.name);     // '张三'
  }
}

obj.sayName();

2. 箭头函数不能使用arguments对象

在箭头函数中，arguments关键字会指向包含箭头函数体的函数的arguments对象，而不是箭头函数本身的arguments对象。

let test = () => {
  console.log(arguments);    // 报错
}

test(1, 2, 3);

3. 箭头函数不能作为构造函数

箭头函数没有自己的this关键字，因此不能被用作构造函数。

let Person = (name) => {
  this.name = name;    // 报错
}

let p = new Person('张三');

箭头函数的示例

示例1：箭头函数与setTimeout的使用

在setTimeout中，this指向的是全局对象window，使用箭头函数可以避免this指向的问题。

let obj = {
  name: '张三',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);    // '张三'
    }, 1000)
  }
}

obj.sayName();

示例2：箭头函数与map方法的使用

在使用map方法时，可以使用箭头函数简化代码。

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map(x => x * 2);

console.log(newArr);    // [2, 4, 6, 8, 10]

总结

本文介绍了JavaScript中this关键字的使用方法和箭头函数的特性和用法，希望对大家有所帮助。