简述JS值类型和引用类型

简述类型

在JavaScript中,我们可以简单的把变量划分为值类型,和数据类型,其中值类型可以用运算符typeof判断,而引用类型则需要使用instanceof判断,基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象。

值类型的赋值是简单的值传递,而引用类型则是通过指针,也就是对一个对象的引用。值类型和数据类型,在JavaScript中,存放在栈中,引用类型则存放在内存的堆中。栈中数据的存储是自顶向下的,堆中的数据是自下向上存储。
在这里插入图片描述

typeof运算符

由于JavaScript是动态弱类型的语言,因此需要一种方法去判断一个变量的类型,于是typeof就应运而生。对一个变量使用typeof后,返回值就是该变量的类型,共有以下情况。

  1. “undefined” —如果一个对象未定义
  2. “boolean” --如果这个值是布尔值
  3. “string” --如果这个值是字符串
  4. “number” --如果这个值数数字类型
  5. “function” --如果是一个函数
  6. “object” --如果是引用类型
  7. ‘symbol’ --ES6中的symbol类型

Null 类型是第二个只有一个值的数据类型,这个特殊的值是 null。从逻辑角度来看, null 值表示一个空对象指针,而这也正是使用 typeof 操作符检测 null 值时会返回"object"的原因

instanceof运算符

虽然在检测基本数据类型时 typeof 是非常得力的助手,但在检测引用类型的值时,这个操作符的用处不大。 通常, 我们并不是想知道某个值是对象,而是想知道它是什么类型的对象。为此ES
提供了 instanceof 操作符,其语法如下所示:

result = variable instanceof constructor

如果variable是constructor类型则返回true,否则就返回false。

引用类型

JavaScript 变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已,在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值。常见的引用类型有一下几种。

  1. Object --大多数引用类型值都是 Object 类型的实例
  2. Array --数组、常用类型
  3. Date --日期类型
  4. RegExp --正则表达式
  5. function --函数、js一等公民
  6. 基本包装类型 – Boolean、 Number 和String。
  7. 单体内置对象 – 由ES提供,不依赖宿主对象

关键字var

ES6之前,JavaScript中创建一个对象通常使用var来声明,每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用 var 操作符,使用var,让你可保存任何数据类型的值,使用var带来方便的同时,也带来有一些问题,比如说变量泄漏的问题,没有块级作用域等麻烦

变量提升

在执行代码前,浏览器做一下这些工作,所以我们在定义一个变量前使用不会报错,函数也能提前调用,上述过程也叫做创建上下执行上下文,函数每次调用也会产生一个执行上下文环境。

  1. 变量、函数表达式 --------变量声明、默认赋值为undefined
  2. this -------赋值
  3. 函数声明 -----赋值

变量提升带来的问题

  1. 变量容易在不被察觉的情况下被覆盖掉
  2. 本应销毁的变量没有被销毁
function foo(){
 for (var i = 0; i < 7; i++) {
 }
 console.log(i); 
 }
 foo()

在 for 循环结束之后,i 就已经被销毁了,但是在 JavaScript 代码中,i 的值并未被销毁,所以最后打印出来的是 7。这同样也是由变量提升而导致的,在创建执行上下文阶段,变量 i 就已经被提升了,所以当 for 循环结束之后,变量 i 并没有被销毁。

ES6中的let和const

为了解决ES5中var变量提升带来的问题,在ES6中引入了let、const关键字,使用letconst后,js有了块级作用域,同时解决了变量提升的问题,根据js编程规范,尽量使用let、const声明变量。

function foo(){ 
var a = 1 
let b = 2 
	{ 
		let b = 3 
		var c = 4 
		let d = 5 
		console.log(a) 
		console.log(b) 
	} 
	console.log(b) 
	console.log(c) 
	console.log(d)
} 
foo()

我们简单分析上面js代码的执行流程,在这段代码执行前,JavaScript 引擎会先对其进行编译并创建执行上下文,然后再按照顺序执行代码

第一步是编译并创建执行上下文
在这里插入图片描述
第二步执行代码,变量赋值
在这里插入图片描述

总结

通过上图,我们可以得出一下结论

  • var的创建和初始化被提升,赋值不会被提升。
  • let的创建被提升,初始化和赋值不会被提升。
  • function的创建、初始化和赋值均会被提升。

最后

JS值类型和引用类型是JS中很重要的一部分,了解这些能够解决工作的的很多问题,面试被问到这些,自然也能很好回答。文章有写的不详细或错误的地方,欢迎在评论区指正,作者会第一时间答复,一起学习,一起进步

原创文章 5 获赞 7 访问量 297

猜你喜欢

转载自blog.csdn.net/weixin_42220731/article/details/106133946
今日推荐