instanceof 和 typeof

instanceof

instanceof 用于检查一个对象是否是某个构造函数的实例。换句话说，它会检查对象的原型链上是否存在该构造函数的 prototype 属性。 示例代码

let a = new Number(1)
console.log(a instanceof Number);  // true
console.log(a.__proto__.constructor === Number) // true
console.log(a.__proto__ === Number.prototype) // true
console.log('------')
let b = 1
console.log(b instanceof Number); // false
console.log(b.__proto__.constructor === Number) // true
console.log(b.__proto__ === Number.prototype) // true （临时包装对象）

按照上面的说法
x instanceof Y 检查 x 的原型链上是否有 Y.prototype。
可以等效为 x.__proto__ === Y.prototype (但是又不完全等效，因为instanceof会在整个原型链上递归查找)
如果我们仅看这个简单的等效，对比上面的4、9行代码。
a是对象，b是原始类型。严格来说，原始类型是没有__proto__的，但是JS引擎会在访问他们的属性的时候，临时包装成对象，使其看起来有__proto__，所以在第9行，还是会输出 true
所以这里为什么第7行，输出是false呢，不是按照上面的规则来，就检查x.__proto__ === Y.prototype 吗，既然第9行为true，但是第7行为false呢？
这里就涉及到另外一条规则了，如果x是原始类型，那么会直接返回false，因为原始类型没有原型链，上面的第9行是包装之后才有了原型链。

工作原理

x instanceof Y 的完整行为：

1. 如果 x 是原始类型（如 1, "a", true），直接返回 false（因为原始类型没有原型链）。
2. 如果 x 是对象，则沿着 x 的原型链向上查找，检查是否有 Y.prototype：
   • 先检查 x.__proto__ === Y.prototype，如果是，返回 true。
   • 如果不是，继续检查 x.__proto__.__proto__ === Y.prototype，依此类推，直到原型链尽头（null）。

class Animal {}
class Dog extends Animal {}

const dog = new Dog();
console.log(dog instanceof Dog);     // true
console.log(dog instanceof Animal);  // true（因为 Dog 继承 Animal）
console.log(dog instanceof Object);  // true（所有对象最终继承 Object）

instanceof 的实现

function myInstanceof(left, right) {
    if (left === null || typeof left !== 'object') return false // 不是对象或null
    if (typeof right !== 'function' || !right.prototype) {
        // 对于JS中的函数，typeof 返回 'function'
        // 但是对于其他对象，typeof 返回 'object'
        // 这里我们需要判断 right 是否是一个函数
        throw new TypeError('Right-hand side of instanceof is not callable');
    }
    let proto = Object.getPrototypeOf(left) // 获取对象的原型
    let prototype = right.prototype // 获取构造函数的原型
    while (proto) {
        if (proto === prototype) return true // 找到原型链上的prototype
        proto = Object.getPrototypeOf(proto) // 继续向上查找原型链
    }
    return false
}

typeof

用来返回变量的基本类型，以字符串的形式返回，且不会检查原型链

console.log(typeof 42);           // "number"
console.log(typeof "hello");      // "string"
console.log(typeof true);         // "boolean"
console.log(typeof undefined);    // "undefined"
console.log(typeof null);         // "object"（历史遗留 bug）
console.log(typeof {});           // "object"
console.log(typeof []);           // "object"（数组也是对象）
console.log(typeof function() {}); // "function"
console.log(typeof Symbol());     // "symbol"
console.log(typeof 123n);         // "bigint"

其中数组、对象、null都会被判断为object。函数也是对象，但是typeof对其进行了特殊处理，返回了function。

• typeof null === "object"
  这是 JavaScript 早期的一个 Bug，但由于历史原因无法修复。
• typeof [] === "object"
  数组本质是对象，无法直接区分数组和普通对象（可以用 Array.isArray() 判断）。
• typeof function() {} === "function"
  函数虽然是对象，但 typeof 对其特殊处理，返回 "function"。

总结

推荐组合使用：

• 先 typeof 判断是否是原始类型。
• 如果是对象，再用 instanceof 或 Array.isArray() 进一步判断。

在ES5中，是没有extends可用的，想要继承，就要自己手动解决了。 在继承里面，要解决的问题，简单的来看就是，属性还有方法的继承。

1.属性的继承

可以使用 Parent.call(this, ...args) 来解决。
如果这里不使用 call，直接将Child的原型指向了Parent，这里会出现引用类型数据共享问题

// 这里如果有引用类型对象，会造成数据共享的问题
Child.prototype = new Parent();

2.方法的继承

子类继承父类的方法，简单点就可以直接将子类的原型指向父类的原型。

Child.prototype = Parent.prototype

但是这里还会存在一个问题，就是子类修改方法，会影响父类。所以，这里需要另外建造一个对象，从而不影响父类，也就是使用Object.create()

Child.prototype = Object.create(Parent.prototype)

3.原型链完整

保证instanceof和constructor正确

• instanceof 应该能正确判断继承关系（child instanceof Parent 应为 true）。
• child.constructor 应指向 Child 而不是 Parent。

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // 修复 constructor

4.方法重写

子类方法覆盖父类方法，同时还能调用父类方法
在子类的原型上重写方法，然后在内部使用call来调用父类的方法，并写出子类自己的逻辑

Child.prototype.sayName = function() {
  Parent.prototype.sayName.call(this); // 调用父类方法
  console.log("Child's sayName");
};

5.静态方法继承

静态属性&方法
Parent.type = '0'
Parent.staticMethod = function(){}

例如这种该如何继承
在ES6上有Object.setPrototypeOf(Child, Parent)
在ES5上可以直接手动赋值

for (var key in Parent) {
  if (Parent.hasOwnProperty(key)) {
    Child[key] = Parent[key];
  }
}

以上面5点来进行总结，ES5中的继承可以写成如下的形式

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // (1) 属性继承
  this.age = age;
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // (3) 修复 constructor

// (5) 静态方法继承（可选）
for (var key in Parent) {
  if (Parent.hasOwnProperty(key)) {
    Child[key] = Parent[key];
  }
}