重温 ES6 Symbol

栏目: JavaScript · 发布时间: 5年前

内容简介：1.Symbol 通过工厂函数创建，不能以 new 的方式创建，所以使用 instanceof 运算符返回的结果为 false2.Symbol 使用 typeof 运算符返回 “symbol”3.Symbol 工厂函数能支持一个可选的参数，用于描述当前的 symbol

1.Symbol 通过工厂函数创建，不能以 new 的方式创建，所以使用 instanceof 运算符返回的结果为 false

var sym = Symbol();
var sym1 = new Symbol(); // TypeError
sym instanceof Symbol // false

2.Symbol 使用 typeof 运算符返回 “symbol”

var sym = Symbol('foo');
typeof sym;     // "symbol"

3.Symbol 工厂函数能支持一个可选的参数，用于描述当前的 symbol

var sym2 = Symbol('foo');
var sym3 = Symbol('foo');

4.Symbol 是唯一的， Symbol("foo") == Symbol("foo") 返回 false

Symbol('foo') === Symbol('foo'); // false

5.Symbol 与数值或字符串进行运算时，会抛出异常

sym | 0 // TypeError
Symbol("foo") + "bar" // TypeError

6.Symbol 工厂函数返回的 symbol，可作为对象的属性名，可以避免属性冲突，在 for...in 迭代中不可枚举

var obj = {};

obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";

for (var i in obj) {
   console.log(i); // logs "c" and "d"
}

7.Symbol 工厂函数返回的值，可作为对象属性名，当使用 JSON.stringify() 进行序列化时，该属性会被忽略

JSON.stringify({[Symbol("foo")]: "foo"});  // '{}'

8.Symbol 是唯一的，但可以使用 Symbol.for() 共享同一个 Symbol 值

var mySymbol1 = Symbol.for('some key'); 
var mySymbol2 = Symbol.for('some key');
mySymbol1 == mySymbol2 //true

Symbol 实战

对象字面量私有属性和方法

const myPrivateMethod = Symbol("myPrivateMethod");
const myPrivateProperty = Symbol("myPrivateProperty");

const obj = {
    [myPrivateProperty]: "semlinker",

    [myPrivateMethod]() {
        return `Hello ${this[myPrivateProperty]}!!!`;
    },

    hello() {
        console.log(this[myPrivateMethod]()); 
    }
};

console.log(Object.keys(obj));
console.log(obj.hello());

除了在创建对象字面量时可以使用 Symbol 外，在定义类的私有属性和方法时也可以使用。

类的私有属性和方法

const myPrivateMethod = Symbol("myPrivateMethod");
const myPrivateProperty = Symbol("myPrivateProperty");

class MyClass {
    constructor() {
        this[myPrivateProperty] = "semlinker";
    }

    [myPrivateMethod]() {
        return `Hello ${this[myPrivateProperty]}!!!`;
    }

    hello() {
        console.log(this[myPrivateMethod]()); 
    }
}

const myCls = new MyClass();
console.log(myCls.hello());

在 ES6 中，引入了一些全局的 Symbols，比如：Symbol.match，Symbol.replace，Symbol.search，Symbol.iterator 和 Symbol.split。这里我们简单介绍一下 Symbol.search 和 Symbol.iterator。

Symbol.iterator

class Skill {
    constructor() {
        this.skills = ['Angular', 'React', 'Vue', 'Koa', 'Ionic'];
    }

    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                const value = this.skills[index++];
                const done = index === this.skills.length + 1;
                return {
                    value,
                    done
                };
            }
        }
    }
}

const mySkills = new Skill();
console.log([...mySkills]);
for (let skill of mySkills) {
    console.log(`My skill is ${skill}`);
}

Symbol.search

先来简单看个示例：

'angular'.search('ng') // 4

该示例的执行流程：

解析 'angular'.search('ng')
把 ‘angular’ 转换为字符串对象 new String('angular')
把 ‘ng’ 转换为正则对象 new Regexp('ng')
调用 ‘angular’ 字符串对象的 search 方法，该方法内部会自动调用 ng 正则对象的 Symbol.search 方法

具体可以参考以下伪代码：

// pseudo code for String class
class String {
    constructor(value) {
        this.value = value;
    }

    search(obj) {
        obj[Symbol.search](this.value);
    }
}

class RegExp {
    constructor(value) {
        this.value = value;
    }

    [Symbol.search](string) {
        return string.indexOf(this.value);
    }
}

此外利用 Symbol.search 我们还可以让 String.prototype.search() 方法调用我们自定义对象内部的 Symbol.search() 方法，从而实现自定义 search 逻辑：

class Article {
    constructor(tag) {
        this.tag = tag;
    }

    [Symbol.search](string) {
        return string.indexOf(this.tag) >= 0 ? 'Found' : 'Not_Found';
    }
}

var article = new Article('Angular');
console.log('Angular7'.search(article)); // Found
console.log('重温ES6'.search(article)); // Not_Found

以上示例的执行流程：

解析 'Angular7'.search(article) 语句
把 ‘Angular7’ 转换为字符串对象 new String("Angular7")
由于 article 是对象，这里不需要进行转换
调用 ‘Angular7’ 字符串对象的 search 方法，该方法会自动调用 article 对象内部的 Symbol.search 方法，比如 article[Symbol.search]('Angular7')

本文简单介绍了 ES6 Symbol 的一些特性，然后介绍了 Symbol 几个应用场景，若想进一步了解 Symbol，可以阅读一下冴羽大神写的 ES6 系列之模拟实现 Symbol 类型这一篇文章。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Filter Bubble

Eli Pariser / Penguin Press / 2011-5-12 / GBP 16.45

In December 2009, Google began customizing its search results for each user. Instead of giving you the most broadly popular result, Google now tries to predict what you are most likely to click on. Ac......一起来看看《The Filter Bubble》这本书的介绍吧!

码农工具