[JavaScript]走进 JAVASCRIPT 黑洞
建议使用
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
严格模式会管它出现以下的代码,而不会管它以上的代码.
[JavaScript]走进 JAVASCRIPT 黑洞相关推荐
- php javascript对象,JavaScript 对象
JavaScript 对象 JavaScript 对象是拥有属性和方法的数据. 真实生活中的对象,属性和方法 真实生活中,一辆汽车是一个对象. 对象有它的属性,如重量和颜色等,方法有启动停止等: 对象 ...
- JavaScript（三）—— JavaScript 函数/JavaScript 作用域/JavaScript 预解析/JavaScript 对象
本篇为 JavaScript 系列笔记第三篇,将陆续更新 JavaScript(一)-- 初识JavaScript/注释/输入输出语句/变量/数据类型 JavaScript(二)-- JavaScri ...
- 精通javascript、javascript语言精粹读书笔记
于是选择两本书做最后的冲刺: 精通javascript(jquery之父著作),javascript语言精粹.希望我也能成为一个javascript的好手. Dom Elements的属性 精通jav ...
- JavaScript 59 JavaScript 常见错误
JavaScript 文章目录 JavaScript 59 JavaScript 常见错误 59.1 意外使用赋值运算符 59.2 期望松散的比较 59.3 令人困惑的加法和级联 59.4 令人误解的 ...
- JavaScript 30 JavaScript 日期格式
JavaScript 文章目录 JavaScript 30 JavaScript 日期格式 30.1 JavaScript 日期输出 30.2 JavaScript ISO 日期 30.3 ISO 日 ...
- JavaScript 入门教程||javascript 简介||JavaScript 用法
javascript 简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScrip ...
- 【读书笔记】【WebKit技术内 幕（三）】GPU硬件加速渲染、canvas与WebGL、 JavaScript与JavaScript 引擎、JavaScriptCore与V8
文章目录 前言 Something great 第8章 硬件加速机制 硬件加速基础 -- *** Chromium的硬件加速机制 -- *** 其他硬件加速模块 第9章 JavaScript引擎 Ja ...
- JavaScript 71 JavaScript JSON 71.9 JSON 服务器
JavaScript 文章目录 JavaScript 71 JavaScript JSON 71.9 JSON 服务器 71.9.1 发送 Data 71.9.2 接收 Data 71.9.3 来自服 ...
- JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
最新文章
- Linux下编辑器vi/vim的使用介绍
- 实现Date函数属性中的format方法
- CALayer（ 一 ）
- 一旦一个业务可以由一个人来全部完成而不涉及分工，就会产生单干的情况
- docker mysql开发环境_Docker 构建PHP+Apache+MySQL 开发环境
- js操作元素节点对象value
- 计算机应用基础专科,2016电子科技大学计算机应用基础(专科)在线作业2
- leetcode -- 129. 求根到叶子节点数字之和
- charles乱码_基于iOS的Charles抓包实践
- 前端学习（3240）：react生命周期forceUpdate
- SQL中DATEADD和DATEDIFF的用法
- js之数据类型的比较
- TreeView 之间节点拖动 /移动
- js数组再倒数第二个添加元素_js 循环对象数组将元素逐个添加至新数组问题
- keras中使用ImageDataGenerator对MINST数据集数据增强
- 2021最新！某盘加速下载工具复活了，无需登录，打开即可高速下载（附下载）！
- 【频率计】基于ISE+VHDL编程的多功能数字频率计
- cigarettes（南阳oj94）
- Gmail服务器拒绝发送邮件,向Gmail发送邮件被退信，其他均正常，请协助，谢谢大家...
- 【总结】二手书网站开发总结（业余时间开发）