1.原始值和引用值类型及区别

Js中的变量是弱类型，没有定义固定数据类型，因此变量的值和数据类型在运行过程中可以改变。
原始值：Number，String，Boolean，Undefinde，NUll，Symbol，BigInt（2020）
引用值：Object（包括Array，Function..）
存储区别：
原始值：值直接存储在栈中，原因：空间小，大小稳定，会被频繁调用
引用值：存储在堆中，栈中存储该内存地址的指针 原因：大小不固定，会占用大空间
值的可变：
原始值：不可改变，只可以重新赋值，这时候会摧毁原值，并分配心的内存地址，变量指向新的内存地址
引用值：可变，且始终指向一个对象
区分可变不可变的关键就是同一变量对应的内存地址有没有改变
复制值：
原始值是复制值，引用值是复制指针地址，复制值所以会改变原值
值的比较
原始值：比较各自栈中的值是否相等
引用值：栈中指向的地址相同，才会是相等
类型检测
原始值：typeof null与Object会返回object
引用值：instanceof 若 XX instanceof Object 一定是true 意义不大 所以可以去判断是否为一个原始值

2. 判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor

1.typeof返回一个字符串类型

  1. typeof operand
  2. typeof(operand)
描述 结果
Undefined “undefined”
NUll “object”
Boolean “boolean”
Number “number”
String “string”
Symbol “symbol”
Function “function”
Obejct “object” 
  1. // 数值 number
  2. typeof 1 // "number"
  3. typeof NaN // "number"
  4. typeof 3.14 // "number"
  5. typeof Infinity // "number"
  7. // 字符串
  8. typeof "火车" // "string"
  9. typeof typeof typeof 1 // "string"
  11. // 布尔值
  12. typeof true // "boolean"
  14. // Symbol
  15. typeof Symbol() // "symbol"
  16. typeof Symbol("foo") // "symbol"
  18. // Undefined
  19. typeof undefined // "undefined"
  21. // Null
  22. typeof null // "object"
  24. // Object
  25. typeof {name: "火车"} // "object"
  26. typeof /regex/ // 正则也是对象 "object"
  28. // Function
  29. typeof function() {} // "function"
  30. typeof class C {} // "fun

注意注意
当使用new操作符的时候也是对象，但是只有函数function除外

  1. let str = new String('String')
  2. let num = new Number(100);
  3. typeof str  // "object" 
  4. typeof num  // "object" 
  6. let func = new Function()
  7. typeof func // "function"

2 instance of
instance of 可以正确的判断对象的类型，因内部机制是通过判断对象的原型链是不是找到类型的prototype

  1. console.log(2 instanceof Number);                    // false
  2. console.log(true instanceof Boolean);                // false 
  3. console.log('str' instanceof String);                // false  
  4. console.log([] instanceof Array);                    // true
  5. console.log(function(){} instanceof Function);       // true
  6. console.log({} instanceof Object);                   // true    
  7. // console.log(undefined instanceof Undefined); 报错
  8. // console.log(null instanceof Null); 报错

可以看出直接的字面量值判断数据类型，instanceof可以精准判断引用数据类型（Array ,Function,Object）,而基本数据类型不能被instance of精准判断
3.constructor
顾名思义构造函数，肯定是指向构造函数，在原型上才有这个属性，由于实例出来的对象会继承原型上的属性，所以也有这个属性

  1. console.log((2).constructor === Number); // true
  2. console.log((true).constructor === Boolean); // true
  3. console.log(('str').constructor === String); // true
  4. console.log(([]).constructor === Array); // true
  5. console.log((function() {}).constructor === Function); // true
  6. console.log(({}).constructor === Object); // true
  8. //这里有一个坑，如果我创建一个对象，更改它的原型，constructor就会变得不可靠了
  9. function Fn(){};
  10. Fn.prototype=new Array();
  11. var f=new Fn();
  13. console.log(f.constructor===Fn);    // false
  14. console.log(f.constructor===Array); // true

