/*
* web安全攻防专题
* ------------------------------------------------------------------------
* xss:跨站脚本攻击（XSS，Cross-site scripting）
*
*
* 1、原理：利用系统漏洞，将具有恶意攻击行为的可执行脚本植入系统，且会自动
* 执行。从而达到破坏的目的
*
* 2、类型：反射型、持久型、DOM型
*
* 关于预防xss攻击，请记住一个神论：永远不要相信前端用户输入的任何信息
*
*
* csrf:跨站请求伪造（CSRF，Cross-site request forgery）
* 攻击者通过各种方法伪造一个请求，模拟用户在系统内的行为活动，从而达到修改用户数据或其他目的
*
* 关于防御：1、尽可能使用POST提交请求； 2、对请求进行身份认证
*
*
*
* */
/*
* 跨域专题
* ------------------------------------------------------------------------
* 1、什么情况下产生跨域？
* http://www.a.com:8000/
* 当协议、主机、端口三者有任一一个不同，视为跨域
*
* 2、跨域出现的原因？
* 根本原因是安全问题，即“同源策略”，禁止非同域下的请求产生
* 同源策略涉限制主要有：
* a、ajax
* b、dom操作
* c、本地存储
* 以上这三种操作均有跨域限制
*
* 3、跨域解决方案
* a、jsonp
* 原理：
* b、服务端设置响应头，即白名单
* access-control-allow-origin:"*" //任意域
* access-control-allow-origin:"http://www.a.com" //只允许www.a.com域
* c、nginx 反向代理
*
*
*
*
*
*
* */
/*
* 深浅拷贝专题（深浅只针对引用类型数据展开探讨）
* ------------------------------------------------------------------------
* 浅拷贝-只会拷贝对象的引用地址（内存地址），新旧对象共享同一内存地址，只有一个对象
* 深拷贝-拷贝的是对象自身，而不是内存地址，是一个全新的独立的对象
*
*
*
*
* */function deepClone(source) {
var target = {}, toString = Object.prototype.toString
for (var prop in source) {
if (source.hasOwnProperty(prop)) {
if (toString.call(source[prop]) === "[object Object]") {
// 引用类型-执行深拷贝
target[prop] = deepClone(source[prop])
} else {
//浅拷贝
target[prop] = source[prop]
}
}
}
return target}
/*
* parseInt专题
* ------------------------------------------------------------------------
* 描述：是一个内置的函数，
* 作用：可以把一个字符串转成整形，parseInt的返回值只有两种情况，a、十进制整数 b、NaN
* 有两个参数
* a、第一个参数表示待转换的字符串（必须是字符串，如果不是字符串，则会发生隐式类型转换
* 然后对转换后的字符串进行截取
* ）
*
* b、第二个参数表示待转换的字符串的进制(默认是10进制)
* 该值的范围介于[2,36]，如果进制不在此范围内的，一律返回NaN
*
* 注意：基数如果不是数值，则发生隐式类型转换，如果基数是NaN，则默认基数是10
*
* 特别注意，这里的默认进制10，是有条件的
* 条件1，必须没有明确指定进制数
* 条件2，待转换的字符串，不是以0或0x打头的
*
* 在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。
* 如果没有明确指定进度，对于"0”打头的字符串在“ES5之前”认为是8进制
* 对于"0”打头的字符串在”ES5之后“认为是10进制
*
* 如果有明确指定数的进制，则以指定的进度为准
*
* var n=parseInt("11",2) //表示字符串"11"是2进制的数
* var n=parseInt("11",8) //表示字符串"11"是8进制的数
* var n=parseInt("11") //表示字符串"11"是10进制的数
*
* //注意了，radix是0、10均表示10进制的数，省略的时候进制可能是8、10、16
* var n=parseInt("11",0) //表示字符串"11"是10进制的数
* var n=parseInt("11",NaN) //表示字符串"11"是10进制的数
* var n=parseInt("11",10) //表示字符串"11"是10进制的数
*
*
* 使用方法总结：
* 1、看参数1是否是字符串，如果不是则先转成字符串（如果是非字符串类型，会发生隐式类型转换）
* 2、先确定进制
* 3、根据进制截取最终的字符串，如果最终是空字符串，则返回NaN
* （截取的规则是这样的，从字符串的首位(如果是0的8进制数，则从0之后开始截取，有点特殊；如果是0x的16进制数，则从0x之后开始截取，有点特殊)
* （如果是空格、+会忽略哦，如果是-则会输出）开始，依次向后截取，直到“非数字”或者“非指定进制范围内”的字符截止）
* 4、转成10进制
*
* var num = parseInt(321, 0) //321
* var num = parseInt(321, NaN) //321
* var num = parseInt(321, 2) //NaN
* var num = parseInt("210", 3)//210
* var num = parseInt("329", 6)//20
* var num = parseInt("012", 0)//12
* var num = parseInt("0x12")//18
* var num = parseInt(parseInt,16)//15 这里为什么是15呢？因为parseInt是一个函数，其实这里的值是"function(){}"
* var num = parseInt(alert,16)//15
* var num = parseInt(console.log,16)//15
* var num = parseInt(0.000005)//0，直接使用“字面量”表示
* var num = parseInt(0.0000005)//5,这里返回5是因为，小数位后面长度长多6位时，采用科学基数法表示，即”5e-7“
*
* =====================================================================
* 对于数值型而言，小数位前长度大于21或小数位后长度大于6时，均使用科学计数法表示
* =====================================================================
*
*
*
* 执行过程分析：（第一个参数命名为参数1，第二个参数命名为参数2）
* -----------------------------------------------------
* 1、查看参数1是否是字符串，如果不是，则会发生隐式类型转换
* 2、确定基数（进制）
* a、有明确指定基数，则以指定的基数为准
* b、没有明确指定基数，则以参数1进行判断来确定基数，
* 首先，参数1字符串是以“0”打头，则es5以前的版本中，基数为8，es5之后的版本中，基数为10
* 其次，参数1字符串是以“0x"打头，则基数是16，
* 最后，其他情况，基数是10
* 3、以确定的基数来对参数1字符串进行有效性截取（非数字或基数范围外的均视为非法字符）
* 4、如果截取的字符串是空字符串，“”则返回NaN
* 如果是非空有效的字符串，则按照进制规则转换成10进制的数
*
* 0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
* 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
*
* */
/*
* eval函数专题
* ------------------------------------------------------------------------
* eval是一个内置的函数
* 作用：当eval函数执行时，会把传入的字符串（只能传入原始字符串，不能是字符串包装对象）
* 参数当做JS代码执行
*
*
* eval("alert(100)") //100
*
*
*
* */
/*
* 事件模型专题
* ------------------------------------------------------------------------
* 什么是事件？事件就是一个约定好的动作，当将来做出了某个动作时，应该做什么事情。
*
* 在JS中事件模型分为三种：
* 1、DOM0（原始事件模型）
* 2、DOM2
* 3、IE事件模型
*
* 1、DOM0原始事件模型，有两种触发方式：
* a、ppppp
* b、document.getElementById(".box").onclick=function(){}
* 优点：所有浏览器都支持
* 缺点：没有事件流（没有冒泡、捕获），只能绑定一次，后面绑定的事件会覆盖前面的
*
* 2、DOM2,是由w3c制定的标准规范，在这个事件模型中，一次事件包含三个阶段
* a、捕获阶段
* b、目标阶段
* c、冒泡阶段
*
* oDiv.addEventListener("click",fn,false)//绑定事件
* oDiv.removeEventListener("click,fn,false)//解绑事件
*
*
* 3、IE事件模型
*
* oDiv.attachEvent("onclick",fn)
* oDiv.detachEvent("onclick",fn)
*
*
*
*
* */
/*
* 函数防抖与函数节流专题
* ------------------------------------------------------------------------
* 无论函数防抖或函数节流，都是为了解决在一个事件内因高频触发动作而带来的性能问题
*
*
*
* */
//函数防抖-代码实现
function debounce(fn, delay) {
var timer
return function () {
var context = this
var args = [].slice.call(arguments)
clearTimeout(timer)
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}
//函数节流-代码实现
function throttle(fn, delay) {
var timer
return function () {
var context = this
var args = [].splice.call(arguments)
if (timer) return
timer = setTimeout(function () {
fn.apply(context, args)
clearTimeout(timer)
}, delay)
}
}
/*
* 自定义事件专题
* ------------------------------------------------------------------------
*
*
*
* */
function Event() {
//事件列表
this.handlers = {}
}
Event.prototype = {
constructor: Event,
//绑定事件
on: function (type, handler) {
if (!this.handlers[type]) {
this.handlers[type] = []
}
this.handlers[type].push(handler)
},
//解绑事件
off: function (type, handler) {
if (this.handlers[type]) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type]
for (var i = 0; i < handlers.length; i++) {
if (handlers[i] === handler) {
handlers.splice(i, 1)
break
}
}
}
}
},
//触发事件
fire: function (event) {
if (!event.target) {
event.target = this
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type]
handlers.forEach(handler => {
handler(event)
})
}
}
}
function handler() {
}
var event = new Event()
event.on("aa", handler)
event.off("aa")
event.fire({type: "aa", message})
/*
* 闭包专题
* ------------------------------------------------------------------------
* 描述
* 在函数内部的标识符被子级执行上下文所使用时，这时在内存中就会形成一个闭包
* 条件
* 函数声明时有嵌套关系，子函数内有
*
*
* */
/*
* 性能优化专题
* ------------------------------------------------------------------------
* 代码层面
* 变量缓存（合理设置缓存）
* 多局部变量、少全局变量（减少作用域链或原型链查找的过程）
* 减少DOM操作(避免重绘与重排)
* 减少闭包
* 函数防抖节流
* JS文件放在底部
* 资源层面
* 合并、压缩、精灵图、cdn加速
*
* */
/*
* JS数据类型专题
* ------------------------------------------------------------------------
* 在JS中数据类型分为，基本数据类型、引用数据类型
* 基本数据类型（特点）
* 1、体积固定：值不可变
* 2、体积小
* 3、存放在栈内存中
*
* 引用数据类型（特点）
* 1、体积不固定：值可变
* 2、体积大
* 3、存放在堆内存中
*
* 八大数据结构
* 数组
* 堆、栈、队列
* 链表、散列表
* 树
* 图
*
*
* */
/*
* 内存泄漏与内存溢出专题
* ------------------------------------------------------------------------
* 内存泄漏（内存分配出去后，即没有正常使用，又无法收回，那么就认为这块内存泄漏啦）
* 正常情况下，在程序执行时，系统会为其分配一定的内存空间，当程序执行完毕后，代码被销毁，
* 内存空间会被回收（这里的销毁代码-执行上下文被弹出执行栈）
* 但是现在出现了这么一个情况，就是程序执行完后，代码没有被销毁，内存无法被回收
* 原本内存有100M，但是现在有20M的内存无法被使用
*
* 哪些情况下回造成内存泄漏？
* 1、闭包
* 2、对象互相引用
*
* 内存溢出
* 可使用的内存不足
* 比如说，执行程序需要50M内存，但是现在可供使用的内存只有30M，这么这个时候就发生了
* 内存溢出
*
*
* */
/*
* JS内存管理专题
* ------------------------------------------------------------------------
* JS中是如何对内存进行管理的？
* 在JS中对内存的管理是通过垃圾回收机制来实现的，垃圾回收器会不定时间对已分配出去的且已不再
* 使用的内存空间进行回收。
*
* 要求：
* 对已分配出去且不再使用的内存一定要及时进行回收，否则会造成内存泄漏
* 注意啦，内存泄漏有两种表现形式，1是内存根本无法收回，2是过了很长时间才把内存收回
*
* JS内存管理是通过垃圾回收技术来实现的，
* 垃圾回收器会每隔固定时间对已分配出去且已不再使用的内存进行回收
*
* 如果内存无法收回或者收回耗时过长
* 其中无法收回，肯定会造成内存泄漏
* 长时间才收回的，可能会造成内存泄漏
*
*
* */
/*
*
* A instanceof B
* 在A的原型链中是否有B对象的原型（注意是B的原型，不是B自身）
*
* A.isPrototypeOf(B)
* 判断A是否是B的原型
*
* A=Object.create(B)
* 以B对象为原型创建一个对象A，也就是说B是A的原型
* Object.create(null) instanceof Object //false
* (()=>{}) instanceof Object //true
*
* */
/*
* JS设计模式
* ------------------------------------------------------------------------
* 构造模式
* 单例模式
* 观察者模式
*
*
*
*
* */
/*
* eval专题
* ------------------------------------------------------------------------
* eval()这个函数可以执一段JS程序
* 默认情况下其执行上下文是大年eval函数所处的
* 执行上下文
* 但是一旦使用了别名，则其执行上下文就是全局
* 执行上下文了
*
* 那么到底哪些是别名呢？
* 1、var e=eval
* 2、window.eval
* 3、(eval,eval).call()
* 4、(1,2,3,eval).call()
* 以上这些别名时，其执行上下文均是全局执行上下文
*
* */
eval("console.log(1)")
/*
* with专题
* ------------------------------------------------------------------------
* 当我们需要访问一个对象的多个属性时，
* 我们往往是这样写的，
* obj.xx
* ...
* 那么能不能不写这些obj.xxx呢？
* 答案是：当然可以
* 解决方法：使用with劫持一个对象
*
* with代码块中中程序在查找一个变量时
* 是从with劫持的对象开始，即obj开始
* 如果找不到，在沿着作用域链查找
* with代码块之外的程序还是按照原来的
* 方式沿着作用域链查找
*
*
* 大结论：with是原型链和作用域链的大拼接(很牛逼啊，居然将两条链子连接起来了)
* 扩展了作用域
*
* 使用了with后,变量查找顺序：对象 ——> 原型链 ——> 作用域链
*
* 不推荐使用，效率低下
*
*
* */
var a=10
var obj={
a:20
}
var fn=200
Object.setPrototypeOf(obj,{
// fn:100
})
with(obj){
alert(fn)
// with代码块中的查找机制是[原型链,作用域链]
var c=300 //这里声明了c
}
alert(a)
/*
* Reflect专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* Proxy专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* WebSocket专题
* ------------------------------------------------------------------------
*
*
*
* */
const URL = "wss://echo.websocket.org/"
if ('WebSocket' in window) {
// 检测是否支持WebSocket
const socket = new WebSocket(URL)
//指定期望返回数据的类型
socket.binaryType = "blob"
if (socket.bufferedAmount == 0) {
//检测剩余数据还有多少
}
//连接成功
socket.onopen = function () {
//向服务端发送消息
socket.send("Hello")
}
//接收到服务端返回的消息
socket.onmessage = function (e) {
const {data} = e
alert(data)
socket.close()
}
//关闭连接
socket.onclose = function () {
console.log("close");
}
//连接失败
socket.onerror = function () {
console.log("error");
}
} else {
// 不支持
console.log("不支持");
}
/*
* Object专题
* ------------------------------------------------------------------------
* Object.setPrototypeOf(obj,prototype) 操作的是__proto__,而不是prototype
*
*
*
* */
/*
* JS函数声明与函数表达式专题
* ------------------------------------------
* 1、函数声明
* a、必须以function关键字打头（福脑垂体欧尼前面不能有任何其他的字符）
* b、必须有名称
* 可以预解析
*
*
* 2、函数表达式
* 不是以function关键字打头，
* 名称可有可无
* 如果有名称，则名称只能在函数体内部可以访问到
* 不可以被预解析
*
*
* 函数声明：function aaa(){} （这种就是函数声明）
*
* 函数表达式：
* var a = function aaa(){} : 命名函数表达式
* var a = function (){} ：匿名函数表达式
* (function aaa(){}) : 表达式
*
* 以下六种都是函数表达式（这六种是独立函数表达式+赋值函数表达式）
*
* var run=function(){} //匿名赋值函数表达式
* var run=function Run(){} //具名赋值函数表达式
*
* +function aaa(){} : 具名独立函数表达式
* -function aaa(){} : 具名独立函数表达式
* !function aaa(){} : 具名独立函数表达式
* ~function aaa(){} : 具名独立函数表达式
* (function aaa(){}) : 具名独立函数表达式
* void function aaa(){} : 具名独立函数表达式
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */
/*
* 专题
* ------------------------------------------------------------------------
*
*
*
* */