客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
JS三座大山同步异步前端中只有两个操作是异步的:
编译器解析+执行代码原理: 1.编译器从上往下逐一解析代码 2.判断代码是同步还是异步
3.等所有同步执行完毕开始执行异步 同步异步区别api : 异步有回调，同步没有回调 性能 ： 异步性能好（不阻塞线程） 同步会阻塞线程 顺序 ： 同步有序执行，异步无序执行 另:回调函数：如果一个函数的参数是一个函数，那么这个参数函数叫做回调函数 作用域、闭包函数作用域链
块作用域1.一个 2.对于let而言，默认的全局也称之为0级块作用域，然后除了对象以外，大括号开辟新的块作用域，0级上开辟的就是1级，1级里开辟的就是2级以此类推 3.跟我们之前学的函数作用域链是一样的，只不过函数作用域只有函数开辟函数作用域，块作用是大括号开辟块作用域，var认函数作用域，let认块级作用域 闭包闭包就是一个函数, 能够读取其他函数内部变量的函数 代码示例:
function foo () {
// foo的内部变量
let num = 10
// 这个inner就叫闭包
function inner() {
console.log(num)
}
}
闭包有什么用呢？
闭包和直接返回值有差别直接返回值，其实本质上只是返回这个值的数据，后面的更改跟函数内部的变量没有任何关系 所以用闭包，就能让外界间接的访问到函数内部的变量 闭包的几种写法简单来说：只要符合闭包特征的都算闭包 闭包：是一个函数，一个能让外界访问函数内部变量的函数 闭包作用1：延长变量生命周期生命周期： 指从声明到销毁的周期 全局变量生命周期 从网页打开到网页结束 局部变量生命周期 从它所在的作用域开始到结束 正是因为闭包能延长变量的生命周期，所以外界依然能一直访问局部变量 所以大量使用闭包，可能会导致内存泄漏 内存泄漏：一个数据后面已经不需要用了，但是它还占着内存空间，没有被回收 解决办法：
闭包作用2： 限制访问把变量变为局部变量外界就无法直接访问 它只能通过我们写的闭包（桥梁）来间接访问，这样做我们就可以对闭包里面做一些限制，这样就起到了限制访问的目的 闭包调用注意事项注意： 产生闭包的外层函数调用多少次，就会产生多少个闭包，那么到时候操作的是不同的数据， 如果产生闭包的外层函数调用1次，那么就只产生1个闭包，到时候操作的数据还是同一个 闭包解决用var导致下标错误的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
width: 30px;
height: 30px;
background-color: yellow;
line-height: 30px;
text-align: center;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 以前有let吗？没有，所以我们看用var如何解决下标问题
// 找到所有的li
var lis = document.getElementsByTagName('li')
for (var i = 0; i < lis.length; i++) {
// 现在这里的i，只有1个变量，所以最终点击的时候，大家访问的都是一个i
// 而i最终值是5，所以无论点谁都是5
// 解决办法：我有5个li就要有5个变量，变量的值分别是0,1,2,3,4
// 如何才能产生5个不一样的变量？就要开辟函数作用域
(function () {
// 因为这个循环会产生5个自执行函数
// 就意味着有5个不同的index变量
// 然后它的值需要分别是0,1,2,3,4，而i的值刚好是0,1,2,3,4
// 所以把i赋值给index即可
var index = i
// 给每个li加点击事件
lis[i].onclick = function () {
alert(index)
}
})()
}
</script>
</body>
</html>
投票机
// 要做一个能投票，能得到当前票数的功能
function votor() {
// 有一个变量，用来存票数
let ticket = 0
return {
getTicket: function () {
console.log('当前票数为：' + ticket)
},
// 投票
add: function () {
ticket++
}
}
}
let tp = votor()
tp.add()
tp.add()
tp.add()
tp.add()
tp.getTicket()
闭包两个面试题
// 思考题 1：
window.name = "The Window";
let object = {
name: "My Object",
getNameFunc: function () {
return function () {
return this.name;
};
}
};
console.log(object.getNameFunc()());
// 思考题 2：
window.name = "The Window";
let object = {
name: "My Object",
getNameFunc: function () {
let that = this;
return function () {
return that.name;
};
}
};
console.log(object.getNameFunc() ());
原型、原型链原型对象作用: 构造函数中共有的属性和方法添加到原型对象中，可以节省内存 原型链无论任何一个对象开始出发, 按照 proto 开始向上查找, 最终都能找到 Object.prototype, 这个使用 完整原型链图示意图前置知识: 每一个对象都有 每一个对象都有 函数也是对象; 当一个对象, 没有准确的构造函数来实例化的时候, 我们都看作是内置构造函数 Object 的实例;Object的protype是顶级原型对象, 他的 Function是顶级构造函数, 它自己是自己的构造函数, 同时自己是自己的实例对象(通俗来说, 就是它自己创建了自己) 完整原型示意图: 以上就是JS难点同步异步的作用域与闭包原型及原型链详解的详细内容，更多关于JS同步异步作用域与闭包原型及原型链的资料请关注极客世界其它相关文章！ |
请发表评论