20道JS原理题助你面试一臂之力(必看)

《20道JS原理题助你面试一臂之力(必看)》是一篇介绍 JavaScript 基础知识的面试题攻略文章,共包含20道题目。以下是该文章的完整攻略:

1. 什么是原型链?如何理解原型链?

1.1 定义

原型链是 JS 的一种基本机制,用于实现对象之间的继承。每一个对象都有一个指向另一个对象的指针,称之为原型 prototype。当我们访问一个对象的属性或方法时,如果该对象不存在该属性或方法,则 js 引擎会自动查找该对象的原型指针指向的对象中是否有该属性或方法,如果还不存在,则继续查找原型对象的原型,直到找到 Object.prototype 为止。

1.2 示例

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function(){
    console.log(`Hello, my name is ${this.name}.`);
}
let p = new Person('Tom',18);
p.sayHello();

该示例中,我们定义了一个构造函数 Person,它有两个属性:name 和 age。我们给 Person 的原型对象添加了一个方法 sayHello。最后,我们创建了一个 Person 的实例 p,并调用 p 的 sayHello 方法。在调用该方法时,由于 p 对象中并没有定义 sayHello 方法,因此 js 引擎会查找 p 的原型对象中是否有该方法,找到之后进行调用。

2. 什么是 this?this 的指向有什么规律?

2.1 定义

this 关键字指向函数执行时所处的环境对象,具体取决于函数的调用方式。

2.2 规律

  • 直接调用函数:this 指向全局对象 window;
  • 对象方法中调用函数:this 指向该对象;
  • 构造函数中调用:this 指向新创建的对象;
  • apply、call、bind 中调用:this 指向第一个参数传入的对象;
  • 箭头函数中调用无法改变 this 的指向,this 会指向函数定义时所处的作用域。

2.3 示例

let obj = {
    name: 'Tom',
    sayName: function(){
        console.log(this.name);
    }
};
let func = obj.sayName;
func(); // undefined

该示例中,我们定义了一个对象 obj,其中包含一个方法 sayName。我们将 obj 的 sayName 方法赋值给变量 func,并直接调用 func。由于 func 的调用方式是直接调用函数,因此 this 指向全局对象 window。由于 window 对象中没有定义 name 属性,因此返回 undefined。

3. 什么是闭包?闭包有什么作用?

3.1 定义

闭包是指有权访问另一个函数作用域中的变量的函数。在 js 中,所有的函数默认都是闭包,因为它们都可以访问它们外层的作用域。

3.2 作用

闭包的主要作用是:

  • 封装变量:在函数中定义变量时,该变量会被保护在函数作用域中,外部无法访问。
  • 延长变量寿命:当函数执行完毕后,函数中的变量不会被立即销毁,而是等待外部继续访问使用,因此可以延长变量的生命周期。

3.3 示例

function createCounter(){
    let count = 0;
    return function(){
        count++;
        console.log(count);
    }
}
let counter = createCounter();
counter(); // 1
counter(); // 2

该示例中,我们定义了一个函数 createCounter,它返回一个可以计数器的函数。当我们调用 createCounter 函数时,它会返回一个内部函数。该内部函数可以访问外层函数作用域中的 count 变量,并将它自增。我们将 createCounter 返回的函数赋值给变量 counter,便可以使用该函数了。在调用 counter 函数时,它会打印当前的计数器值 count。由于 count 变量被定义在 createCounter 函数中,而不是全局作用域中,因此它只能在 createCounter 函数返回的函数中访问,外部无法直接改变其值,从而达到了封装变量的目的。而且,由于返回的内部函数中使用了 count 变量,该变量并不会在 createCounter 函数执行结束后被销毁,而是可以被 inner 函数访问和修改,从而延长了变量的生命周期。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:20道JS原理题助你面试一臂之力(必看) - Python技术站

(0)
上一篇 2023年5月19日
下一篇 2023年5月19日

