心得技巧
JavaScript★面试必问★：this指向问题、同步和异步、 JS执行机制、location对象
发布时间：2022-07-01 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript★面试必问★：this指向问题、同步和异步、 JS执行机制、location对象，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
this
this 的指向在函数定义的时候 是确定不了的 只有函数执行的时候才能确定this指向谁 一般情况下 this 的最终指向的是那个调用它的对象
<body>
<button> 按钮</button>
<script>
// this 指向问题 一般情况下 this最终指向是调用它的对象
// 1.全部作用域或者普通作用函数中 this指向全局对象window （定时器里面的 this指向window）
console.LOG(this);
function fn (){
console.log(this);
}
fn()
// 定时器 指向的也是window
// setInterval(function(){
// console.log(this);
// },1000)
// 2.方法调用中 谁调用this指向谁
VAR q = {
hello:function(){
console.log(this); //this 指向的是 q 这个对象this最终指向是调用它的对象
}
}
q.hello()
var BTn = document.querySelector('button')
btn.onclick = function(){
console.log(this); //指向的是按钮 button
}
btn.addEventListener('click',function(){
console.log(this); //指向的是按钮 button
})
// 构造函数this指向构造函数
function Fun(){
console.log(this); // this 指向的 是fun 实例对象
}
var fun = new Fun()
</script>
</body>
同步和异步
JS是单线程
- JavaScript 语言的一大特点就是 单线程 也就是说 同一时间只能做同一件事 这是因为JavaScript这门脚本语言诞生的使命所致 --JavaScript是处理页面中用户的 交互 以及操作DOM而诞生的
- 比如F1a;我们对某个DOM 元素进行添加和删除操作 不能同时进行 应该是先添加后删除
- 单线程 就意味着 所有任务需要排队 前一个任务结束 才会执行后一个任务 这样所导致的问题是 JS 执行时间过长 这样就会造成页面的 渲染不连贯 导致页面渲染加载阻塞的感觉
为了解决掉这个问题 利用多核CPU的计算能力 ，HTML5 提出Web Worker 标准 允许JavaScript脚本创建多个线程 于是 JS 中出现了同步和异步
同步
- 前一个任务结束后 在执行后一个任务 程序的执行顺序与任务排列顺序是一致的、同步的
异步
- 在执行一件任务是 会花费很长时间 在这个时间内 可以去执行其他的任务 本质区别 在这个流水线上 各个执行的顺序不同
<script>
console.log(1);
setInterval(function(){
console.log(3);
},1000);
console.log(2);
console.log('----------------');
</script>
同步任务
都是在主线程上执行 形成一个执行栈
异步任务
JS 的异步 是通过回调函数实现的的 一般而言 异步任务有三种类型 1 .普通事件，如click resize 等 2.资源加载，如load 、error 等 3.定时器，包括setInterval、setTimeout 等
执行顺序
1.先执行 执行栈中的同步任务 2.异步任务 （回调函数） 放入任务队列中 3.一旦 执行栈中的所有同步任务执行完毕 系统就会按次序读取 任务列队中的异步任务 于是被读取的异步任务结束等待状态 进入执行栈 开始 执行
console.log(1);
setInterval(function(){
console.log(3);
},0); // 注意 定时器时间 已设置为0 但是 还是会先执行 执行栈里的
console.log(2);
console.log('----------------');
由于主线程不断地获取任务 、执行任务、再获取任务 、在执行 所以这种机制被称为 事件循环 event loop
console.log(1);
document.onclick = function(){
console.log('click');
}
console.log(2);
setTimeout(function(){
console.log(3);
},2500)
location对象
window对象 给我们提供了一个location属性 用于获取或设置窗体的URL 并且可以用于 解析URL 因为这个属性 返回的是一个对象 所以我们将这个属性 也称为 location对象
URL
- 统一资源定位符 是互联网上标准的 资源地址 互联网上每个文件都有一个唯一的URL 它包含的信息指出文件的位置 以及浏览器应该怎么处理它
- URL 一般的语法格式为 PRotocol：// host [:port] / path / [?qurey]#fragment http: // www.ITcast.cn/index.html?name=andy&age=18#link
location 对象的属性
location 对象 方法
获取 URL 参数 提交到另一页面 代码练习
<body>
<form action="index.html">
姓名：<input tyPE="text" name="uname" id="">
<input type="submit" value="登录">
</form>
</body>
index页面
<body>
<div></div>
<script>
console.log(location.seArch); // ?uname = andy
// 先去掉？ substr(起始的位置，截取几个字符)
var params = location.search.substr(1) //uname = andy
console.log(params);
var arr = params.split('=')
console.log(arr);
var div = document.querySelector('div')
div.innerHTML=arr[1] + '欢迎您'
</script>
脚本宝典总结
以上是脚本宝典为你收集整理的JavaScript★面试必问★：this指向问题、同步和异步、 JS执行机制、location对象全部内容，希望文章能够帮你解决JavaScript★面试必问★：this指向问题、同步和异步、 JS执行机制、location对象所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的心得技巧相关文章
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程