javascript雙冒號的語法

es7中有一個語法糖能夠用來用::作方法綁定（Function bind syntax）

具體的語法以下：

javascriptlet log = ::console.log;

// let log = console.log.bind(console);

function bar (a, b) {
    return (this.x * a) + (this.y * b);
}

let foo = {
    x: 1,
    y: 2
};

foo::bar(2, 3); // => (1*2) + (2*3) = 8

// bar.apply(foo, [2, 3]);

方法綁定有2種用法，第一種是把對象綁定爲這個方法的this，這時候：：放在要綁定方法的對象名前，這個對象後面緊接着它的一個方法

let obj = {
    method: function () {
        console.log(this);
    }
};

::obj.method;

// obj.method.bind(obj);

第二種用法是放到對象和方法名之間，將這個對象綁定爲這個方法的this

let obj = {
    foo: 'bar'
};

function method () {
    console.log(this.foo);
}

obj::method();

// method.call(obj);
// or:
// method.bind(obj)();

obj::method;

// method.bind(obj);

接下來對比一下es5-es7幾個版本中不一樣的方法綁定的用法

ES5

function Collection () {
    this._array = [];
}

function _mixin (source) {
    Object.keys(source).forEach(function (key) {
        Collection.prototype[key] = source[key];
    });
}

function _makeArray (arrayLike) {
    return Array.prototype.slice.call(arrayLike);
}

_mixin({
    add: function () {
        var items = _makeArray(arguments);

        items.forEach(function (item) {
            this._array.push(item);
        }, this);

        return this;
    },

    remove: function () {
        var items = _makeArray(arguments);

        items.forEach(function (item) {
            var index = this._array.indexOf(item);

            if (index > -1) {
                this._array.splice(index, 1);
            }
        }, this);

        return this;
    },

    print: function () {
        this._array.forEach(function (value, i) {
            console.log(i + ':', value);
        });

        return this;
    }
});

var arr = new Collection();

arr
    .add(1, 2, 3)
    .remove(1, 4)
    .add(4, 5)
    .remove(3, 5)
;

arr.print();

ES6的語法：

class Collection extends Array {
    constructor () {
        super(...arguments);
    }

    add (...items) {
        this.push(...items);

        return this;
    }

    remove (...items) {
        for (let item of items) {
            let index = this.indexOf(item);

            if (index > -1) {
                this.splice(index, 1);
            }
        }

        return this;
    }

    print () {
        this.forEach((value, i) => {
            console.log(`{i}:`, value);
        });

        return this;
    }
}

var arr = new Collection();

arr
    .add(1, 2, 3)
    .remove(1, 4)
    .add(4, 5)
    .remove(3, 5)
;

arr.print();

ES7的語法

function add (...items) {
    this.push(...items);

    return this;
}

function remove (...items) {
    items.forEach(item => {
        let index = this.indexOf(item);

        if (index > -1) {
            this.splice(index, 1);
        }
    });

    return this;
}

function print () {
    this.forEach((value, i) => {
        console.log(`{i}:`, value);
    });

    return this;
}

let arr = [];

arr
    ::add(1, 2, 3)
    ::remove(1, 4)
    ::add(4, 5)
    ::remove(3, 5)
;

arr::print();

 

參考文檔：http://hao.jser.com/archive/7907/