Function, Object, Array 与instanceof 连用时的问题

野性酷女 2021-07-04 16:31 202阅读 0赞

## 一. 不管是`Function, Object, Array`这些都是构造函数。 ##

Function
    ƒ Function() {  [native code] }
    
    Function.prototype
    ƒ () {  [native code] }
    
    Function.__proto__
    ƒ () {  [native code] }

Object
    ƒ Object() {  [native code] }
    Object.prototype
    { constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
    Object.__proto__
    ƒ () {  [native code] }
    
    console.log(Object.__proto__.__proto__)
    VM884:1 { constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ
    
    Function.prototype.__proto__ === Object.prototype  // true
    
    Function.prototype.__proto__ === Object.__proto__.__proto__ // true;
    
    Function.prototype.__proto__
    { constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
    
    
    Object.__proto__.__proto__
    { constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
    
    
    Object.__proto__.__proto__.__proto__
    null

使用`instanceof` 时 左边的对象里的`__proto__`对象包含右边这个函数原型的话就是`true`;

`Object instanceof Function` 这里`function.prototype (函数原型) 的值为 f() { native code }` ,而`Object.__proto__`（对象原型）的值现在也为 `f () { natvie code } ;`

也就是说`f () { native code }` 这个方法对象是创建 `Object,Function, Array`, 包括 `RegExp`, `String Boolean` 这些原始对象之父。 用`new`生成的对象。

而且 `f () { natvie code } .__proto__` 指向了 `{ }` 这个。 而`Object.prototype` （对象构造函数的原型） 直接指向了 `{ }` 这个。

所有会有 `Function instanceof Object // true` \------> 拆解。 `Function.__proto__.__proto__ === Object.prototype`

--------------------

## 用`instanceof`判断数组类型 ##

1.  `typeof`用以获取一个变量的类型，`typeof`一般只能返回如下几个结果：`number,boolean,string,function,object,undefined`。我们可以使用`typeof`来获取一个变量是否存在，如`if(typeof a!="undefined"){}`，而不要去使用`if(a)`因为如果`a`不存在（未声明）则会出错，对于`Array,Null`等特殊对象使用`typeof`一律返回`object`，这正是`typeof`的局限性。
2.  如果我们希望获取一个对象是否是数组，或判断某个变量是否是某个对象的实例则要选择使用`instanceof`。`instanceof`用于判断一个变量是否某个对象的实例，如`var a=new Array();alert(a instanceof Array);`会返回`true`，同时`alert(a instanceof Object)`也会返回`true`;这是因为`Array`是`object`的子类。再如：`function test(){};var a=new test();alert(a instanceof test)`会返回`true`

--------------------

## js中的`instanceof`运算符 ##

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

### 语法 ###

obj instanceof Object;//true 实例obj在不在Object构造函数中

### 描述 ###

`instanceof` 运算符用来检测 `constructor.prototype` 是否存在于参数 `object` 的原型链上。

### 实例 ###

重点内容`instanceof`的普通的用法，`obj instanceof Object` 检测`Object.prototype`是否存在于参数`obj`的原型链上。

`Person`的原型在`p`的原型链中

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

### 继承中判断实例是否属于它的父类 ###

`Student`和`Person`都在`s`的原型链中

function Person(){ };
    function Student(){ };
    var p =new Person();
    Student.prototype=p;//继承原型
    var s=new Student();
    console.log(s instanceof Student);//true
    console.log(s instanceof Person);//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=>
    //String.proto=>Function.prototype=>Function.prototype.proto=>Object.prototype
    //第二个String的原型链：String=>String.prototype
    
    console.log(Boolean instanceof Boolean); //false
    //第一个Boolean的原型链：Boolean=>
    //Boolean.proto=>Function.prototype=>Function.prototype.proto=>Object.prototype
    //第二个Boolean的原型链：Boolean=>Boolean.prototype
    
    console.log(Person instanceof Person); //false
    //第一个Person的原型链：Person=>
    //Person.proto=>Function.prototype=>Function.prototype.proto=>Object.prototype
    //第二个Person的原型链：Person=>Person.prototype

### 总结 ###

对应上述规范做个函数模拟`A instanceof B`：

function _instanceof(A, B) { 
    var O = B.prototype;// 取B的显示原型
    A = A.proto;// 取A的隐式原型
    while (true) { 
    //Object.prototype.proto === null
    if (A === null)
    return false;
    if (O === A)// 这里重点：当 O 严格等于 A 时，返回 true
    return true;
    A = A.proto;
    }
    }

--------------------

## `Object instanceof Function`和`Function instanceof Object` ##

`Object, Function, Array`等等这些都被称作是构造“函数”，他们都是函数。而所有的函数都是构造函数`Function`的实例。从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的`Function`构造函数的构造原型`Function.protorype`对象，所以：

`alert(Object instanceof Function);// return true` 与此同时，又因为`Function.prototype`是一个对象，所以他的构造函数是`Object`. 从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的`Object`构造函数的构造原型`Object.prototype`对象，所以： `alert(Function instanceof Object);// return true` 有趣的是根据我们通过原型链机制对`instanceof`进行的分析，我们不难得出一个结论：`Function instanceof Function` 依然返回`true`, 原理是一样的

1.  `Function`是构造函数，所以它是函数对象
2.  函数对象都是由`Function`构造函数创建而来的，原型链机制解释为：函数对象的原型链中存在`Function.prototype`
3.  `instanceof`查找原型链中的每一个节点，如果`Function.prototype`的构造函数`Function`的原型链中被查到，返回`true`

因此下面代码依然返回true

alert(Function instanceof Function);// still true

### 结论 ###

1.  在`JavaScript`语言中，一切的一切都是对象，它们全部继承自`Object`.  
    或者说所有对象的原型链的根节点都是`Object.prototype`
2.  理解原型链机制在`JavaScript`中式如何工作的是非常重要的。掌握了它，不管一个对象多么复杂，你总能够轻而易举地将它攻破。

--------------------

## `Object instanceof Function` 还是 `Function instance of Object`，是真是假，一一道来 ##

如今的`JavaScript`再也不是以前被当做玩具的在网页上运行的花哨的脚本了。`JavaScript`已经逐渐标准化，作为一门真正的编程语言广泛地应用在Web开发上。因此，越来越多的人开始重新认识这门脚本语言，并在不断地探索关于`JavaScript`核心思想和实现原理，过程中遇到了一些非常混淆的问题。本文着重解释一个比较常见但是非常容易使开发人员或者是初学`JavaScript`的人非常混淆的问题，那就是两个核心构造函数`Object`和`Function`，他们之间到底有什么关系？为何`instanceof`运算符的返回结果会让你感到混淆？本文将为你一一道来。不过在这之前，我们需要先了解一些`JavaScript`中的概念和基本的运行机制。

### `JavaScript`的对象体系结构 ###

其实在`JavaScript`语言中，整个核心的体系结构都围绕着两个构造函数`Object`和`Function`来构建的。我将引用来自mollypages.org的一张JavaScript对象体系结构图来说明。  
![在这里插入图片描述][20200129143548321.png]  
图1-1 The JavaScript Object Hierarchy

### `instanceof` 运算符 ###

`instanceof`是一个二元运算符，如：`A instanceof B`. 其中，`A`必须是一个合法的`JavaScript`对象，`B`必须是一个合法的`JavaScript`函数 (function). 判断过程如下：

**如果函数B在对象A的原型链 (`prototype chain`) 中被发现，那么`instanceof`操作符将返回`true`，否则返回`false`.**

例如下面的代码会返回`true`.

// return true if specified function is found
    // in the object's prototype chain as a constructor.
    alert({ } instanceof Object);

### JavaScript中的原型链(`prototype chain`)机制 ###

这里简单概括一下，因为这个话题需要很大篇幅去讨论，本文只是引用了这个概念，重点并非详细讨论该机制。

JavaScript中的原型(`prototype`)是和函数(`function`)紧密相连的，因为每个函数默认都会有一个属性叫`prototype`, 每一个通过函数和`new`操作符生成的对象都具有一个属性`__proto__`, 这个属性保存了创建它的构造函数的`prototype`属性的引用。这个`__proto__`对象就是实现原型链的核心对象。JavaScript是一门面向对象的编程语言，它的继承特性其实就是通过原型链机制来实现的。同时，`instanceof`运算符也需要在原型链的支持。我们举例说明：

// create a custom constructor Foo
    function Foo() { 
    }
    // create an insatnce of Foo
    var foo = new Foo();
    
    // foo is an instance of Foo
    alert(foo instanceof Foo);// true 
    // foo is also an instance of Object because
    // Foo.prototype is an instance of Object.
    // the interpreter will find the constructor
    // through the prototype chain.
    alert(foo instanceof Object);// true
    
    // Prototype chain of the object foo
    //
    // __proto__ __proto__ __proto__
    // foo -----------> Foo.prototype -----------> Object.prototype -----------> null
    
    // But foo is not an instance of Function, because
    // we could not find Function.prototype in foo's
    // prototype chain.
    alert(foo instanceof Function);// false
    
    // However, its constructor Foo is an instance of 
    // Function.
    alert(Foo instanceof Function);// true
    // it's also an instance of Object 
    alert(Foo instanceof Object);// true
    
    // Prototype chain of the constructor Foo
    //
    // __proto__ __proto__ __proto__
    // Foo -----------> Function.prototype -----------> Object.prototype -----------> null

从上面的代码来分析，我们不难得出这样一个结论：任何对象的原型链最后都能追溯到`Object.prototype`. 这也就是我们为什么说`JavaScript`中所有的对象都继承自`Object`的原因了。

### 为何`Object instanceof Function`和`Function instanceof Object`都返回`true`？ ###

alert(Object instanceof Function);// return true

与此同时，又因为`Function.prototype`是一个对象，所以他的构造函数是`Object`. 从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的`Object`构造函数的构造原型`Object.prototype`对象，所以：

alert(Function instanceof Object);// return true

有趣的是根据我们通过原型链机制对`instanceof`进行的分析，我们不难得出一个结论：`Function instanceof Function` 依然返回`true`, 原理是一样的

因此下面代码依然返回true

alert(Function instanceof Function);// still true

### 结论 ###

1.  在JavaScript语言中，一切的一切都是对象，它们全部继承自`Object`. 或者说所有对象的原型链的根节点都是`Object.prototype`
2.  理解原型链机制在JavaScript中式如何工作的是非常重要的。掌握了它，不管一个对象多么复杂，你总能够轻而易举地将它攻破。

--------------------

## 一张图看懂`Function`和`Object`的关系及简述`instanceof`运算符 ##

我在写一篇图解`prototype`和`__proto__`的区别时，搜资料搜到了一个有意思的现象，下面这两个运算返回的结果是一样的：

Function instanceof Object;//true
    Object instanceof Function;//true

这个是怎么一回事呢？要从运算符`instanceof`说起。

### 一、`instanceof`究竟是运算什么的？ ###

我曾经简单理解`instanceof`只是检测一个对象是否是另个对象`new`出来的实例（例如`var a = new Object()`，`a instanceof Object`返回`true`），但实际`instanceof`的运算规则上比这个更复杂。

首先w3c上有官方解释（传送门，有兴趣的同学可以去看看），但是一如既往地让人无法一目了然地看懂……

知乎上有同学把这个解释翻译成人能读懂的语言（传送门），看起来似乎明白一些了：

//假设instanceof运算符左边是L，右边是R
    L instanceof R 
    //instanceof运算时，通过判断L的原型链上是否存在R.prototype
    L.__proto__.__proto__ ..... === R.prototype ？
    //如果存在返回true 否则返回false

注意：`instanceof`运算时会递归查找L的原型链，即`L.__proto__.__proto__.__proto__.__proto__`…直到找到了或者找到顶层为止。

所以一句话理解`instanceof`的运算规则为：

**`instanceof`检测左侧的`__proto__`原型链上，是否存在右侧的`prototype`原型。**

### 二、图解构造器`Function`和`Object`的关系 ###

![在这里插入图片描述][20200129170509790.png]图解构造器`Function`和`Object`的关系

我们再配合代码来看一下就明白了：

//①构造器Function的构造器是它自身
    Function.constructor=== Function;//true
    
    //②构造器Object的构造器是Function（由此可知所有构造器的constructor都指向Function）
    Object.constructor === Function;//true
    
    
    
    //③构造器Function的__proto__是一个特殊的匿名函数function() {}
    console.log(Function.__proto__);//function() {}
    
    //④这个特殊的匿名函数的__proto__指向Object的prototype原型。
    Function.__proto__.__proto__ === Object.prototype//true
    
    //⑤Object的__proto__指向Function的prototype，也就是上面③中所述的特殊匿名函数
    Object.__proto__ === Function.prototype;//true
    Function.prototype === Function.__proto__;//true

### 三、当构造器`Object`和`Function`遇到`instanceof` ###

我们回过头来看第一部分那个“奇怪的现象”，从上面那个图中我们可以看到：

Function.__proto__.__proto__ === Object.prototype;//true
    Object.__proto__ === Function.prototype;//true

所以再看回第一点中我们说的`instanceof`的运算规则，`Function instanceof Object` 和 `Object instanceof Function`运算的结果当然都是`true`啦！

如果看完以上，你还觉得上面的关系看晕了的话，只需要记住下面两个最重要的关系，其他关系就可以推导出来了：

**1、所有的构造器的`constructor`都指向`Function`**

**2、`Function`的`prototype`指向一个特殊匿名函数，而这个特殊匿名函数的`__proto__`指向`Object.prototype`**

至于`prototype`和`__proto__`的关系如何推导，可以参考我写的上一篇博客《三张图搞懂JavaScript的原型对象与原型链》

[20200129143548321.png]: /images/20210704/0e08b1349a7e4656806368c183da76ee.png
[20200129170509790.png]: /images/20210704/6e5d1bf02698471697e94bf1c3cb946b.png