7道关于JS this的面试题

问题1： this指向谁？

this关键字是在函数执行时被解析的。它指向一个对象，这个对象是在调用函数时传入的。或者说，在调用函数时，this的值由函数的调用方式来决定。例如：

function person() {
  this.name = "Tom";
}

var a = new person();
console.log(a.name); // "Tom"

在上面的代码中，我们使用了new操作符来调用函数。new操作符会创建一个新的对象，并且将它作为this参数传递给函数。因此，在person函数中，this指向了新创建的对象。

问题2：箭头函数对this有什么影响？

对于箭头函数，this指向的是函数定义时所在的上下文，而不是调用时的上下文。例如：

const person = {
    name: "Tom",
    age: 26,
    getAge: function() {
        const self = this;
        setTimeout(function() {
            console.log("age is", self.age); // age is 26
        }, 1000);

        setTimeout(() => {
            console.log("age is", this.age); // age is 26
        }, 1000);
    }
};

person.getAge();

在上面的代码中，getAge方法中的第一个setTimeout函数使用了普通函数来定义，因此this指向的是全局对象。而第二个setTimeout使用了箭头函数，因此this指向的是person对象。

问题3： bind、 call和 apply的作用是什么？

bind、 call和 apply可以用来显式地指定函数的上下文。它们的作用如下：

• bind：创建一个新的函数，这个函数的this值被绑定到指定的对象上，并且可以传递参数。
• call：调用一个函数，并且指定这个函数的this值和参数。参数是以逗号分隔的。
• apply：调用一个函数，并且指定这个函数的this值和参数。参数是以数组的形式传递的。

例如：

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

var a = {name: "Tom"};
var b = {name: "Jerry"};

var personA = person.bind(a);
personA(); // "Tom"

person.call(b); // "Jerry"

var args = [1, 2, 3];
person.apply(a, args); // "Tom"

问题4：this与new操作符的关系是什么？

在使用new操作符时，this指向的是新创建的对象。例如：

function person(name) {
  this.name = name;
}

var a = new person("Tom");
console.log(a.name); // "Tom"

在上面的代码中，我们使用new操作符来创建一个新的person对象。person函数中的this指向的就是这个新创建的对象。

问题5： 闭包如何影响函数中的this值？

闭包可以对函数中的this值造成影响。例如：

function person(name) {
  this.name = name;
  var self = this;
  setTimeout(function() {
    console.log(self.name); // "Tom"
    console.log(this.name); // undefined
  }, 1000);
}

var a = new person("Tom");

在上面的代码中，setTimeout函数创建了一个闭包。在这个闭包中，this指向的是全局对象，而不是person对象。因此，在闭包中使用了一个名为self的变量来保存this的值，以确保在闭包中引用的是person对象。

问题6：如何在对象中使用this？

在对象中使用this是非常方便的。我们可以使用this来引用对象的属性和方法。例如：

const person = {
    name: "Tom",
    age: 26,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
    }
};

person.sayHello(); // Hello, my name is Tom, I'm 26 years old.

在上面的代码中，sayHello方法中的this关键字可以引用person对象中的属性和方法，从而动态创建输出语句。

问题7：如果函数中没有this，该怎么办？

如果函数中没有this，则不需要使用this。例如：

function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 3

在上面的代码中，add函数中没有使用this关键字。因此，我们可以直接调用函数，而不需要担心this的上下文。