前端进阶系列（第4期）：JavaScript中一切皆为对象揭秘

写在前面

之前在阅读《JavaScript高级语言程序设计》中有提到“在JavaScript中，一切皆为对象”，当时并无深刻理解其真正的含义，如今想一想其内含着很大的信息量，下面跟着我一步一步的揭开其神秘的面纱。

第一步：类型检测

在JavaScript中经过typeof进行数据类型检测。

运行如下代码：

console.log(typeof undefined); // undefined
console.log(typeof ''); // string
console.log(typeof 123); // number
console.log(typeof true); // boolean
console.log(typeof Symbol()); // symbol
console.log(typeof function() {}); // function
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof new Number(123)); // object
复制代码

根据上面代码输出结果可知，除开基本类型，typeof输出的其它的都是function和object，即引用类型。

第二步：函数是对象吗？

首先经过instanceof检验一下函数是否是Object的实例。

运行如下代码：

const func = function(a, b) {
    return a + b;
}

console.log(func instanceof Object); // true
复制代码

根据上面代码输出结果可知，函数 function 也是对象。

若是你们注意到的话，其实上面的代码等同于

运行如下代码：

const func = new Function('a', 'b', 'return a + b');

console.log(func instanceof Function); // true
console.log(func instanceof Object); // true
复制代码

根据上面代码输出结果可知，函数 func 既是 Function 的实例又是 Object 的实例。

第三步：常见的内置对象

其实在JavaScript中有不少的内置对象，例如：Number、String、Boolean、Symbol、Array、Function、RegExp、Object、JSON、Date、Set、Map、Error、Math等等，了解更多请点击这里。

运行如下代码：

// 实例化数字对象
const num = new Number(123);
console.log(typeof Number); // function
console.log(typeof num); // object

// 实例化字符串对象
const str = new String('hello world');
console.log(typeof String); // function
console.log(typeof str); // object

// Symbol是函数且不能被new 实例化
const smb = new Symbol('smb'); // TypeError Symbol 不能实例化
console.log(typeof Symbol); // function

// Math 内置对象
const max = Math.max(1,5); // 直接调用该类型的静态方法
console.log(typeof Math); // object

// 实例化数组对象
const arr = [1,2,3,4];
console.log(typeof Array); // function
console.log(typeof arr); // object

// 实例化对象
const obj = {name: '布一', wechat: 'hankewins'};
console.log(typeof Object); // function
console.log(typeof obj); // object

// 自定义一个函数
const Func = function() {}
const func = new Func();

console.log(typeof Func); // function
console.log(typeof func); // object
复制代码

根据上面代码输出结果可知，对象是经过函数来建立的，而函数却又是一种对象。

注：实例化一个对象不必定非要new一个对象。

对象格式

一般的对象（Object），通常是利用键值对表示的，例以下面这样：

const obj = {
    name: '布一',
    age: 18,
    wechat: 'Hankewins',
    getName: function() {
        return this.name;
    }
}
复制代码

那数组和函数不也是对象吗，它们也能够这样表示？

固然不能够，但它们能够采用另外一种表示形式。如函数，能够这样：

const func = function() {}

func.description = 'JavaScript function';
func.getName = function() {
    return this.description;
}
复制代码

写在最后

总之，在javascript的世界里，一切皆为对象，且对象就是属性的集合。

最后抛出一个问题，函数 function 为何是对象 Object 的实例以及它们之间有什么关联？

若是有发现任何问题或者有更好的建议，欢迎直接给我留言。

交流

更多精彩内容请关注github.com/hankewins/b…,若是你以为还不错请给个star，很是感谢。