基础知识

起步

  1. 兼容性

https://caniuse.comopen in new window网站查看。

  1. 脚本定义
<script>
    alert('Hello world')
</script>
<script src="mkimq.js"></script>

变量声明

提示

命名最好语义化强,更具可读性。

  1. 命名规则

JS中的变量是弱类型可以保存所有类型的数据,即变量没有类型而值有类型。变量名以字母、$、_ 开始,后跟字母、数字、_。

警告

JS语言关键字不能用来做变量名,比如 true、if、while、class 等。

  1. 变量提升

解析器会先解析代码,然后把声明的变量的声明提升到最前,这就叫做变量提升。

使用 var 定义的代码,声明会被提升到前面,赋值还在原位置

  1. TDZ

TDZ 又称暂时性死区,指变量在作用域内已经存在,但必须在let/const声明后才可以使用。

  • TDZ可以让程序保持先声明后使用的习惯,让程序更稳定。
    • 变量要先声明后使用
    • 建议使用let/const 而少使用var

块作用域

共同点

  • var/let/const共同点是全局作用域中定义的变量,可以在函数中使用
  • 函数中声明的变量,只能在函数及其子函数中使用
  • 函数中声明的变量就像声明了私有领地,外部无法访问

var

使用 var 声明的变量存在于最近的函数或全局作用域中,没有块级作用域的机制。

  • 没有块作用域很容易污染全局
  • var 全局声明的变量也存在于 window对象中

立即执行函数模拟块作用域

(function() {
    var $ = this.$ = {}
    $.web = "mkimq"
}.bind(window)())
console.log($.web)

let

  • 与 var 声明的区别是 let/const 拥有块作用域,下面代码演示了块外部是无法访问到let声明的变量。
    • 建议将let在代码块前声明
    • 用逗号分隔定义多个

const

  • 使用 const 用来声明常量,这与其他语言差别不大,比如可以用来声明后台接口的URI地址。
    • 常量名建议全部大写
    • 只能声明一次变量
    • 声明时必须同时赋值
    • 不允许再次全新赋值
    • 可以修改引用类型变量的值
    • 拥有块、函数、全局作用域

重复定义

  • 使用 var 可能造成不小心定义了同名变量
  • 使用let 可以避免上面的问题,因为let声明后的变量不允许在同一作用域中重新声明
  • 不同作用域可以重新声明
  • let可以改变值这是与const不同点
  • let 全局声明的变量不存在于 window对象中,这与var声明不同

Object.freeze

如果冻结变量后,变量也不可以修改了,使用严格模式会报出错误。

传值与传址

基本数据类型指数值、字符串等简单数据类型,引用类型指对象数据类型。

  • 基本类型复制是值的复制,互相不受影响。
  • 对于引用类型来讲,变量保存的是引用对象的指针。变量间赋值时其实赋值是变量的指针,这样多个变量就引用的是同一个对象。

undefined

提示

我们发现未赋值与未定义的变量值都为 undefined ,建议声明变量设置初始值,这样就可以区分出变量状态了。

  • 对声明但未赋值的变量返回类型为 undefined 表示值未定义。

对未声明的变量使用会报错,但判断类型将显示 undefined。

  • 函数参数或无返回值是为undefined

  • null

null 用于定义一个空对象,即如果变量要用来保存引用类型,可以在初始化时将其设置为null

严格模式

严格模式可以让我们及早发现错误,使代码更安全规范,推荐在代码中一直保持严格模式运行。

  1. 基本差异
  • 变量必须使用关键词声明,未声明的变量不允许赋值
  • 强制声明防止污染全局
  • 关键词不允许做变量使用
  • 变量参数不允许重复定义
  • 单独为函数设置严格模式

为了在多文件合并时,防止全局设置严格模式对其他没使用严格模式文件的影响,将脚本放在一个执行函数中。

(function () {
    "use strict"
    url = 'mkimq.com'
})()
  1. 解构差异

非严格模式可以不使用声明指令,严格模式下必须使用声明。所以建议使用 let 等声明。

// "use strict";
({name, url} = {name: 'mkimq',url: 'mkimq.com'})
console.log(name, url)
贡献者: mankueng