javaScript浅谈----typeof 与 instanceof 区别

39 阅读1分钟

typeof 与 instanceof 区别?

typeof常用语判断基础数据类型以及函数,不可以对nullObject以及Array进行准确判断,因为返回的都是Object

    typeof 1 // 'number' 
    typeof '1' // 'string' 
    typeof undefined // 'undefined' 
    typeof true // 'boolean' 
    typeof Symbol() // 'symbol' 
    typeof null // 'object' 
    typeof [] // 'object' 
    typeof {} // 'object' 
    typeof console // 'object' 
    typeof console.log // 'function'

intanceof可以用于判断对象,不可以用于判断基础数据类型,其内部运行的机制是判读其原型链上是否可以找到该对象的原型。

  class People {}
  class Student extends People {}
  const vortesnail = new Student();
  console.log(vortesnail instanceof People); // true
  console.log(vortesnail instanceof Student); // true

解释:其实现就是顺着原型链去找,如果能找到对应的 Xxxxx.prototype  即为 true 。比如这里的 vortesnail  作为实例,顺着原型链能找到 Student.prototype  及 People.prototype ,所以都为 true。

Object.prototype.toString.call()这个方法封装的检测数据类型的工具,基础数据类型和对象都可以判断。

  Object.prototype.toString.call(2); // "[object Number]"
  Object.prototype.toString.call(""); // "[object String]"
  Object.prototype.toString.call(true); // "[object Boolean]"
  Object.prototype.toString.call(undefined); // "[object Undefined]"
  Object.prototype.toString.call(null); // "[object Null]"
  Object.prototype.toString.call(Math); // "[object Math]"
  Object.prototype.toString.call({}); // "[object Object]"
  Object.prototype.toString.call([]); // "[object Array]"
  Object.prototype.toString.call(function () {}); // "[object Function]"

判断一个变量是否是数组的方法:

  Array.isArray(arr); // true
  arr.__proto__ === Array.prototype; // true
  arr instanceof Array; // true
  Object.prototype.toString.call(arr); // "[object Array]"

手写intanceof

实现步骤:

(一)首先获取类型的原型

(二)然后获得对象的原型

(三)然后一直循环判断对象的原型是否等于类型的原型,直到对象原型为 null,因为原型链最终为 null

 function myInstanceof(left, right) {
    let proto = Object.getPrototypeOf(left), // 获取对象的原型
      prototype = right.prototype; // 获取构造函数的 prototype 对象

    // 判断构造函数的 prototype 对象是否在对象的原型链上
    while (true) {
      if (!proto) return false;
      if (proto === prototype) return true;
      proto = Object.getPrototypeOf(proto);
    }
  }