JavaScript this 面试练习题5例

技术频道 - js技术

JavaScript this 面试练习题5例

作者:admin 时间:2022-7-5 11:51:49 浏览:

JavaScript面试时，this是必考的题目，因此有必要熟练掌握this这个知识点。在前面，我整理了6个关于this关键字的面试问题，本文中，再次通过5道练习题，学习this的使用。

题目1：

请问，以下的getName 执行结果为：

'全域'
'小明'

function getName() {
  console.log(this.myName);
}
var myName = '全域';

// 主要程序代码
var Ming = {
  myName: '小明',
  getName: getName
};

Ming.getName();

.
.
.
.
.
.
.
本题答案为2. '小明'，请记住一个概念，传统函数如何定义不会影响this 的指向，会影响指向的只有调用方式，在此是在 Ming 下调用 getName 的方法，因此this 会指向Ming。

题目2：

请问，以下的getName 执行结果为：

'全域'
'小明'

var Ming = {
  myName: '小明',
  getName: function() {
    console.log(this.myName);
  }
};
Ming.getName();

.
.
.
.
.
.
.
这题将 getName 函数直接定义在 Ming 的对象下，概念也与先前相同，不管如何定义，直接看是如何调用，所以本题结果依然是2. '小明'。

题目3：

请问，以下的getName 执行结果为：

'全域'
'小明'

function getName() {
  console.log(this.myName);
}

var myName = '全域';

// 主要程序代码
var Ming = {
  myName: '小明',
  fn: function() {
    getName();
  }
};
Ming.fn();

.
.
.
.
.
.
.
这题在外层调用 fn() 方法，内部再“直接调用getName 函数”，所以函数的 this 是直接由 getName(); 这个调用方式而定（请注意，在此调用的前方没有任何的对象），这种调用方式会称为“simple call”（简单调用），this的指向为window，结果会是1. '全域'。

题目4：

请问，以下的getName 执行结果为：

'全域'
'小明'
'小明家'

function getName() {
  console.log(this.myName);
}

var myName = '全域';

// 主要程序代码
var Ming = {
  myName: '小明',
  family: {
    myName: '小明家',
    getName: getName
  }
  
};
Ming.family.getName();

.
.
.
.
.
.
.
本題是 “对象的方法調用”，只要检视 getName 调用时前方的对象是什么就可确认 this 的指向（family 对象），因此this 指向为family 结果为3. '小明家'。

题目5：

请问，以下的执行结果为：

'全域'
'小明'

var myName = '全域';

// 主要程序代码
var Ming = {
  myName: '小明',
  fn: function() {
    setTimeout(function() {
      console.log(this.myName);
    }, 0);
  }
};
Ming.fn();

.
.
.
.
.
.
.
本题的结果为：1.'全域'

这题算是许多新手会遇到的错误，在对象内调用时如果出现立即函数、回调函数（callback function）结果会有什么变化？绝大多数的情况下这类型都会指向window，所以不建议在此类型下直接调用this。

总结

本文通过5道练习题，都是简单的概念题，没有复杂的逻辑及语法，希望通过本文的习题练习，你能更好的掌握this这个知识点。除了本文介绍的，你还可以看看关于this关键字的6个面试问题。

相关文章