[JavaScript]走进 JAVASCRIPT 黑洞
生活随笔
收集整理的這篇文章主要介紹了
[JavaScript]走进 JAVASCRIPT 黑洞
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
建議使用
let和const代替var
體驗(yàn)typeof
var a = 'dust'
console.log(typeof a)
var b = 99
console.log(typeof b)
var c = []
console.log(typeof c)
var d = { hello: 1 }
console.log(typeof d)
console.log(typeof d.hello)
// e沒有定義,直接輸出它的類型,會是什么呢?
console.log(typeof e)
運(yùn)行結(jié)果:
e沒有定義,但是typeof e輸出了undefined,這就是JS的特性:變量提升
但是如果執(zhí)行如下語句
console.log(e)
則會報(bào)錯(cuò).
作用域問題
建議
let a = 'hello,outside'
function fun() {let a = 'hello,inside'console.log(a)
}
fun()
console.log('after:', a)
運(yùn)行結(jié)果:
這個(gè)就不多說了,看懂就好.
let a = 'hello,outside'
console.log('before:', a)function fun() {a = 'hello,inside'console.log(a)
}
fun()
console.log('after:', a)
暫時(shí)性死區(qū)
function run(a = b, b = 3) {}
run()
反過來:
function run(a = 3, b = a) {console.log('success!')
}
run()
報(bào)錯(cuò)消失.
全局污染
- 這是一個(gè)非常壞的習(xí)慣,一定要先
let或const,再使用!
// 全局污染:這是一個(gè)非常壞的習(xí)慣,比熬夜還壞!
function fun() {a = 'dust'console.log('inside:', a)
}
fun()
// 你已經(jīng)污染到了函數(shù)外!
console.log('你已經(jīng)污染到了函數(shù)外! outside:', a)
var a = 'outside'
console.log('outside:', a)
塊作用域
- 明白為什么要用let,不用var
var i = 99
for (var i = 0; i < 3; i++) {console.log('i =', i)
}
console.log('outside i =', i)
//這好嗎?這不好!let j = 99
for (let j = 0; j < 3; j++) {console.log('j =', j)
}
console.log('outside j =', j)
- var不具有塊作用域,也是一種污染,這樣很不好.
- let具有塊作用域,看運(yùn)行結(jié)果,就很美好.
.bind(window)()的使用
- 立即執(zhí)行函數(shù),也是有塊作用域的,不會污染到其它代碼
test5.js
(function () {var $ = (window.$ = {})$.web = 'dust'var url = 'dust,hello'$.getUrl = function () {return url}
}.bind(window)())
test.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>Document</title><script src="./test5.js"></script></head><body><script>console.log('in text.html:', $.getUrl())</script></body>
</html>
輸出:
用花括號配合let使用:優(yōu)化代碼
{let $ = (window.$ = {})$.web = 'dust'let url = 'dust.com'let site = 'DUST'$.getUrl = function () {return url}
}
運(yùn)行結(jié)果
const的使用
以下代碼會發(fā)生什么?
const a = 'dust1'
const a = 'dust2'
會報(bào)錯(cuò)
const不允許修改嗎?
const a = 'dust1'
function fun() {const a = 'dust2'console.log(a)
}
fun()
沒有報(bào)錯(cuò)
Window全局對象污染
- 獲取屏幕左側(cè)距離
console.log(window.screenLeft)
拖動一下,刷新,值會變
如果執(zhí)行以下代碼呢?
var screenLeft = 99
console.log(window.screenLeft)
不會再隨著拖動而改變
但是如果使用let,世界就不一樣了(let真美妙啊!)
let screenLeft = 99
console.log(window.screenLeft)
console.log(screenLeft)
重復(fù)聲明
使用var進(jìn)行重復(fù)聲明的時(shí)候不會報(bào)錯(cuò),但這并不是什么好事!
var a = 1
//然后我寫了很多代碼,忘記了自己曾經(jīng)聲明過a
var a = 2
console.log('var重復(fù)使用不報(bào)錯(cuò)(但是這并不好!)')
輸出
那如果用let呢
let a = 1
let a = 2
console.log('let聲明')
報(bào)錯(cuò)了,但這是好事
所以,用let代替var吧!
Object.freeze凍結(jié)變量
const HOST = {url: 'www.baidu.com',port: 8080,
}
Object.freeze(HOST)
HOST.port = 80
console.log(HOST)
在freeze后,不能再對其進(jìn)行修改
傳值和傳地址
let a = 1
let b = a
console.log(a, b)
b = 3
console.log(a, b)let e = { name: 'dust' }
let f = e
console.log(e, f)
f.name = 'Miss.Corleone'
console.log(e, f)
- 對于類型為number的a和b而言,是傳值,使用的不同的地址
- 而對于Object類型的e和f而言,是傳址,兩個(gè)變量使用的相同的地址(這是一個(gè)大坑!)
undefined
-
就和我沒有對象這件事一樣,都是undefined
-
這段代碼我沒法跟你解釋,老師說"交了一個(gè)女朋友,再交第二個(gè),總得適應(yīng)一下,不能拿對第一個(gè)女朋友一樣的態(tài)度對第二個(gè)女朋友."
-
但我一個(gè)都沒有,所以理解不了
-
看代碼吧
function show(name) {console.log(name)
}
console.log(show())
輸出
- 原來兩個(gè)女朋友都是undefined嗎,告辭
- (所以大家不要處對象?)
嚴(yán)格模式
- 好的代碼習(xí)慣需要養(yǎng)成
- 但是路上總有一些"馬路殺手"會闖紅燈.闖紅燈一定會出事嗎?還不一定.但是闖紅燈是不好的,所以需要交規(guī)
- 嚴(yán)格模式就相當(dāng)于這個(gè)交規(guī)
- 嚴(yán)格模式可以幫我們遵守更多的規(guī)則
'use strict'function fun() {a = 10
}
console.log(a)
'use strict'
let private = 10
注意,此時(shí)private被保留,所以不能當(dāng)做變量
嚴(yán)格模式的作用域
let public = 10
console.log(public)function fun() {'use strict'a = 10
}
console.log(a)let private = 10
嚴(yán)格模式會管它出現(xiàn)以下的代碼,而不會管它以上的代碼.
總結(jié)
以上是生活随笔為你收集整理的[JavaScript]走进 JAVASCRIPT 黑洞的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 地下室建冷藏室多少钱一平方
- 下一篇： [JS]请给Array本地对象增加一个原