[JavaScript] 原生JavaScript灵魂拷问，你能答上多少(一)#yyds干货盘点#

完整的分析我还正在赶工中，希望大家到时候可以来支持一下。

• 基本数据类型：共有7种

  Boolean Number String undefined null Bigint Symbol

  Symbol ： ES6 引入的一种新的原始值，表示独一无二的值，主要为了解决属性名冲突问题。
  

• 引用数据类型：1种

  Object对象(包括普通Object、Function、Array、Date、RegExp、Math)

  2.你真的懂typeof吗？
  
• typeof的作用？
  区分数据类型，可以返回7种数据类型：number、string、boolean、undefined、object、function ，以及 ES6 新增的 symbol
  
• typeof 能正确区分数据类型吗？
  不能。对于原始类型，除 null 都可以正确判断；对于引用类型，除 function 外，都会返回 "object"
  
• typeof 注意事项
  
  
  
  • typeof 返回值为 string 格式，注意类似这种考题: typeof(typeof(undefined)) -> "string"
    
  • typeof 未定义的变量不会报错，返回 "undefiend"
    
  • typeof(null) -> "object": 遗留已久的 bug
    
  • typeof无法区别数组与普通对象: typeof([]) -> "object"
    
  • typeof(NaN) -> "number"
    
  
  
• 习题

  console.log(typeof(b));
  console.log(typeof(undefined)); 
  console.log(typeof(NaN)); 
  console.log(typeof(null)); 
  var a = '123abc'; 
  console.log(typeof(+a)); 
  console.log(typeof(!!a)); 
  console.log(typeof(a + "")); 
  console.log(typeof(typeof(null)));
  console.log(typeof(typeof({})));

  答案

  undefined // b未定义，返回undefined
  undefined
  number // NaN 为number类型
  object
  number // +a 类型转换为NaN
  boolean
  string
  string // typeof(null) -> "object"; typeof("object") -> "string"
  string

  3.什么是instanceof？你能模拟实现一个instanceof吗？
  
• instanceof 判断对象的原型链上是否存在构造函数的原型。只能判断引用类型。
  
• instanceof 常用来判断 A 是否为 B 的实例
  

// A是B的实例，返回true，否则返回false
// 判断A的原型链上是否有B的原型
A instaceof B

• 模拟实现 instanceof
  

function instance_of(Case, Constructor) {
  // 基本数据类型返回false
  // 兼容一下函数对象
  if ((typeof(Case) != 'object' && typeof(Case) != 'function') || Case == 'null') return false;
  let CaseProto = Object.getPrototypeOf(Case);
  while (true) {
    // 查到原型链顶端，仍未查到，返回false
    if (CaseProto == null) return false;
    // 找到相同的原型
    if (CaseProto === Constructor.prototype) return true;
    CaseProto = Object.getPrototypeOf(CaseProto);
  }
}

console.log(instance_of(Array, Object)) // true
function User(name){
  this.name = name;
}
const user = new User('zc');
const vipUser = Object.create(user);
console.log(instance_of(vipUser, User)) // true

• ES6 提供的新方法 Array.isArray()
  
• 如果不存在Array.isArray()呢？可以借助Object.prototype.toString.call() 进行判断，此方式兼容性最好

  if (!Array.isArray) {
  Array.isArray = function(o) {
    return typeof(o) === 'object' 
         && Object.prototype.toString.call(o) === '[object Array]';
  }
  }

• instanceof 判断
  

// 如果为true，则arr为数组
arr instanceof Array

NaN === NaN // false
NaN == NaN // false

function isNaN(x) {
  return x != x;
}

• 全局函数 isNaN 方法：不推荐使用。MDN 对它的介绍是：isNaN 函数内包含一些非常有趣的规则。
  

// 为什么对象会带来三种不同的结果
// 是不是很有趣
// 具体原因可以参考类型转换篇
console.log(isNaN([])) // false
console.log(isNaN([1])) // false
console.log(isNaN([1, 2])) // true 
console.log(isNaN(null)) // false
console.log(isNaN(undefined)) // true

• Number.isNaN (推荐使用)
  

toString.call(()=>{})     // [object Function]
toString.call({})       // [object Object]
toString.call([])       // [object Array]
toString.call('')       // [object String]
toString.call(22)       // [object Number]
toString.call(undefined)  // [object undefined]
toString.call(null)     // [object null]
toString.call(new Date)   // [object Date]
toString.call(Math)     // [object Math]
toString.call(window)     // [object Window]

• 基础：这两个方法属于 Object 对象，是为了解决 JavaScript 值运算与显示的问题。为了更适合自身功能，很多 JavaScript 内置对象都重写了这两个方法。
  
• toString(): 返回当前对象的字符串形式；valueOf() : 返回该对象的原始值
  
• 各个类型下两个方法返回值情况对比
  

• 调用优先级
  隐式转换时会自动调用 toString 和 valueOf 方法，两者优先级如下：
  
  
  
  • 强制转化为字符串类型时，优先调用 toString 方法
    
  • 强制转换为数值类型时，优先调用 valueOf 方法
    
  • 使用运算符操作符情况下，valueOf 优先级高于 toStirng
    
  • 对象的类型转换见下一问。
    
  
  

• ToPrimitive 方法接受两个参数，一个是输入的值 input，一个是期望转换的类型 PreferredType
  
  
  • 如果未传入 PreferredType 参数，让 hint 等于 'default'，后面会将 hint 修改为 'number'
    
  • 如果 PreferredType 是 hint String，让 hint 等于 'string'
    
  • 如果 PreferredType 是 hint Number，让 hint 等于 'number'
    
  • 返回 OrdinaryToPrimitive(input, hint)
    
  
  
• OrdinaryToPrimitive(input, hint)
  
  
  • 如果 hint 是 'string'，那么就将 methodNames 设置为 toString、valueOf
    
  • 如果 hint 是 'number'，那么就将 methodNames 设置为 valueOf、toString
    
  
  

methodName 存储的就是当前 preferredType 下的调用优先级，如果全部调用完毕仍然未转化为原始值，会发生报错。
9.你能做出下面这个题吗？

const a = {x:1};
const b = {x:2};
const obj = {};
obj[a] = 100;
obj[b] = 200;

有了第七问和第八问的知识，这个题目就不难了。 `JavaScript` 对象的键必须是字符串，因此分别需要将对象 `a` 和 `b` 转换为 `string` 类型。具体转换流程：
```js
// 1.执行ToPrimitive
// hint 为 string
ToPrimitive(a, 'hint String')
// 2.执行OrdinaryToPrimitive
OrdinaryToPrimitive(a, 'string')
// 3.返回methodNames
methodNames = ['toString', 'valueOf']
// 4.调用methodNames里方法
// 调用toString
a.toString() // 返回[object Object]

200
200

String([1,2,3]) // 1,2,3
String({x:1}) // [object Object]
1 + '1' // 11
1 + {} // 1[object Object]

1[object Object]
1

"[object Object]"

""

[object Object][object Object]

// ele   遍历的元素
// index 遍历的元素索引
// arr   数组
arr.map(function(ele, index, arr){})

parseInt('1', 0, ['1','2','3'])
parseInt('2', 1, ['1','2','3'])
parseInt('3', 2, ['1','2','3'])

var a = {
  value: 0,
  valueOf: function() {
    this.value++;
    return this.value;
  }
};
console.log(a == 1 && a == 2); //true