JS面试题-原型及原型链、作用域及作用域链、闭包

最新推荐文章于 2024-05-14 21:27:17 发布

ExMaterial

最新推荐文章于 2024-05-14 21:27:17 发布

阅读量4.4k

点赞数 8

分类专栏：面试准备 JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_49172439/article/details/125794014

版权

面试准备同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

一、你对原型及原型链了解多少？

1、什么是原型和原型链？

什么是原型？

在javascript中，函数可以有属性。每个函数都有一个特殊的属性叫作原型(prototype),正如下面所展示

function person() {}
console.log(person.prototype)

在浏览器中运行这段代码之后可以清楚的看到我们的原型对象：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cs0UDVzx-1657807703916)(attachment:2f74665f17d433773006bf97c2f0af35)]

什么是原型链

JavaScript常被描述为一种基于原型的语言(prototype--based language)——每个对象拥有一个原型对象，对象以其原型为模板
、从原型继承方法和属性。原型对象也可能拥有原型，并从中承方法和属性，一层一层、以此类推。这种关系常被称为原型链
(prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。—如上内容摘自MDN

简单理解：原型链就是在当前对象中找不到定义的话，会在当前对象的原型对象上继续查找，直至undefined。

下面通过一个例子来直观地体验一下。

const person = { name: 'ExMaterial', age: 20 };

console.log(person);  // { name: 'ExMaterial', age: 20 }
console.log(person.toString());  // [object Object]

因为原型链最终都会指向Object，所以可以调用Object对象上的toString方法。

2、原型和原型链存在的意义是什么？

实例对象可以共享构造函数原型属性和方法，节省内存。构造函数原型上的属性和方法越多，节省内存越大。

function person(name, age) {
    this.name = name;
    this.age = age;
}
person.prototype.eating = function() {
    return this.name + " is eating."
}
person.prototype.running = function() {
    return this.name + " is running."
}

const p1 = new person('ExMaterial', 20)
console.log(p1.eating());  // ExMaterial is eating.

二、如何理解作用域和作用域链？

在开始讲解作用域链之前，要和之前的原型链剥离开来，这是两个完全不同的东西。

了解了上面这点之后，就可以继续看下面的内容了。

1、什么是作用域？

作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性，作用域决定了代码区块中变量和其他资源的可见性。下面我们通过一个例子来理解下作用域这个概念:

function scope() {
  var insideVariable = 'insideVariable';
}
scope();
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

在ES6之后，作用域可分为以下三种：

全局作用域
函数作用域
块级作用域

2、什么是作用域链？

当我们在某个函数的内部作用域中查找某个变量时，如果没有找到就会到他的父级作用域中查找，如果父级也没找到就会接着一层一层的向上寻找，直到找到全局作用域还是没找到的话，就宣布放弃。这
种一层一层的作用域嵌套关系，就是作用域链，举个例子：

var a = 100;
function globalFunc(){
  var b = 200;
  function currentFunc(){
    var c = 300;
    console.1og(a)://全局作用域的变量
  }
  currentFunc();
}
globalFunc();

如上例子中当我们在currentFunc中查找a变量的时候当前currentFunc作用域不存在所以就到他的父作用域globalFunc中查找，同样还是没找到，在往上就到了我们的全局作用域，在全局作用域找到了我们需要的变量。可以看到这个查找的过程就是顺着我们的作用域链层层往上的。

三、你对闭包怎么理解？

1、什么是闭包？

一个函数和对其周围状态(1 exical environment,词法环境)的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭
包(closure)。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在JavaScript中，每当创建一个函数，
闭包就会在函数创建的同时被创建出来。————摘自MDN

大白话简单理解闭包：能够访问其他函数内部变量的函数，被称为闭包

function closure() {
    var name = 'Mozilla';
    function displayName() {
        console.log(name);
    }
    return displayName;
}
var myFunc = closure();
myFunc();

2、闭包的应用场景有哪些？

①、事件函数的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size: 12px;
        }
        h1 {
            font-size: 1.5em;
        }
        h2 {
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <p>这是p元素</p>
    <h1>这是h1元素</h1>
    <h2>这是h2元素</h2>
    <a href="#" id="size12">12</a>
    <a href="#" id="size14">14</a>
    <a href="#" id="size16">16</a>

    <script>
        const size12Btn = document.getElementById('size12');
        const size14Btn = document.getElementById('size14');
        const size16Btn = document.getElementById('size16');

        const makeSizer = size => () => {
            document.body.style.fontSize = size + 'px';
        };

        size12Btn.onclick = makeSizer(12);
        size14Btn.onclick = makeSizer(14);
        size16Btn.onclick = makeSizer(16);
    </script>
</body>
</html>

②、用闭包模拟私有方法

const makeCounter = function() {
    let privateCounter = 0;
    function changeBy(val) {
        privateCounter += val;
    }
    return {
        increment() {
            changeBy(1);
        },
        decrement() {
            changeBy(-1);
        },
        value() {
            return privateCounter;
        }
    };
};

const Counter1 = makeCounter();
const Counter2 = makeCounter();
console.log(Counter1.value()); // 0
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); // 2
Counter1.decrement();
console.log(Counter1.value()); // 1
console.log(Counter2.value()); // 0
Counter2.increment();
Counter2.increment();
console.log(Counter2.value()); // 2
console.log(Counter1.value()); // 1

③、在循环中给页面元素绑定事件响应函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        var nodes = document.querySelectorAll('div');
        var length = nodes.length;
        for (var i = 0; i < length; i++) {
            nodes[i].onclick = function() {
                alert(i);
            };
        }
    </script>
</body>
</html>

这段代码运行之后无论点击哪个dv最后弹出的结果都是5，这是因为dv节点的occk事件是被异步出发的，当事件被触发的时候，for循环早就结束了，这个时候变量i的值已经是5。解决这个问题的方法之一我们可以利用闭包，把每次循环的i值都封闭起来。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <script>
        var nodes = document.querySelectorAll('div');
        var length = nodes.length;
        for (var i = 0; i < length; i++) {
            (function (i) {
                nodes[i].onclick = function () {
                    alert(i);
                };
            })(i);
        }
    </script>
</body>

</html>

3、闭包存在什么问题？

闭包本身会带来常驻内存，来看下面一段代码：

function foo() {
    var a = 3;
    function result() {
        console.log(a);
    }
    return result;
}
var test = foo();
test();

上述代码中，理论上来说，foo函数作用域隔绝了外部环境，所有变量引用都在函数内部完成，foo运行完成以后，内部的变量就应该被销毁，内存被回收。然而闭包导致了全局作用域始终存在一个test的变量在引用着foo内部的result函数，这就意味着foo内部定义的result函数引用数始终为3，垃圾运行机制就无法把它销毁这就是我们说的闭包本身会造成内部变量常驻内存。

ExMaterial

关注

8
点赞
踩
64

收藏

觉得还不错? 一键收藏
0
评论
JS面试题-原型及原型链、作用域及作用域链、闭包

JavaScript常被描述为一种基于原型的语言(prototype--basedlanguage)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中承方法和属性，一层一层、以此类推。这种关系常被称为原型链(prototypechain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。—如上内容摘自MDN简单理解原型链就是在当前对象中找不到定义的话，会在当前对象的原型对象上继续查找，直至undefined。name20};...
复制链接

扫一扫