最近一段时间由于时间充裕,原来都是些原生项目,经过两年的前端摸索,开始说下我对前端的了解.
ECMAScript中有5中简单数据类型(也称为基本数据类型): Undefined、Null、Boolean、Number和String。还有1中复杂的数据类型(引用数据类型)————Object,Object本质上是由一组无序的名值对组成的。但是这几种数据类到底有什么区别呢。这些数据又是如何存储在内存中的呢,这些数据和浅拷贝深拷贝有什么区别呢。在这里我说下我对前端js 的理解.
一、数据类型和堆栈
首先基本的数据类型有五种。分别为:Undefined、Null、Boolean、Number 和string。那么为啥叫这几种为基本数据类型呢。因为这几种数据都是存在栈(stack)中。严格意义上来讲还存在一种指针也存在stack 中。如创建一个对象 var a= function(){}, 那么其实a 这个指针也是存在stack 中, 引用数据类型则存储在堆(heap)中。其实从字面意思可以看出所谓的引用类型两字我们可以理解为对象的赋值是浅拷贝 。举个例子 var a= {m:'123'} ,var b=a;那么 其实意思就是 a和b 指向同一个堆区域。当a 指向的对象的内部改变的时候,b也改变。
这里要记住的是a 指向对象的内部 改变,如果你此时 改变 a='123',那么 肯定不可能b=‘123’,因为b指向的对象和a 指向的对象根本就不同了。也就是说当a,b 指向同一个对象的时候,a改变,那么b改变。以下图片对js 堆栈的完美解释
浅拷贝:在js中。除了基本数据类型,当数据的数据类型为引用对象的时候,那么赋值都是浅拷贝。类
深拷贝:所谓的深拷贝。就是在heap 中复制一份一样的引用对象类型的数据,在stack 中的两个指针分别指向heap 中的两个对象。此时修改 a数据 改变不了b 数据。那么肯定也就存在 a 数据不等于b 数据。对于js 来说深拷贝我觉得只要记住一种就行:json.parse(json.stringify(xxx))
扩展运算符:在这里肯定很多人对扩展运算符有不解的地方. var a={m:"123",n:"234",k:{f:'xxx'}}; var b={...a};比如这个。很多人不理解扩展运算符是深拷贝还是浅拷贝。这里我必须说明 扩展运算符是浅拷贝。用一句话总结扩展运算符:就是将将被扩展的对象内部的引用对象进行浅拷贝.(内部的引用对象浅拷贝这句话理解清楚即可)。扩展运算符 a,b 两个指针指向的heap 位置肯定是不一致的。但是 内部的引用对象指向的heap 位置肯定是一致的 。这里我举个例子说明下
二、判断js 数据类型的方法。
面试题必备的知识
typeof 判断 typeof 返回的是string ,有以下几种返回
如图我们可以总结四点:
对于基本类型,除 null 以外,均可以返回正确的结果。
对于引用类型,除 function 以外,一律返回 object 类型。
对于 null ,返回 object 类型。
对于 function 返回 function 类型。
那么也就是说type 对于引用对象的判断 除了function 可以判断。其他都不可以所以来说typeof判断引用对象是不可以的,但是在开发过程中,如果是基本数据类型,则是可以的。还是一句话。需求决定一切。还存在以下几种判断方法。
instanceof 进行数据判断如下图所示
instanceof 可以理解为是判断 a是不是b的实例。这层关系是通过原型链进行判断的。我们知道[]的原型链 链指向的 Array ,但是Array 的原型链指向object. 可以理解为 只要指向了某个原型链(中间可能存在),那么可以判断这个a是什么类型。
3.constructor
利用构造函数进行判断.当一个引用对象被申明的时候,那么会为其添加上prototype 原型,然后在原型上添加他的构造函数,所以可以通过构造函数进行判断对象的类型。如下图所以
但是constructor 存在一个问题,因为prototype 是可以被重写的,那么就可能导致判断错误如下图所示
4. tostring方式,也是最简单便捷的方式。这里我就不举例子了。直接拿来用