es6 Symbole入门理解

Symbol

//我简单理解这个东西就是可以做唯一标识,也可以不是
    var s1 = Symbol('s1)         //这就是唯一的
    var s2 = Symbol.for('s2')   //这个就不是唯一的了
    var obj = {
        [s1] : 'aaa'
    }
    var obj2 = {}
    var obj[s1] = 'bbb'

内置Symbol的11个值?

    // 阮大师的话我真没理解啥意思。。。
    // 我理解这个就是对原生一些方法的拦截,不执行源生方法改执行自己的,所以如果想实现功能必须自己写代码完成
    
    // 1. hasInstance
    class MyClass {
      [Symbol.hasInstance](foo) {
        return foo instanceof Array;
      }
    }
    [1, 2, 3] instanceof new MyClass() // true
    //当MyClass被当作是否为另外一个实例的构造函数比较时,hasInstance会执行

    // 2. isConcatSpreadable
    var a = [1, 2]
    var b = [3, 4]
    var c = a.concat(b)    //[1, 2, 3, 4]
    b[Symbol.isConcatSpreadable] = false    // 这里属性有3个值  undefined和true 这俩是一个意思,  还有个false就是不分解合并。 
    a.concat(b)    // [1, 2, [3, 4]]                 // 不分解合并就成这样了

    // 3. species    通过这个函数的返回值来创建实例
    class MyArray extends Array {
      static get [Symbol.species]() { return Array; }
    }
    let a = new MyArray(1,2,3);
    let mapped = a.map(x => x * x);

    a instanceof MyArray // true
    a instanceof Array // true

    mapped instanceof MyArray // false
    mapped instanceof Array // true

    // 4. match
    class MyMatcher {
      [Symbol.match](string) {
        //实现match
        var reg = new RegExp(string)
        return 'hello world'.match(reg)        //内部必须实现match并把结果返回出去。
        //return 'hello world'.indexOf(string);  //阮前辈的案例  
      }
    }
    'e'.match(new MyMatcher())

    // 5. replace
    const x = {};
    x[Symbol.replace] = (...s) => console.log(s);
    //能得到这个结果,说明...s结构了2个参数,一个是'Hello',一个是'World'
    'Hello'.replace(x, 'World') // ["Hello", "World"]

    //为了完成替换功能,改了一下demo
     const x = {};
        x[Symbol.replace] = (s1, s2) => {
            var str = '__'
            console.log('s1:', s1)    //Hello
            console.log('s2:', s2)   //World 
            return s1.replace(str, s2)
        };
        console.log('Hello __'.replace(x, 'World')) // ["Hello", "World"]

    // 6. search    //搜索时的  'foobar'.search(new MySearch('foo')) // 0
    // 7. split        //分割时的    'foobar'.split(new MySplitter('baz'))
    // 8. iterator    //for..of   解构时的    [...myIterable],    for(let value of myCollection) {}
    // 9. toPrimitive  //转为原始类型的值时会执行  Number,String, Default
            2 * obj // 246
            3 + obj // '3default'
            obj == 'default' // true
            String(obj) // 'str'
    // 10. unscopables
    //这个东西和with密不可分。
     var obj = {
                a: 1,
                b: 2
            }
     //with的作用就是在打括号里可以直接使用该对象的属性或方法,
    with(obj) {
            console.log(a)
            console.log(b)
        }
    //unscopables,这货就是不让你在with里用。。。仅此而已
    //看下 阮大师的案例
    // 没有 unscopables 时
    class MyClass {
        foo() {
            return 1;
        }
    }

    var foo = function() {
        return 2;
    };

    with(MyClass.prototype) {
        foo(); // 1
    }

    // 有 unscopables 时
    class MyClass {
        foo() {
            return 1;
        }
        get[Symbol.unscopables]() {
            return {
                foo: true
            };
        }
    }

        var foo = function() {
            return 2;
        };

        with(MyClass.prototype) {
            foo(); // 2
        }
posted @ 2017-12-06 11:29  happysun85  阅读(443)  评论(0编辑  收藏  举报