概念类、区别类
概念类: 请简单说说事件委托原理
(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
- 都可以修改this,第一个参数都是
- 不同点
- 传参方式不同: call是逐一传参, apply是数组/伪数组传参
- 函数名.call(修改的this,参数1,参数2…)
- 函数名.apply(修改的this,数组/伪数组)
- 执行机制不同:call和apply会立即执行函数,bind不会立即执行(返回一个修改的this之后的新函数)
- bind会得到一个修改this后的新函数
- 传参方式不同: call是逐一传参, apply是数组/伪数组传参
1.5-如何判断数据类型
-
- typeof有两种数据类型无法检测: null 、array (数组)
-
- 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( 对象 ) )
- 递归