今天被问到一个关于js判断对象的问题，先稍稍做个总结
检测对象的方法
1.typeof操作符
typeof操作符对Function、String、Number、Undefined等类型的判断毫无压力，但是对Array对象就不起作用了.
因此总结为：typeof除了array和null判断为object外，其它均可判断。测试示例代码如下：
console.log(typeof alert)/function
console.log(typeof 2)//number
console.log(typeof "2")//string
console.log(typeof demo)//undefined
const arr =["1","2","3"];
console.log(typeof arr)//object
console.log(typeof null)
2.instanceof操作符
这个操作符和JavaScript中面向对象有点关系，了解这个就先得了解JavaScript中的面向对象。因为这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。
const arr = [1,2,3];
console.log(arr instanceof Array)
3.对象的constructor属性
除了instanceof，每个对象还有constructor的属性，利用它似乎也能进行Array的判断。
var arr = [1,2,3,1];
alert(arr.constructor === Array); // true
检测数组类型方法
1.Object.prototype.toString
Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于"[object Array]"的字符串作为结果(看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”)。利用这 个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
function isArrayFn (o) {
return Object.prototype.toString.call(o) === '[object Array]';
}
var arr = [1,2,3,1];
alert(isArrayFn(arr));// true
2.Array.isArray()
ECMAScript5将Array.isArray()正式引入JavaScript，目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。
基本数据类型与引用数据类型的区别
我们都知道，JS的基本数据类型有：String、Boolean、Symbol、Number、Null、Undefined。引用数据类型有：Object、Array、Function。
那么基本数据类型与引用数据类型有什么区别呢？
基本数据类型是按值访问的，因为可以直接保存变量中的实际值,举个例子：
var a = 10;
var b = a;
b = 20;
console.log(a); // 10值
上面，b获取的是a值得一份拷贝，虽然，两个变量的值相等，但是两个变量保存了两个不同的基本数据类型值。
b只是保存了a复制的一个副本。所以，b的改变，对a没有影响。
这里就需要引出一个栈与堆的概念，根据aliya跟我说的，可能不那么明确，大意是说：【栈是基本数据类型保存的地方，它的内存是由系统来管理的，而堆是由程序员来管理这些内存的】；
回到上面那段代码的例子。引用一个图来演示这种基本数据类型赋值的过程。
基本数据类型赋值-六个周.png
javascript的引用数据类型是保存在堆内存中的对象。 与其他语言的不同是，你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。
所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。
继续看例子：
var obj1 = new Object();
var obj2 = obj1;
obj2.name = "我有名字了";
console.log(obj1.name); // 我有名字了
说明这两个引用数据类型指向了同一个堆内存对象。obj1赋值给onj2，实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2，
但是实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。
下面我们来演示这个引用数据类型赋值过程：
引用数据类型赋值--六个周.png
然后，从网上找了一个比较好的总结：
a 声明变量时不同的内存分配：
1）原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
这是因为这些原始类型占据的空间是固定的，所以可将他们存储在较小的内存区域 – 栈中。这样存储便于迅速查寻变量的值。
2）引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存地址。
这是因为：引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址。
地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。
b 不同的内存分配机制也带来了不同的访问机制
1）在javascript中是不允许直接访问保存在堆内存中的对象的，所以在访问一个对象时，首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的按引用访问。
2）而原始类型的值则是可以直接访问到的。
c 复制变量时的不同
1）原始值：在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。
2）引用值：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了）。多了一个指针
d 参数传递的不同（把实参复制给形参的过程）
首先我们应该明确一点：ECMAScript中所有函数的参数都是按值来传递的。
但是为什么涉及到原始类型与引用类型的值时仍然有区别呢？还不就是因为内存分配时的差别。
1）原始值：只是把变量里的值传递给参数，之后参数和这个变量互不影响。
2）引用值：对象变量它里面的值是这个对象在堆内存中的内存地址，这一点你要时刻铭记在心！
因此它传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部的原因了，因为它们都指向同一个对象。
在对这个总结有一个清晰的认识后，有两个demo，供大家稍稍练习。
demo1
var test1 =1;
var test2 =test1;
test2 =4;
console.log(test1);
demo2
var demo1 =new Object();
demo1.name="lyl";
var demo2 = demo1;
demo2.name="lmz";
console.log(demo1.name);
demo3(其实跟demo2一个意思)
var demo1 =new Object();
demo1.name="lyl";
var demo2 = demo1;
demo2.name="lmz";
demo1.name="woca";
console.log(demo2.name);
demo4
var demo1 =new Object();
demo1.name="lyl";
var demo2 = new Object();
demo2 = demo1
console.log(demo2 == demo1)
demo5
var demo1 =new Object();
demo1.name="lyl";
var demo2 = new Object();
demo2 = demo1
demo2.name="lmz";
console.log(demo1.name)
答案附上：
demo1: 1
demo2: lmz
demo3: woca
demo4: true
demo5: lmz
网友评论