相关文章

  • JS数组的常用10种方法详解

    JS数组的常用10种方法详解 在JavaScript编程中,数组是一种十分常见的数据结构。JS数组提供了丰富的API供我们操作和处理数组,今天我们来详细讲解一下JS数组的常用10种方法。 1. push() arr.push(item1, item2, …, itemX) push()方法在数组的末尾添加一个或多个元素,并返回数组的新长度。例如: let…

    JavaScript 2023年5月27日
    00
  • 分享javascript计算时间差的示例代码

    为了分享 JavaScript 计算时间差的示例代码,我将会提供以下步骤: 1. 引入 moment.js 库 moment.js 是一个流行的 JavaScript 日期和时间处理库,提供方便的日期和时间格式化、计算和解析功能。可以通过在 HTML 头部添加以下代码,引入 moment.js 库: <script src="https://…

    JavaScript 2023年5月27日
    00
  • JS时间特效最常用的三款

    JS时间特效是网站开发中经常使用的技术,比如动态时间显示、倒计时等,下面介绍三款JS时间特效,分别是CountUp.js、Moment.js和Timeago.js。 CountUp.js CountUp.js是一个小型的、跨平台JavaScript库,用于轻松地实现计数器动画。步骤如下: 首先,从GitHub仓库中下载 CountUp.js 库,并将其添加到…

    JavaScript 2023年5月27日
    00
  • javascript学习笔记(七)Ajax和Http状态码

    首先,需要明确Ajax和HTTP状态码的含义,Ajax是指通过异步请求从服务器端获取数据的技术手段,而HTTP状态码则是Web浏览器与Web服务器间通信的状态指示器,根据这些状态码可以判断请求是否成功,或者请求发生了什么问题。 Ajax和Http状态码完整攻略 Ajax Ajax(Asynchronous JavaScript and XML)是“异步 Ja…

    JavaScript 2023年5月28日
    00
  • JS如何通过FileReader获取.txt文件内容

    获取.txt文件内容的完整攻略可以分为以下几个步骤: 获取input标签上传的文件对象。 利用JavaScript中的FileReader API读取文件内容。 将文件内容进行处理展示。 下面我们分别介绍每个步骤的具体实现。 第一步:获取上传的文件对象 在HTML中,我们可以通过input标签来实现文件上传功能。例如: <label for=&quot…

    JavaScript 2023年5月27日
    00
  • 整理Javascript流程控制语句学习笔记

    下面为你详细讲解“整理Javascript流程控制语句学习笔记”的完整攻略。 攻略概述 本攻略旨在帮助读者更好地理解和掌握Javascript中的流程控制语句,涵盖以下内容: 分类介绍Javascript中的流程控制语句。 详细讲解Javascript中每种流程控制语句的用法、语法和示例。 给出实际例子,帮助读者理解流程控制语句的应用场景。 提供学习Java…

    JavaScript 2023年5月27日
    00
  • 7个令人惊讶的JavaScript特性详解

    7个令人惊讶的JavaScript特性详解 介绍 这篇文章将会介绍七个我们可能不知道或很少使用的有趣的JavaScript特性。这些特性可能会帮助你更好地理解JavaScript的本质以及如何更好地使用它。 1. 默认参数 默认参数允许我们在一个函数的参数列表中为某些参数定义默认值。如果没有传递值给这个参数,它将使用默认值。 function sayHell…

    JavaScript 2023年5月27日
    00
  • js构造函数创建对象是否加new问题

    当使用 JavaScript 构造函数创建对象时,可以选择是否使用 new 关键字。如果使用了 new 关键字,则会创建一个新的对象并将其绑定到 this 上,最后返回这个新的对象。如果没有使用 new 关键字,则 this 被绑定到全局对象上,这可能导致一些意外的问题。 下面给出两个示例展示使用和不使用 new 关键字的区别。 示例一 function P…

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