4.Object.prototype.toString.call()
Object.prototype.toString.call(arr)使用toString()结合call改变toString的this指向

  1. var test = Object.prototype.toString;
  2. console.log(test.call(1));//[object Number]
  3. console.log(test.call("1"));//[object String]
  4. console.log(test.call(true));//[object Boolean]
  5. console.log(test.call(function(){}));//[object Function]
  6. console.log(test.call(undefined));//[object Undefined]
  7. console.log(test.call(null));//[object Null]
  8. console.log(test.call([]));//[object Array]

3.类数组与数组的区别与转换

相同点：都可用下标访问每个元素，都有length属性
不同点：数组对象的类型是Array，类数组的对象是object，类数组不具有数组所具有的方法，数组遍历可以用 for in和for循环,类数组只能用for循环遍历。
常见的类数组有: 函数的参数 arguments, DOM 对象列表(比如通过 document.querySelectorAll 得到的列表), jQuery 对象 (比如 $(“div”)).
类数组与数组的相互转化：

  1. //第一种方法
  2. Array.prototype.slice.call(arrayLike, start);
  3. //第二种方法
  4. [...arrayLike];
  5. //第三种方法:
  6. Array.from(arrayLike);

PS: 任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。
Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

4. 数组的常见API

pop（）：弹出数组中最后一个元素，并返回这个元素
push（）：添加一个或多个元素到数组末尾，并返回新的长度
shift（）：弹出数组的第一个元素，并返回这个元素
unshift（）：在数组开头添加一个或多个元素，并返回新的长度
splice（x，n，…）：从x位置开始截取，截取n个并返回被截取的元素，第三个参数是截取完了需要添加哪些元素，从x的位置开始添加

  1. let arr = [1,2,3,4,5,6] 
  2. let result = arr.splice(1,3,'x','y','z')
  3. console.log(arr) // [1, "x", "y", "z", 5, 6]
  4. console.log(result) // [2, 3, 4]

forEach（）：传入一个函数，把数组的每一项作为函数的参数被调用，不改变原数组
map（）：传入一个函数，把数组的每一项作为函数的参数被调用，然后用函数每次的返回值组成新的数组并返回，不改变原数组
filter（）：传入一个函数，把数组的每一项作为函数的参数被调用，在函数内部判断符合条件的每一项，把它们组成新的数组并返回，不改变原数组

5.bind、call、apply的区别

call、apply、bind改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向

call和apply的区别

主要提现在参数的写法上
Call：

Function.call(obj,[param1[,param2[,…[,paramN]]]])

需要注意以下几点：

  • 调用 call 的对象，必须是个函数 Function。
  • call 的第一个参数，是一个对象。 Function 的调用者，将会指向这个对象。如果不传，则默认为全局对象 window。
  • 第二个参数开始，可以接收任意个参数。每个参数会映射到相应位置的 Function 的参数上。但是如果将所有的参数作为数组传入，它们会作为一个整体映射到 Function 对应的第一个参数上，之后参数都为空。 ```javascript function func (a,b,c) {}

func.call(obj, 1,2,3) // func 接收到的参数实际上是 1,2,3

func.call(obj, [1,2,3]) // func 接收到的参数实际上是 [1,2,3],undefined,undefined

  1. apply的写法
  2. ```javascript
  3. Function.apply(obj[,argArray])

需要注意的是：

  • 它的调用者必须是函数 Function，并且只接收两个参数，第一个参数的规则与 call 一致。
  • 第二个参数，必须是数组或者类数组，它们会被转换成类数组，传入 Function 中，并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间，很重要的一个区别。 ```javascript func.apply(obj, [1,2,3]) // func 接收到的参数实际上是 1,2,3

func.apply(obj, { 0: 1, 1: 2, 2: 3, length: 3 }) // func 接收到的参数实际上是 1,2,3

  1. **call和apply的用途**
  3. ---
  5. 下面会分别列举 call 和 apply 的一些使用场景。声明：例子中没有哪个场景是必须用 call 或者必须用 apply 的，只是个人习惯这么用而已。
  6. <a name="2Z02A"></a>
  7. #### call的使用场景：
  8. <a name="Z8SXU"></a>
  9. #### - 对象的继承
  11. ```javascript
  12. function superClass () {
  13.     this.a = 1;
  14.     this.print = function () {
  15.         console.log(this.a);
  16.     }
  17. }
  19. function subClass () {
  20.     superClass.call(this);
  21.     this.print();
  22. }
  24. subClass();
  25. // 1

