[JavaScript]走进 JAVASCRIPT 黑洞

最新推荐文章于 2024-03-29 11:10:38 发布

CN-Dust

最新推荐文章于 2024-03-29 11:10:38 发布

阅读量1.9k

点赞数 7

分类专栏：前端学习文章标签： javascript html5 node.js

本文链接：https://blog.csdn.net/qq_36286039/article/details/120167248

版权

前端学习专栏收录该内容

83 篇文章 1 订阅

订阅专栏

建议使用let和const代替var

体验`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)

运行结果:
在这里插入图片描述
e没有定义,但是typeof e输出了undefined,这就是JS的特性:变量提升
但是如果执行如下语句

console.log(e)

则会报错.

作用域问题

建议

let a = 'hello,outside'
function fun() {
  let a = 'hello,inside'
  console.log(a)
}
fun()
console.log('after:', a)

运行结果:
这个就不多说了,看懂就好.
在这里插入图片描述

let a = 'hello,outside'
console.log('before:', a)

function fun() {
  a = 'hello,inside'
  console.log(a)
}
fun()
console.log('after:', a)

在这里插入图片描述

暂时性死区

function run(a = b, b = 3) {}
run()

在这里插入图片描述
反过来:

function run(a = 3, b = a) {
  console.log('success!')
}
run()

在这里插入图片描述
报错消失.

全局污染

这是一个非常坏的习惯,一定要先let或const,再使用!

// 全局污染:这是一个非常坏的习惯,比熬夜还坏!
function fun() {
  a = 'dust'
  console.log('inside:', a)
}
fun()
// 你已经污染到了函数外!
console.log('你已经污染到了函数外! 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具有块作用域,看运行结果,就很美好.

.bind(window)()的使用

立即执行函数,也是有块作用域的,不会污染到其它代码

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使用:优化代码

{
  let $ = (window.$ = {})
  $.web = 'dust'
  let url = 'dust.com'
  let site = 'DUST'
  $.getUrl = function () {
    return url
  }
}

运行结果
在这里插入图片描述

const的使用

以下代码会发生什么?

const a = 'dust1'
const a = 'dust2'

在这里插入图片描述
会报错
const不允许修改吗?

const a = 'dust1'
function fun() {
  const a = 'dust2'
  console.log(a)
}
fun()

在这里插入图片描述
没有报错

Window全局对象污染

获取屏幕左侧距离

console.log(window.screenLeft)

在这里插入图片描述
拖动一下,刷新,值会变

如果执行以下代码呢?

var screenLeft = 99
console.log(window.screenLeft)

在这里插入图片描述
不会再随着拖动而改变
但是如果使用let,世界就不一样了(let真美妙啊!)

let screenLeft = 99
console.log(window.screenLeft)
console.log(screenLeft)

在这里插入图片描述

重复声明

使用var进行重复声明的时候不会报错,但这并不是什么好事!

var a = 1
//然后我写了很多代码,忘记了自己曾经声明过a
var a = 2
console.log('var重复使用不报错(但是这并不好!)')

输出
在这里插入图片描述
那如果用let呢

let a = 1
let a = 2
console.log('let声明')

在这里插入图片描述
报错了,但这是好事
所以,用let代替var吧!

Object.freeze冻结变量

const HOST = {
  url: 'www.baidu.com',
  port: 8080,
}
Object.freeze(HOST)
HOST.port = 80
console.log(HOST)

在freeze后,不能再对其进行修改
在这里插入图片描述

传值和传地址

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而言,是传址,两个变量使用的相同的地址(这是一个大坑!)

undefined

就和我没有对象这件事一样,都是undefined
这段代码我没法跟你解释,老师说"交了一个女朋友,再交第二个,总得适应一下,不能拿对第一个女朋友一样的态度对第二个女朋友."
但我一个都没有,所以理解不了
看代码吧

function show(name) {
  console.log(name)
}
console.log(show())

输出
在这里插入图片描述

原来两个女朋友都是undefined吗,告辞
(所以大家不要处对象?)

严格模式

好的代码习惯需要养成
但是路上总有一些"马路杀手"会闯红灯.闯红灯一定会出事吗?还不一定.但是闯红灯是不好的,所以需要交规
严格模式就相当于这个交规
严格模式可以帮我们遵守更多的规则

'use strict'

function fun() {
  a = 10
}
console.log(a)

在这里插入图片描述

'use strict'
let private = 10

注意,此时private被保留,所以不能当做变量
在这里插入图片描述

严格模式的作用域

let public = 10
console.log(public)

function fun() {
  'use strict'
  a = 10
}
console.log(a)

let private = 10

在这里插入图片描述
严格模式会管它出现以下的代码,而不会管它以上的代码.

CN-Dust

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
6
评论
[JavaScript]走进 JAVASCRIPT 黑洞

建议使用let和const代替var体验typeofvar a = 'dust'console.log(typeof a)var b = 99console.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)运行结果.
复制链接

扫一扫