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日

相关文章

  • JavaScript 学习笔记二 字符串拼接

    JavaScript 学习笔记二 字符串拼接 在JavaScript中,字符串拼接是非常常见的操作。这篇笔记将重点探讨JavaScript中字符串拼接的几种方法。 1. 使用“+”符号 在JavaScript中,我们可以使用“+”符号将两个字符串拼接在一起。例如: var str1 = "Hello"; var str2 = "…

    JavaScript 2023年5月28日
    00
  • Javascript将图片的绝对路径转换为base64编码的方法

    将图片的绝对路径转换为base64编码的方法可以使用Javascript的Canvas对象来实现。具体过程如下: 步骤 1:创建一个Image对象 首先,我们需要创建一个Image对象,将想要转换成base64编码的图片作为其src属性的值。 const image = new Image(); image.src = ‘https://example.co…

    JavaScript 2023年5月19日
    00
  • js浮点数精确计算(加、减、乘、除)

    下面是js浮点数精确计算的完整攻略: 问题描述 在JavaScript中对浮点数进行计算时,由于采用 IEEE 754 标准,浮点数会存在精度误差。例如: 0.1 + 0.2 // 返回0.30000000000000004 而不是我们期望的 0.3。这种精度误差可能会在一些需要精确计算的场景下带来问题。本文将介绍如何使用JavaScript实现浮点数的精确…

    JavaScript 2023年6月10日
    00
  • js实现简单的倒计时

    下面是关于“JS实现简单的倒计时”的详细攻略。 基本思路 倒计时的原理很简单,就是获取未来的某个时间点与当前时间点的差值,然后根据差值计算出剩余的时间,最后通过 DOM 操作将剩余的时间显示在网页上。 实现步骤 1. 获取未来时间点 倒计时的第一步就是要获取未来的某个时间点,可以在 HTML 中用一个 input 标签来输入一个日期时间字符串,然后使用 ne…

    JavaScript 2023年5月27日
    00
  • 灵活掌握asp.net中gridview控件的多种使用方法(上)

    关于“灵活掌握asp.net中gridview控件的多种使用方法(上)”,我将从以下几个方面进行详细讲解: GridView控件的基本使用 翻页、排序和筛选功能的实现 多表联合查询结果展示 多数据源联合查询结果展示 下面我们分别来详细讲解。 1. GridView控件的基本使用 GridView控件是ASP.NET中最常用的数据展示控件之一。其基本用法如下:…

    JavaScript 2023年6月11日
    00
  • JavaScript常用数组元素搜索或过滤的四种方法详解

    JavaScript常用数组元素搜索或过滤的四种方法详解 在JavaScript编程中,经常会对数组进行搜索或者过滤操作,这篇文章将向您介绍JavaScript中常用的四种搜索或过滤数组元素的方法。 1. find()方法 该方法用于搜索数组中符合条件的元素,找到则返回该元素值,否则返回undefined。遍历数组,找到符合条件的元素即终止遍历,该方法接收一…

    JavaScript 2023年5月27日
    00
  • JS 文字符串转换unicode编码函数

    当我们需要在JavaScript程序中使用包含非字符文本的字符串时,这些字符必须转换为Unicode编码格式。因此我们需要将字符串文本转换为Unicode格式,这就需要一个JavaScript函数来实现。 以下是一个将字符串文本转换为Unicode编码格式的JavaScript函数: function textToUnicode(text) { var un…

    JavaScript 2023年5月19日
    00
  • javascript实现手机震动API代码

    很好,下面是详细讲解 JavaScript 实现手机震动 API 代码的完整攻略: 1. 确认浏览器支持性 首先需要确认浏览器是否支持 Vibration API(震动 API)。可以通过以下代码来检测: // 判断浏览器是否支持 Vibration API(震动 API) if ("vibrate" in navigator) { co…

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