this
this 的指向在函式定義的時候 是確定不了的 只有函式執行的時候才能確定this指向誰 一般情況下 this 的最終指向的是那個呼叫它的物件
- .全部作用域或者普通作用函式中 this指向全域物件window （定時器里面的 this指向window）
- 方法呼叫中 誰呼叫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而誕生的
- 比如：我們對某個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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/337726.html
標籤：其他
上一篇：Java專案:前后端分離網上手機商城平臺系統設計和實作(java+vue+redis+springboot+mysql+ssm)