欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript 三种声明方式

程序员文章站 2022-05-07 21:43:26
...

这篇文章来较深层的讨论一下JavaScript的三种声明方式的区别。(捂脸。。。以前也就指点var 巴拉巴拉,let 巴拉巴拉 ,const 巴拉巴拉。。。)

关于var

  1. var声明一个变量,并且可选地将其初始化为一个值
  2. 关于var的作用域 —— 是当前的执行上下文,可以试试嵌套的函数,也可以说是全局
  3. 注意:未声明变量是全局的(未声明的变量会被挂载到window上):
    JavaScript 三种声明方式
    JavaScript 三种声明方式
    JavaScript 三种声明方式
  4. 说到var 就要想到变量提升(吧所有的变量声明移动到函数或者全局代码的开头位置)

关于let

  1. let语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值
  2. let与var的不同之处是前者在编译的时候才初始化,而且var声明的变量的作用域是整个封闭函数:
    通过var声明:
    JavaScript 三种声明方式
    通过let声明:
    JavaScript 三种声明方式
  3. 同时let和const一样,不会在全局对象新建一个属性
    JavaScript 三种声明方式
  4. 根据上面第二点,我们就可以想到通过let声明来创建一个或者多个私有成员(闭包方式也可以实现模拟私有成员)
模拟私有成员(通过let方式):
		var Person 

		{
			let privateNum = new WeakMap()
			let number = 0

			function Person () {
				this.name = 'foo'

				privateNum.set(this, {hidden: number})
			}
			Person.prototype.showPri = function () {
				return privateNum.get(this).hidden
			}

		}

		var t1 = new Person()
		console.log(t1)
		console.log(t1.showPri())

JavaScript 三种声明方式

模拟私有成员(通过闭包方式实现):

		var Person = (function () {
			var number = 0
			var privateNum = new WeakMap()
			function Person () {
				this.name = 'foo'
				privateNum.set(this, {hidden: number})
			}
			Person.prototype.showPri = function () {
				return privateNum.get(this).hidden
			}
			return Person
		})()

		var t1 = new Person()
		console.log(t1)
		console.log(t1.showPri())

JavaScript 三种声明方式
这里的内部的Person构造函数可以使用es6的class来实现,如下:


		var Person = (function () {
			var privateNum = '111'
			class Person {
				construtor() {
					this.privateNum = '123'
				}
				showPri() {
					return privateNum
				}
			}
			return Person
		})()

		var t1 = new Person()
		console.log(t1)
		console.log(t1.showPri())
		console.log(t1.privateNum)
		
  1. 使用let声明的变量可能会产生暂存死区
    JavaScript 三种声明方式
  2. let 将变量作用域限制在块内,而var声明的变量作用域在函数内 JavaScript 三种声明方式
    JavaScript 三种声明方式

关于const

  1. const是块级作用域,很像let,但是其值不能通过重新赋值来改变,并且不能重新声明
  2. const声明创建一个值的只读引用。但是!!!如果在引用内容时对象的情况下,这时可以改变对象的内容
    JavaScript 三种声明方式