前端语言面试详解

All rivers run in to the sea

已于 2022-05-04 09:45:34 修改

阅读量766

点赞数 2

文章标签：前端

于 2022-04-09 19:08:42 首次发布

本文链接：https://blog.csdn.net/qq_43944285/article/details/124065983

版权

概念类、区别类

概念类：请简单说说事件委托原理

（1）是什么（2）应用（3）原理

区别类： localStorage与sessionStorage区别

1.1-事件委托面试点

1.什么是事件委托
- 给父元素注册事件，委托给子元素处理
2.事件委托原理：事件冒泡
3.事件委托注意点
- this : 指向父元素
- e.target : 指向触发事件的子元素
4.事件委托场景： 给动态新增元素注册委托事件

1.2-localStorage与sessionStorage区别

1.相同点
- 作用一致：用于存储数据
- 都是只能存储字符串类型数据(上限5MB)
2.不同点：存储方式不同
- localStorage : 硬盘存储 （永久存储，页面关闭还在，存在硬盘）
- sessionStorage ：内存存储 （临时存储，页面关闭了就消失）
3.localStorage与sessionStorage如何存储引用类型数据（数组和对象）
- 转json存储

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="btn1">存对象</button>
    <button class="btn2">取对象</button>
    <script>
        /* 
        json -> js :   let jsObj = JSON.parse( json格式 )
        js -> json :   let jsonStr = JSON.stringify( js对象 )
        */  

        let obj = {
            name:'ikun',
            age:30,
            sex:'男'
        }
        
        document.querySelector('.btn1').onclick = function(){
            //存 ： (1)js -> json  (2)存json
            // //(1)js->json
            // let jsonStr = JSON.stringify( obj )
            // //(2)存json
            // localStorage.setItem('user',jsonStr)

            //合写一行
            localStorage.setItem('user',JSON.stringify( obj ))
        }

        document.querySelector('.btn2').onclick = function(){
            //取: (1)取json  (2)json->js
            // //(1)取json
            // let jsonStr = localStorage.getItem('user')
            // //(2)json->js
            // let jsObj = JSON.parse( jsonStr )
            // 

            //合写一行
            let jsObj = JSON.parse( localStorage.getItem('user') )
            console.log( jsObj )
            
        }
    </script>
</body>
</html>

02-前端基础-js高级

1.1-new关键字做了哪些事情

1.创建空对象
2.this指向这个对象
3.对象赋值
4.返回实例对象

1.2-原型链相关

1.原型链作用 : 面向对象 继承
2.对象访问原型链规则：就近原则
- 先访问自己，自己没有找原型，原型没有找原型的原型，直到原型链终点。如果还找不到，属性则获取undefined，方法则报错xxx is not defined

1.3-如何判断this指向

this : 谁调用我，我就指向谁
普通函数 函数名() ： window
对象方法 对象名.方法名() ：对象
构造函数 new 函数名() : new创建的实例对象

1.4-call apply bind区别

共同点:
- 都可以修改this，第一个参数都是修改的this
不同点
- 传参方式不同： call是逐一传参， apply是数组/伪数组传参
  - 函数名.call(修改的this,参数1,参数2…)
  - 函数名.apply(修改的this,数组/伪数组)
- 执行机制不同：call和apply会立即执行函数，bind不会立即执行(返回一个修改的this之后的新函数)
  - bind会得到一个修改this后的新函数

1.5-如何判断数据类型

1. typeof有两种数据类型无法检测： null 、array (数组)
1. Object.prototype.toString.call(数据)

1.6-闭包(天天用网页回调都是 js中闭包是无处不在的)

1.闭包是什么 :
- 闭包是使用其他函数内部变量的函数（闭包 = 函数 + 其他函数内部变量）
- 闭包 = 函数 + 上下文引用
2.闭包作用 : 解决全局变量污染

1.7-递归及应用场景(循环用的多循环麻烦的时候用递归)

1.递归：在函数内部调用自己
2.递归作用：
- 浅拷贝与深拷贝
- 遍历dom树

1.8-浅拷贝与深拷贝

1.浅拷贝：拷贝地址，修改拷贝后的数据原数据也会变化
2.深拷贝：拷贝数据，修改拷贝后的数据原数据不会变化
- 推荐 json : let obj = JSON.parse( JSON.stringify( 对象 ) )
- 递归

All rivers run in to the sea

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端语言面试详解

概念类、区别类概念类：请简单说说事件委托原理（1）是什么（2）应用（3）原理区别类： localStorage与sessionStorage区别1.1-事件委托面试点1.什么是事件委托给父元素注册事件，委托给子元素处理2.事件委托原理：事件冒泡3.事件委托注意点this : 指向父元素e.target : 指向触发事件的子元素4.事件委托场景：给动态新增元素注册委托事件1.2-localStorage与sessionStorage区别1
复制链接

扫一扫