ES2015学习笔记(2)-Symbol

作者: 全栈顾问 | 来源:发表于2019-08-05 08:17 被阅读0次

    一句话总结:通过Symbol可以更好地定义对象的行为,控制属性的可见性。

    翻译自ES6 in Action: Symbols and Their Uses

    Symbol是一种新的基本数据类型(primitive type),它每一次都会产生一个唯一值,不会和其它的Symbol冲突(这个有点像UUID)。我们一起研究一下Symbol如何使用。

    创建Symbol

    创建Symbol对象就是直接调用Symbol函数。Symbol函数只是个普通函数并不是构造函数,所以不能使用new

    const foo = Symbol();
    const bar = Symbol();
    
    foo === bar
    // <-- false
    

    创建Symbol对象时可以给Symbol传入一个字符串参数,作为对象的标记。这个标记并不影响Symbol实际的值,可以通过toString函数显示,这个通常是为了debugging方便。多个Symbol可以指定相同的标签,但是最好避免这样做。

    let foo = Symbol('baz');
    let bar = Symbol('baz');
    
    foo === bar
    // <-- false
    console.log(foo);
    // <-- Symbol(baz)
    

    用Symbol可以解决什么问题

    Symbol可以替代字符串或或者数字作为常量。

    class Application {
      constructor(mode) {
        switch (mode) {
          case Application.DEV:
            // Set up app for development environment
            break;
          case Application.PROD:
            // Set up app for production environment
            break;
          case default:
            throw new Error('Invalid application mode: ' + mode);
        }
      }
    }
    
    Application.DEV = Symbol('dev');
    Application.PROD = Symbol('prod');
    
    // Example use
    const app = new Application(Application.DEV);
    

    字符串和整数的值不能保证唯一,例如,数字2或字符串development等也可以在程序的其他地方有不同的含义。使用Symbol使我们可以更确定值的含义是什么。

    Symbol的另一个用法是作为对象的属性名。通过方括号我们可以让Symbol对象作为对象的属性。这样做有两个好处,首先,Symbol对象不会和对象已有的属性产生冲突,因为它是唯一的;第二,Symbol对象属性在for...inObject.keys()Object.getOwnPropertyNames()JSON.stringify()这些方法中被忽略掉。

    const user = {};
    const email = Symbol();
    
    user.name = 'Fred';
    user.age = 30;
    user[email] = 'fred@example.com';
    
    Object.keys(user);
    // <-- Array [ "name", "age" ]
    
    Object.getOwnPropertyNames(user);
    // <-- Array [ "name", "age" ]
    
    JSON.stringify(user);
    // <-- "{"name":"Fred","age":30}"
    

    如果需要访问,可以通过函数Object.getOwnPropertySymbols()Reflect.ownKeys()获得。

    Object.getOwnPropertySymbols(user);
    // <-- Array [ Symbol() ]
    
    Reflect.ownKeys(user)
    // <-- Array [ "name", "age", Symbol() ]
    

    众所周知的符号(Well-know Symbol)

    由于Symbol对象属性对es6之前的代码实际上是不可见的,所以它们非常适合在不破坏向后兼容性的情况下向JavaScript现有类型添加新功能。所谓众所周知的符号(Well-know Symbol)是符号函数的预定义属性,用于自定义某些语言特性的行为,并用于实现新的功能,如迭代器。

    Symbol.iterator是一个众所周知的符号,它用于为对象分配一个特殊的方法,允许对对象进行迭代。

    const band = ['Freddy', 'Brian', 'John', 'Roger'];
    const iterator = band[Symbol.iterator]();
    
    iterator.next().value;
    // <-- { value: "Freddy", done: false }
    iterator.next().value;
    // <-- { value: "Brian", done: false }
    iterator.next().value;
    // <-- { value: "John", done: false }
    iterator.next().value;
    // <-- { value: "Roger", done: false }
    iterator.next().value;
    // <-- { value: undefined, done: true }
    

    内置类型StringArrayTypedArrayMapSet都有一个默认符号迭代器方法,当这些类型的实例在for...of循环中,或与spread操作符一起使用时,将调用该方法。浏览器也开始使用这个符号,iterator允许以相同的方式遍历NodeList和HTMLCollection等DOM结构。

    全局注册

    ES6规范还定义了一个运行时范围的符号注册表,这意味着我们可以在不同的执行上下文中存储和检索符号,例如在文档和嵌入式iframeservice worker之间。

    Symbol.for(key)函数从注册表中检索给定键的符号。如果不存在,则返回一个新符号。相同键的后续调用将返回相同的符号。

    Symbol.keyFor (symbol)函数检索给定符号的键。使用注册表中不存在的符号调用方法将返回undefined

    onst debbie = Symbol.for('user');
    const mike   = Symbol.for('user');
    
    debbie === mike
    // <-- true
    
    Symbol.keyFor(debbie);
    // <-- "user"
    

    何时使用

    在一些用例中,使用Symbol提供了好处。本文前面提到的一种情况是,当我们想要向对象添加在序列化对象时不包含的隐藏属性时。

    库的开发者还可以使用Symbol对象属性或方法安全地增强客户端对象,而不必担心覆盖现有键(或让其他代码覆盖对象的键)。例如,组件(例如日期选择器)经常使用各种选项和需要存储在某处的状态初始化。将小部件实例分配给DOM元素对象的属性并不理想,因为该属性可能与另一个键冲突。使用基于符号的键可以很好地解决这个问题,并确保小部件实例不会被覆盖。

    参考

    ES6 in Action: Symbols and Their Uses

    相关文章

      网友评论

        本文标题:ES2015学习笔记(2)-Symbol

        本文链接:https://www.haomeiwen.com/subject/qvticctx.html