【JavaScript的执行机制简述及BOM的对象-学习小结】
目录
- 一、JavaScript的执行机制
-
- 1、JavaScript是弱类型语言（特征）
- 2、JavaScript是脚本语言，边解释边执行，效率比较低
- 3、单线程
- 4、同步与异步
- 二、location对象
-
- 1、url:统一资源定位符
- 2、常用属性
- 3、常用方法
- 三、history对象
-
- 1、常用属性
- 2、常用方法
一、JavaScript的执行机制
1、JavaScript是弱类型语言（特征）
（1)变量不需要指定类型。
（2)变量的类型由给变量的值决定。
2、JavaScript是脚本语言，边解释边执行，效率比较低
3、单线程
单线程：JavaScript程序是单线程的，同一时间只能做一件事。
程序：可执行的代码，是静态的。
进程：进程是程序的一次动态运行，一个进程可以占用内存空间的，提高CPU的利用率
线程：它是一个更小的进程，抢占内存空间的，更加提高CPU的利用率。
4、同步与异步
同步：前一个任务执行结束后在执行后一个任务，程序顺序和任务的排列顺序一致。
console.log(1)
console.log(2)
console.log(3)
异步：在做一件事情的同时，可以去处理其他的事情
console.log(1)
setTimeout(function(){console.log(3)},3000)
console.log(2)
6、执行机制：
（1）执行栈：主程序的执行流程（单线程的）
（2）任务栈：回调函数（异步执行的函数）
☀️举个例子：
console.log(1)
setTimeout(function(){
console.log(3)
},0)
for(let i=0,str='';i<90000;i++){
str+=i
}
console.log(2)
二、location对象
1、url:统一资源定位符
协议：//主机名：端口号/路径？参数
(1)http://localhost：8089/findAll?id=1002&name=张三
localhost:代表本地机，对应的ip地址是127.0.0.1
?:它是分隔符，作用是将路径和参数隔离
&：它也是分隔符，作用是将参数与参数分开。
id和name是参数名：参数是可变的
1002和张三是参数值
(2)http://www.hao123.com—>http://www.hao123.com:80/index.html
http:协议
www.hao123.com:域名代表主机（主机名），也可以是ip地址。
80：端口号/路径
index.html:默认文件名
2、常用属性
(1)location.href:完整的url
<body>
<button>跳转</button>
<script>
let btn=document.querySelector('button')
btn.addEventListener('click',function(){
location.href='http://www.hao123.com'
})
</script>
</body>
点击跳转按钮，跳转到所填写的链接页面。
(2)location.search:url中"?"之后的部分（query部分）
form表单页面：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<form action="index.html">
用户名：
<input type="text" name="userName">
<input type="submit" value="登录"/>
form>
body>
html>
index.html模拟服务器页面：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务器title>
head>
<body style="text-align: center;">
<div>div>
<script>
console.log(location.search)//输出URL后面的参数query（？后面的部分）
script>
body>
html>
往form表单输入值后，用location.search属性在控制台输出url中"?"之后的部分（query部分）也就是参数部分如下：
(3)location.host:代表主机名和端口号。
(4)location.port:代表端口号。
(5)location.hostname:返回一个主机名字。
(6)location.protocol：代表协议。
(7)location.pathname：代表路径。
代码演示：
index.html代码段如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务器title>
head>
<body style="text-align: center;">
<div>div>
<script>
console.log(location.search) //输出url中的query(?后面的部分)
let params = location.search.substr(1)//截取子串:从索引1的位置开始到串末尾(去掉?)
console.log(params)
let arr = params.split('=') //进行字符串分割,将参数名和参数值分开
console.log(arr)
document.querySelector('div').innerHTML = arr[1] + '!欢迎您!'
console.log('主机名：',location.hostname)
console.log('端口号：',location.port)
console.log('协议：',location.protocol)
console.log('路径：',location.pathname)
script>
body>
html>
展示如下：
3、常用方法
三、history对象
1、常用属性
| 属性 | 说明 |
|---|---|
| history.length | 返回历史历史列表中的网址数 |
2、常用方法
| 方法 | 说明 |
|---|---|
| back() | 加载history列表的前一个url。 |
| forward() | 加载history列表的url。 |
| go() | 加载history列表中的某个具体页面 |