变量类型和计算

typeof能判断哪些类型

  • undefind string number boolean symbol
  • object (.typeof null === ‘object’ )
  • function

识别所有值类型

  1. let a0;
  2. console.log(typeof a0); // undefined
  4. const a1 = "string";
  5. console.log(typeof a1); // string
  7. const a2 = 1;
  8. console.log(typeof a2); // number
  10. const a3 = true;
  11. console.log(typeof a3); // boolean
  13. const a4 = Symbol("a4");
  14. console.log(typeof a4); // symbol

识别函数

  1. console.log(typeof console.log); // function
  2. console.log(typeof (() => {})); // function

判断是否是引用类型（不可在细分）

如需判断是否是数组，对象等，请用 instanceof

  1. const a0 = null;
  2. console.log(typeof a0); //object
  4. const a1 = { name: "wcd" };
  5. console.log(typeof a1); // object
  7. const a2 = ["a"];
  8. console.log(typeof a2); // object

类型转化

强制类型转换：paresInt， ParseFloat， toString… 隐式类型转换：if， 逻辑运算，== ，拼接字符串

String or toString

String() or toString() 都是将其他类型的变量转换为字符串类型 toString() 无法转换 null 和 undefined

  1. let a;
  2. let b = null;
  4. // console.log(a.toString()); // Cannot read property 'toString' of undefined
  5. // console.log(b.toString()); // Cannot read property 'toString' of null
  6. console.log(String(a)); // undefined
  7. console.log(String(b)); // null

变量计算

字符串拼接

  1. console.log(100 + 10); // 110
  2. console.log(100 + "10"); // '10010'
  3. console.log(true + "10"); // 'true10'

== 运算符

  1. console.log(100 == "100"); // true
  2. console.log(0 == ""); // true
  3. console.log(0 == false); // true
  4. console.log(false == ""); // true
  5. console.log(null == undefined); // true
  7. /**
  8.  * TODO: 偷懒写法，除 xx == null 之外，一律采用 ===
  9.  * 其实jQuery与代码打包之后也是这样的形式，
  10.  */
  11. const obj = {
  12.     name: "wcd",
  13. };
  14. if (obj.age == null) {
  15.     // ...
  16. }
  18. // 相当于
  19. if (obj.age === null || obj.age === undefined) {
  20.     // ...
  21. }

if 语句与逻辑运算

  1. // 经过两次非运算为 true 的为 truly 变量，反之则为 falsely
  2. // truly 变量: !!a === true
  3. // falsely 变量: !!a === false
  5. const num = 100;
  6. console.log(!num); // false
  7. console.log(!!num); // true
  9. console.log(!!{}); // true
  11. // 除此之外都是truly变量
  12. console.log(!!0); // false
  13. console.log(!!NaN); // false
  14. console.log(!!""); // false
  15. console.log(!!null); // false
  16. console.log(!!undefined); // false
  17. console.log(!!false); // false

逻辑判断

  1. console.log(10 && 0); // 0
  2. console.log("" || "abc"); // 'abc'
  3. // TODO: window环境下测试
  4. console.log(!window.abc); // true

原型和原型链

class 与 继承

类与继承

class的原型本质

  1. class Parent {
  2.     constructor(name = "wcd") {
  3.         this.name = name;
  4.     }
  5. }
  6. class Child extends Parent {}
  7. console.log(new Child());
  9. console.log(typeof Parent); // function
  10. console.log(typeof Child); // function
  12. // class的类型实际上是函数，所有可见class是语法糖

类型判断 instanceof

instanceof 与 typeof

instanceof 与 typeof 相比，instanceof 方法要求开发者明确的确认对象为某特定类型。 即 instanceof 用于判断引用类型属于哪个构造函数的方法。

  1. const arr = [];
  2. console.log(arr instanceof Array); // true
  3. console.log(typeof arr); // "object"

继承关系

instanceof 操作符用于检测对象是否属于某个 class，同时，检测过程中也会将继承关系考虑在内。

  1. // 类
  2. class Parent {}
  3. const _Parent = new Parent();
  4. console.log(_Parent instanceof Parent); // true
  6. // 也可以是构造函数，而非 class
  7. function GeParent() {}
  8. const ge = new GeParent();
  9. console.log(ge instanceof GeParent); // true

另外，更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。

  1. // 判断 f1 是否是 Fn 类的实例 , 并且是否是其父类型的实例
  2. function An() {}
  3. function Fn() {}
  4. Fn.prototype = new An();
  6. var f1 = new Fn();
  7. console.log(f1 instanceof Fn); // true
  8. console.log(f1 instanceof An); // true

f1 instanceof Fn 的判断逻辑是：

  • f1 的 _proto_ 一层一层往上，是否对应到 Fn.prototype
  • 再往上，看是否对应着 An.prototype
  • 再试着判断 f1 instanceof Object

原型和原型链

作用域和闭包

  1. // 闭包作用
  2. {
  3.   // 闭包隐藏数据，只提供 API
  4.   function createCache() {
  5.     const data = {}; // 闭包中的数据，被隐藏，不被外界访问
  6.     return {
  7.       set: function (key, val) {
  8.         data[key] = val;
  9.       },
  10.       get: function (key) {
  11.         return data[key];
  12.       },
  13.     };
  14.   }
  16.   const c = createCache();
  17.   c.set("a", 100);
  18.   console.log(c.get("a"));
  19. }

this

  1. // 模拟 bind
  2. Function.prototype.bind1 = function () {
  3.     // 将参数拆解为数组
  4.     const args = Array.prototype.slice.call(arguments)
  6.     // 获取 this（数组第一项）
  7.     const t = args.shift()
  9.     // fn1.bind(...) 中的 fn1
  10.     const self = this
  12.     // 返回一个函数
  13.     return function () {
  14.         return self.apply(t, args)
  15.     }
  16. }
  18. function fn1(a, b, c) {
  19.     console.log('this', this)
  20.     console.log(a, b, c)
  21.     return 'this is fn1'
  22. }
  24. const fn2 = fn1.bind1({x: 100}, 10, 20, 30)
  25. const res = fn2()
  26. console.log(res)

写 var 与不写 var 有什么区别

  1. // 思考：写 var 与不写 var 有什么区别
  3. // 使用 var 关键字定义变量的时候，相当于在当前的作用域内声明了一个变量
  4. // varFun函数声明 a1 变量，a1 相当于局部变量，只允许当前作用域内访问
  5. // 如果不使用 var 相当于属性的赋值，相当于在window全局定义属性b
  7. // delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。
  8. // TODO: 可以验证变量跟属性
  10. // var variable
  11. var a = 1;
  12. console.log(a); // 1
  13. delete a;
  14. console.log(a); // 1
  16. b = 2;
  17. console.log(b); // 2
  18. delete b;
  19. console.log(b); // b is not defined
  21. (function varFun() {
  22.     var c = 3;
  23.     console.log(c); // 3
  24. })();
  25. console.log(c); // c is not defined

闭包题目

  1. function fun(n, o) {
  2.   console.log(o);
  3.   return {
  4.     fun: function (m) {
  5.       return fun(m, n);
  6.     },
  7.   };
  8. }
  10. var a = fun(0); a.fun(1); a.fun(2); a.fun(3); // undefined,0,0,0
  11. var b = fun(0).fun(1).fun(2).fun(3); // undefined,0,1,2
  12. var c = fun(0).fun(1); // undefined,0

解答：https://www.cnblogs.com/xxcanghai/p/4991870.html

参考

JavaScript instanceof 运算符深入剖析