16.重学webpack——原理之预备知识Symbol.toStringTag和defineProperty

【重学webpack系列——webpack5.0】

1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。
从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。
可以点击上方专栏订阅哦。

以下是本节正文：

1. Symbol.toStringTag

这是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签

我们通常利用Object.prototype.toString()来返回数据类型，比如：

console.log(Object.prototype.toString.call("foo")); // "[object String]"
console.log(Object.prototype.toString.call([1, 2])); // "[object Array]"
console.log(Object.prototype.toString.call(3)); // "[object Number]"
console.log(Object.prototype.toString.call(true)); // "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"

那么这些返回值[object Xxx]是怎么来的？其实就是Object.prototype.toString()方法会去读取Symbol.toStringTag标签并把它包含在自己的返回值里。
举例说明：

let myObj = {}
Object.defineProperty(myObj, Symbol.toStringTag, { value: "Yuhua" });
console.log(Object.prototype.toString.call(myObj)); //[object Yuhua]

上面的例子第二行就通过Object.defineProperty改写了myObj的Symbol.toStringTag，将值改为Yuhua，所以，原本myObj的类型[object Object]变成了[object Yuhua]

• 结论：
  • 通过重定义数据的Symbol.toStringTag可以改写Object.prototype.toString.call()返回的数据类型。
  • 也就是说，可以使得数据类型自定义

2.defineProperty

defineProperty 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

• obj 要在其上定义属性的对象。
• prop 要定义或修改的属性的名称。
• descriptor将被定义或修改的属性描述符。

let obj = {};
var ageValue = 10;

Object.defineProperty(obj, "age", {
  //writable: true, //是否可修改
  //value: 10, //writeable 和 set不能混用
  get() {
    return ageValue;
  },
  set(newValue) {
    ageValue = newValue;
  },

  enumerable: true, //是否可枚举 for(key in obj)
  configurable: true, //是否可配置可删除 delete
});

console.log(obj.age);
obj.age = 20;
console.log(obj.age);

• 特别注意：writable和value两个属性，不能与get/set同时存在！！！