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日

相关文章

  • AngularJS入门教程之Cookies读写操作示例

    下面我将详细讲解“AngularJS入门教程之Cookies读写操作示例”的完整攻略。 简介 本教程将介绍在AngularJS中如何进行Cookies的读写操作。下面我们将分为两个示例进行说明。 示例1:Cookies写入 首先,我们需要在HTML页面中引入AngularJS: <script src="https://cdn.bootcdn…

    JavaScript 2023年6月11日
    00
  • Cookies的各方面知识(基础/高级)深度了解

    下面我为大家讲解关于”Cookies的各方面知识(基础/高级)深度了解”的完整攻略。 1. 基础知识 1.1 Cookies 是什么? Cookies 是一种小型文本文件,可以保存在访问者的计算机上。当用户访问了某个网站时,该网站会将 Cookies 文件发送到用户的计算机并存储在用户的浏览器中。这里需要注意,Cookies 是被网站发送到用户计算机并存储的…

    JavaScript 2023年6月11日
    00
  • 深入解析Java设计模式编程中观察者模式的运用

    深入解析Java设计模式编程中观察者模式的运用 观察者模式是一种经典的设计模式,它能够实现对象之间的一对多依赖关系。当一个对象状态发生改变时,其所有关联对象都能够收到通知并自动更新。 观察者模式的定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。当主题对象的状态发生变化时,所有的观察者对象都能够收到通知并自动更新。 观察者模…

    JavaScript 2023年5月28日
    00
  • Javascript之Math对象详解

    Javascript之Math对象详解 Math对象简介 Math对象是JavaScript中的一个内置对象,该对象没有构造函数,直接通过Math关键字来使用。它提供了许多数学函数和常数,可以方便地进行数学计算。 Math对象常用属性 Math.PI Math.PI是一个数学常数,它表示圆周长与直径之比,约等于3.141592653589793。我们可以直接…

    JavaScript 2023年5月27日
    00
  • 分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容

    这里是分享自定义的console类让JS调试代码更方便的攻略: 1. 创建一个自定义的Console类 创建一个可以封装原生console使其在不同浏览器环境下具有兼容性的类,示例代码如下: class CustomConsole { constructor() { this.logHistory = []; this.registerConsoleMeth…

    JavaScript 2023年6月11日
    00
  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    浅谈JS函数三种定义方式 在JavaScript中,函数也是对象。定义函数的方法有三种:函数声明、函数表达式和Function构造函数。它们的语法如下: 函数声明 function fnDeclaration(arg1, arg2, …) { // 函数体 } 函数声明是函数最基本的定义方式。它是在函数执行前就会被解析并创建,所以可以先调用函数再声明函数…

    JavaScript 2023年5月27日
    00
  • JavaScript程序中的流程控制语句用法总结

    流程控制语句是JavaScript编程中非常重要的一部分,它用于根据条件执行特定的代码。在本文中,我们将深入讨论JavaScript程序中的流程控制语句的用法汇总。 条件语句 if语句 if语句是JavaScript最常见的条件语句。它允许根据一个条件来执行代码块,同时,它可以与else语句结合使用,以提供一些备选的行为。 if语句的基本语法如下: if (…

    JavaScript 2023年5月27日
    00
  • JavaScript实现数值自动增加动画

    JavaScript实现数值自动增加动画 简介 数值自动增加动画是Web开发中经常使用的一种交互效果,可以应用在比如数字滚动、统计数据等场景。本文将介绍使用JavaScript实现数值自动增加动画的完整攻略,包括实现原理、具体实现步骤和示例说明。 实现原理 实现数值自动增加动画的基本原理是利用定时器setInterval()循环计算数值,并更新数值显示。具体…

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