JS判断对象类型

今天来说讲如何判断 JS 的变量类型。

JS 真不愧是坑爹的语言。

先来个悬念~看完你就懂！！！

const a = new String('aa');
const b = 'aa';
console.log(a instanceof String); // true
console.log(b instanceof String); // flase

• typeof - 最基本的，有六种返回值，用法 typeof xx/typeof(xx).

  检测引用类型值的时候，它的做用不大。

• instanceof - variable instanceof Object
• constructor - 写在纸上的发源地，能够被强行篡改。

• Object.prototype.toString.call(element) - 没法被篡改的祖先，血液里DNA.

---

一. typeof

主要用于区分基本数据类型和对象。

使用方法： typeof(variable)/typeof variable
使用结果(6种):

• number
• boolean
• string
• undefined
• function
• object

使用示例：

const a = 3;        // number
const b = 'haha';   // string
const c = true;     // boolean
const d = null;     // object
const e = undefined;// undefined
const f = function() {}   // function

总的来讲，typeof对于 数组，RegExp（正则），Date等是无力的。

---

让咱们来看一下有一块儿 JS机制 形成的惊天悬疑案？？？难道 'aa'和'aa'之间还有种族差异？？神秘种族！ 基本包装类型！=基本数据类型

实际上还有一种类型叫作：基本包装类型。

[基本包装类型有：Number/String/Boolean]

const a = new String('aa');    // object
const b = new Number(3);       // object
const c = new Boolean(true);   // object
const a = 'haha';   // string
const b = 3;        // number
const c = true;     // boolean

实际上呢，这也是基本类型可以拥有方法的缘由。短暂蜕变成为基本包装类型 拥有方法 -> 超级赛亚人短暂地得到他们原本没有的实力？？？哈哈哈

let s1 = 'haha';         // haha
let s2 = s1.substring(2);// ha

在程序中，其实他们的运行过是这个样子的！

let s1 = new String('haha');
let s2 = s1.substring(2);
s1 = null;

• a.建立 String 类型的一个实例
• b.在实例上调用指定的方法

• c.销毁这个实例

  通过上面的处理， 基本的字符串类型就变得 和 对象同样了

引用类型和基本包装类型的区别在于对象的生存期。自动建立的基本包装类型实际上只存在于运行的一瞬间。

由于只有一瞬间，因此实际上他们还不是对象，没有办法被添加属性和方法

let s1 = 'some text';
s1.color = 'red';
console.log(s1.color); // undefined

二. instanceof

它主要用于区分 引用类型。

专业解释: instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另一个要检测对象的原型链上

const a = new String('aa');
const b = 'aa';
console.log(a instanceof String); // true
console.log(b instanceof String); // flase

上面这个就是咱们开头的 悬念了，实际上，看了上面 typeof 相关的解释，这里你是否是也知道了呢！基本包装类型(引用类型)和基本数据类型的差异

使用方法： obj instanceof Object

普通实例(找到他们的父类)：

function Person(){};
function Coder(){};
var p = new Person();
var s = new Coder();
console.log(p instanceof Person); // true
console.log(s instanceof Coder); // true

这里是它的一些缺陷的证据（新手跳过）

文艺实例: (这里能够先跳过，看完 高程三 再回来看比较好，比较难)

function Person() {}
console.log(Object instanceof Object);     // true

// 第一个Object的原型链：Object => Object.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
// 第二个Object的原型：  Object => Object.prototype

console.log(Function instanceof Function); // true

// 第一个Function的原型链：Function => Function.__proto__ => Function.prototype
/ /第二个Function的原型：Function => Function.prototype

console.log(Function instanceof Object);   // true

// Function => Function.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
// Object => Object.prototype

console.log(Person instanceof Function);      //true

// Person => Person.__proto__ => Function.prototype
// Function => Function.prototype

console.log(String instanceof String);   // false
// String => String.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
// String的原型链：String => String.prototype

console.log(Boolean instanceof Boolean); // false
// Boolean => Boolean.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
// Boolean=>Boolean.prototype

console.log(Person instanceof Person); // false
// Person => Person.__proto__ => Function.prototype => Function.prototype.__proto__ => Object.prototype
// Person=>Person.prototype

本意是用来判断 A 是不是 B 的实例对象。这里须要注意。instanceof 检测的是原型。

咱们很容易发现问题（经过基本包装类型）。它可以检测出 [] 是 Array 的实例，却不能检测出 [] 不是 Object 的实例。

[] instanceof Array // true
[] instanceof Object // true 不该该啊兄弟

var a = new Number(1);
var b = 1;
a instanceof Number; // true
b instanceof Number; // false 不该啊兄弟

所以，咱们用 instanceof 也不能彻底精确的判断object类的具体数据类型。
同时，咱们发现，使用 Object.prototype.toString.call(x) 时，以上结果都符合预期。

三. constructor

JavaScript中，全部对象都有一个 constructor 属性,它引用初始这个对象的构造函数

constructor就像是写在 纸上 的种族，只要是在纸上的东西，均可能是能够改的，因此，它并不稳定。

constructor 是个属性，在 JS 中，大多数属性是能够被修改的。

// 如下代码运行于 Node v10 环境下
var a = [1, 2];
var b = new Array(3);
var c = 'test';
var d = new String('test');

console.log(d.constructor === String); // true
console.log(c.constructor === String); // true
console.log(b.constructor === Array);  // true
console.log(a.constructor === Array);  // true

也许你会以为无厘头？谁会这么改，可是：人们有这么作的可能性，咱们就应该防范。

var d = new String('test');
String.prototype.constructor = "I'm change.";
console.log(d.constructor); // I'm change
console.log(d.constructor === String); // false

---

四. 无敌的判断者: Object.prototype.toString.call(element) - 这是源头的源头。

constructor比如咱们人类的发源地，好比 亚洲。而这个呢，至关因而地球。

它和下者的差距在这里： https://www.zhihu.com/question/50934612

var d = new String('test');
console.log(Object.prototype.toString.call(d)); // [object String]
var b = new Array(3);
console.log(Object.prototype.toString.call(b)); // [object Array]

---

complete.