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日

相关文章

  • 详解JavaScript对象类型

    详解JavaScript对象类型 什么是JavaScript对象类型? JavaScript是一门面向对象的语言,因此对象是JavaScript中最重要的数据类型之一。对象可以看作是属性的集合,每个属性都有一个名字和一个值,属性值可以是其他任何JavaScript数据类型,包括数字、字符串、数组和函数等。 在JavaScript中,有一些内置对象类型,如Ar…

    JavaScript 2023年5月27日
    00
  • js与C#进行时间戳转换

    当我们需要在前端应用中与后端应用进行通信时,常常需要用到时间戳。因为各种编程语言对时间的处理方式不同,所以在不同编程语言之间进行通信时需要进行一些数据格式的转换。下面我会提供一些将 JS 时间戳转换成 C# 时间戳的方法和示例。 JS 时间戳转 C# 时间戳格式 JS 中获取时间戳的方式很简单,可以使用 Date.now() 或 new Date().get…

    JavaScript 2023年5月27日
    00
  • JavaScript显示当然日期和时间即年月日星期和时间

    想要在网页上显示当前日期和时间,可以使用JavaScript编写代码实现。下面是详细的攻略: 步骤一:获取当前时间 使用JavaScript中的Date对象的get方法可以获取当前时间的各个部分,包括年份、月份、日期、小时、分钟、秒和毫秒。其中,getDay方法可以获取星期几,0表示星期日,1表示星期一,以此类推。下面是获取当前时间的代码: var date…

    JavaScript 2023年5月27日
    00
  • 详解JSP 内置对象request常见用法

    详解JSP 内置对象request常见用法 1. request对象介绍 JSP内置对象request代表了一个HTTP请求,包含了客户端上所有的请求信息。当客户端发出请求,服务器就会创建一个request对象,并且request对象会一直存在于整个HTTP请求的生命周期中。request对象可以用来获取HTTP请求的参数,以及在服务器端保存和获取数据。 2…

    JavaScript 2023年6月11日
    00
  • Ajax异步请求的五个步骤及实战案例

    下面我来详细讲解一下“Ajax异步请求的五个步骤及实战案例”的完整攻略。 一、Ajax异步请求的五个步骤 1. 创建Ajax对象 使用JavaScript原生方式创建Ajax对象,可以使用XMLHttpRequest对象,也可以使用ActiveXObject。 2. 设置请求方式和请求地址 通过Ajax对象的open方法设置请求方式和请求地址,请求方式有GE…

    JavaScript 2023年6月11日
    00
  • JavaScript学习笔记之JS事件对象

    JavaScript学习笔记之JS事件对象 什么是JS事件对象 JavaScript事件对象(Event Object)是在事件被触发时由浏览器自动创建的对象,它包含了与事件相关的所有信息,我们可以通过JS事件对象来获取一些有用的信息,如事件类型、触发事件的元素、鼠标的位置等。 JS事件对象的属性 以下是JS事件对象常用的属性: type:事件类型,如”cl…

    JavaScript 2023年5月18日
    00
  • JS常用的几种数组遍历方式以及性能分析对比实例详解

    JS常用的几种数组遍历方式以及性能分析对比实例详解 在 JavaScript 中,数组遍历是开发者们经常需要用到的功能之一。在本文中,我们将介绍 JS 常用的几种数组遍历方式并进行一些性能分析对比。 常用的几种数组遍历方式 在 JavaScript 中,常用的几种数组遍历方式如下: 1. for 循环 for 循环是最基础的数组遍历方式,通过对数组的下标进行…

    JavaScript 2023年5月27日
    00
  • 一看就懂:jsonp详解

    一看就懂:jsonp详解 什么是JSONP JSONP(JSON with Padding)是一种跨域的数据交互方式。它利用了script标签没有跨域限制的特点,通过动态创建script标签来请求服务器返回数据,并通过回调函数来处理返回的数据。 JSONP的原理 在客户端动态创建一个script标签,其中的src属性指向服务器端数据接口,并在接口地址中指定回…

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