subClass 通过 call 方法，继承了 superClass 的 print 方法和 a 变量。此外，subClass 还可以扩展自己的其他方法。
2.借用方法。还记得刚才的类数组么？如果它想使用 Array 原型链上的方法，可以这样：

  1. let domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

这样，domNodes 就可以应用 Array 下的所有方法了。

apply 的一些妙用

1.Math.max 用它来获取数组中最大的一项。

  1. let max = Math.max.apply(null, array);

同理，要获取数组中最小的一项，可以这样：

  1. let min = Math.min.apply(null, array);

2、实现两个数组合并。在 ES6 的扩展运算符出现之前，我们可以用 Array.prototype.push来实现

  1. let arr1 = [1, 2, 3];
  2. let arr2 = [4, 5, 6];
  4. Array.prototype.push.apply(arr1, arr2);
  5. console.log(arr1); // [1, 2, 3, 4, 5, 6]

bind 的使用

bind() 方法创建一个新的函数，在调用时设置 this 关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。

  1. Function.bind(thisArg[, arg1[, arg2[, ...]]])

bind 方法 与 apply 和 call 比较类似，也能改变函数体内的 this 指向。不同的是，bind 方法的返回值是函数，并且需要稍后调用，才会执行。而 apply 和 call 则是立即调用。

  1. function add (a, b) {
  2.     return a + b;
  3. }
  5. function sub (a, b) {
  6.     return a - b;
  7. }
  9. add.bind(sub, 5, 3); // 这时，并不会返回 8
  10. add.bind(sub, 5, 3)(); // 调用后，返回 8

总结：

call 和 apply 的主要作用，是改变对象的执行上下文，并且是立即执行的。它们在参数上的写法略有区别。 bind 也能改变对象的执行上下文，它与 call 和 apply 不同的是，返回值是一个函数，并且需要稍后再调用一下，才会执行。 最后，分享一个在知乎上看到的，关于 call 和 apply 的便捷记忆法： 猫吃鱼，狗吃肉，奥特曼打小怪兽。> 有天狗想吃鱼了 猫.吃鱼.call(狗，鱼) 狗就吃到鱼了 猫成精了，想打怪兽 奥特曼.打小怪兽.call(猫，小怪兽) 猫也可以打小怪兽了

new的原理

1.new关键字会首先创建一个空对象
2.将这个空对象的原型对象指向构造函数的原型属性，从而继承原型上的方法
3.将this指向这个空对象，执行构造函数中的代码，以获取私有属性
4.如果构造函数返回了一个对象res，就将该返回值res返回，如果返回值不是对象，就将创建的对象返回
理解了new的原理，手动实现就很简单了.

  1.   //构造函数
  2.          function Person(name,sex){
  3.              this.name=name;
  4.              this.sex=sex
  5.          }
  6.          Person.prototype.getName=function(){
  7.             return this.name
  8.          }
  10.          const forceddd=myNew(Person,'forceddd','男');
  12. function myNew(){
  13.     let target = {} //创建的新对象
  14.   //第一个参数是构造函数 
  15.   let [constructor,...args] = [...arguments];
  16.   //执行[[原型]]连接；target是constructor的实例
  17.   target.__proto__ = constructor.prototype
  18.   //执行构造函数，将属性或方法添加到创建的空对象上
  19.   let result = constructor.apply(target,args)
  20.   if(result && (typeof(result) == "object" || typeof(result)==="function")){
  21.           //如果构造函数执行的结构返回的是一个对象，那么返回这个对象
  22.       return result
  23.   }
  24.             //如果构造函数返回的不是一个对象，返回创建的新对象
  25.      return target
  26. }