7道关于JS this的面试题,你能答对几个

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: bindcallapply的作用是什么?

bindcallapply可以用来显式地指定函数的上下文。它们的作用如下:

  • 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:thisnew操作符的关系是什么?

在使用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的上下文。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:7道关于JS this的面试题,你能答对几个 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JS基础随笔(菜鸟必看篇)

    下面是关于“JS基础随笔(菜鸟必看篇)”的详细攻略。 简介 “JS基础随笔(菜鸟必看篇)”是一篇介绍JavaScript基础知识的文章,适合初学者阅读,主要包括变量、数据类型、运算符、函数、DOM、事件等内容。文章采用易懂的语言和多个示例帮助读者理解JavaScript的基础概念。 攻略 变量 变量是储存数据的容器,JavaScript中的变量需要通过关键字…

    JavaScript 2023年5月18日
    00
  • Java实现爬虫给App提供数据(Jsoup 网络爬虫)

    Java实现爬虫给App提供数据(Jsoup网络爬虫) 概述 爬虫是一种自动化的软件程序,可以模拟人类用户的行为,在互联网上自动收集获取数据并进行分析。在实际应用中,爬虫可以被用于网站数据的抓取、搜索引擎优化、数据分析等领域。Java是一种流行的编程语言,在爬虫方面也有很好的支持和工具。其中,Jsoup是一种高效的Java网络爬虫框架,可以用于爬取和解析HT…

    JavaScript 2023年6月11日
    00
  • 简化版的vue-router实现思路详解

    简化版的vue-router实现思路详解 前言 Vue.js 是一个非常流行的前端框架,其专注于视图层的渲染。而 Vue-router 是 Vue.js 的一个关键插件,它管理着 Vue.js 应用程序中的路由,可以帮助我们更好地管理前端路由。在本篇文章中,我将为大家介绍一个简化版的 Vue-router 实现思路。 设计思路 Vue-router 的设计思…

    JavaScript 2023年6月11日
    00
  • 基于three.js实现的3D粒子动效实例代码

    基于three.js实现的3D粒子动效实例代码,需要经过以下步骤: 第一步:引入three.js库和实例代码所需的辅助库 <script src="js/three.min.js"></script> <script src="js/Stats.min.js"></script…

    JavaScript 2023年6月10日
    00
  • 用Json实现PHP与JavaScript间数据交换的方法详解

    标题:用Json实现PHP与JavaScript间数据交换的方法详解 正文: 什么是JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于JavaScript语言的一个子集,可以被多种编程语言读取和生成。JSON格式的数据可以被Web应用中的JavaScript直接读取,并且可以方便地用于PHP和Jav…

    JavaScript 2023年5月27日
    00
  • JS实现的视频弹幕效果示例

    下面是详细讲解“JS实现的视频弹幕效果示例”的完整攻略: 简介 视频弹幕效果是目前比较流行的一种视频播放方式,也可以为网页增加一些互动性。通过JS实现的视频弹幕效果,可以让用户在看视频时发表自己的评论或者观点,同时其他用户也可以看到这些弹幕,增加了互动性。 准备工作 安装编译环境 首先需要安装编译环境,包括node.js,npm,webpack等。如果您还不…

    JavaScript 2023年6月11日
    00
  • js 中的switch表达式使用示例

    当我们需要根据不同的条件执行不同的代码块时,使用 switch 语句是一种比较方便的选择。在 JavaScript 中,switch 表达式使用示例如下: switch 语句的结构 switch (表达式) { case 标签1: 执行代码块 1; break; case 标签2: 执行代码块 2; break; … default: 执行代码块 n; …

    JavaScript 2023年5月28日
    00
  • JavaScript This指向问题详解

    JavaScript This指向问题详解 JavaScript中的this指向是非常重要的一个问题,但也是让很多人感到困惑和烦恼的问题。正确的理解this指向,能够帮助我们更好地编写可读性强、易于维护的JavaScript代码。下面就是关于JavaScript中this指向问题的详解攻略: this的含义 在任何函数中我们都可以使用this关键字。如果我们…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部