Babel 中文网
  • 中文文档
  • 设置
  • 试一试
  • 视频(需翻墙)
  • 博客
  • 团队
  • 英文官网

›All Blog Posts

All Blog Posts

  • 7.18.0 Released: Destructuring private elements and TypeScript 4.7
  • 7.17.0 Released: RegExp 'v' mode and ... 🥁 decorators!
  • 7.16.0 Released: ESLint 8 and TypeScript 4.5
  • 7.15.0 Released: Hack-style pipelines, TypeScript const enums and Rhino target support
  • Babel is used by millions, so why are we running out of money?
  • 7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop
  • 7.13.0 Released: Records and Tuples, granular compiler assumptions, and top-level targets
  • 7.12.0 Released: TypeScript 4.1, strings as import/export names, and class static blocks
  • 7.11.0 Released: ECMAScript 2021 support in preset-env, TypeScript 4.0 support, printing config and the future of `babel-eslint`
  • The State of babel-eslint
  • 7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking
  • 7.9.0 Released: Smaller preset-env output, Typescript 3.8 support and a new JSX transform
  • 7.8.0 Released: ECMAScript 2020, .mjs configuration files and @babel/cli improvements
  • Babel's Funding Plans
  • 7.7.0 Released: Error recovery and TypeScript 3.7
  • 7.6.0 Released: Private static accessors and V8 intrinsic syntax
  • 7.5.0 Released: dynamic import and F# pipelines
  • The Babel Podcast
  • 7.4.0 Released: core-js 3, static private methods and partial application
  • 7.3.0 Released: Named capturing groups, private instance accessors and smart pipelines
  • 7.2.0 Released: Private Instance Methods
  • TC39 Standards Track Decorators in Babel
  • 7.1.0 Released: Decorators, Private Static Fields
  • Babel 7 Released
  • Removing Babel's Stage Presets
  • What's Happening With the Pipeline (|>) Proposal?
  • Announcing Babel's New Partnership with trivago!
  • On Consuming (and Publishing) ES2015+ Packages
  • Nearing the 7.0 Release
  • Babel Turns Three
  • Planning for 7.0
  • Zero-config code transformation with babel-plugin-macros
  • Contributing to Babel: Three Lessons to Remember
  • Personal Experiences at Babel #1 — A PR with Unusually High Number of Reviews
  • Babel and Summer of Code 2017
  • Upgrade to Babel 7 (moved)
  • Upgrade to Babel 7 for Tool Authors (WIP)
  • 6.23.0 Released
  • The State of Babel
  • 6.19.0 Released
  • 6.18.0 Released
  • 6.16.0 Released
  • Babili (babel-minify)
  • 6.14.0 Released
  • Babel Doctor
  • Setting up Babel 6
  • 6.0.0 Released
  • React on ES6+
  • Function Bind Syntax
  • 5.0.0 Released
  • Babel <3 React
  • Not Born to Die
  • 2to3
  • 6to5 + esnext

Function Bind Syntax

May 14, 2015

James Kyle

Babel 5.4 was just released and with it comes support for a new experimental ES7 syntax proposed by Kevin Smith (@zenparsing) and implemented in Babel by Ingvar Stepanyan (@RReverser).

Warning: This syntax is highly experimental and you should not use it for anything serious (yet). If you do use this syntax, please provide feedback on GitHub.

The function bind syntax introduces a new operator :: which performs function binding and method extraction.

Virtual Methods

Using an iterator library implemented as a module of "virtual methods":

/* ES7 */
import { map, takeWhile, forEach } from "iterlib";

getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));
/* ES6 */
import { map, takeWhile, forEach } from "iterlib";

let _val;
_val = getPlayers();
_val = map.call(_val, x => x.character());
_val = takeWhile.call(_val, x => x.strength > 100);
_val = forEach.call(_val, x => console.log(x));

Note: Babel's [output](/repl/#?experimental=true&evaluate=false&loose=false&spec=false&playground=false&code=import%20%7B%20map%2C%20takeWhile%2C%20forEach%20%7D%20from%20%22iterlib%22%3B%0A%0AgetPlayers()%0A%3A%3Amap(x%20%3D%3E%20x.character())%0A%3A%3AtakeWhile(x%20%3D%3E%20x.strength%20%3E%20100)%0A%3A%3AforEach(x%20%3D%3E%20console.log(x))%3B) looks different than this in order to be more concise.

Using a jquery-like library of virtual methods:

/* ES7 */
// Create bindings for just the methods that we need
let { find, html } = jake;

// Find all the divs with class="myClass", then get all of the
// "p"s and replace their content.
document.querySelectorAll("div.myClass")::find("p")::html("hahaha");
/* ES6 */
let _val;
_val = document.querySelectorAll("div.myClass");
_val = find.call(_val, "p");
_val = html.call(_val, "hahaha");

Method Extraction

Using method extraction to print the eventual value of a promise to the console:

/* ES7 */
Promise.resolve(123).then(::console.log);
/* ES6 */
// Which could be written in ES6 as:
Promise.resolve(123).then(console.log.bind(console));

Using method extraction to call an object method when a DOM event occurs:

/* ES7 */
$(".some-link").on("click", ::view.reset);
/* ES6 */
$(".some-link").on("click", view.reset.bind(view));

Note: You can read more about this syntax in the Function Bind Syntax proposal.

Usage

Enable by stage:

$ babel --stage 0

Enable by transformer:

$ babel --optional es7.functionBind

The function bind syntax will only make it into ES7 if there is enough interest. If you would like to see this syntax make it in, please give it a star on GitHub and provide any feedback you have on GitHub issues.

Special thanks to Ingvar Stepanyan (@RReverser) for the implementation in Babel.

— The Babel team

Recent Posts
Babel 中文网
中文文档
学习 ES2015
社区
视频(需翻墙)用户列表Stack OverflowSlack ChannelTwitter
更多
博客GitHub OrgGitHub RepoWebsite Repo旧版 6.x 网址旧版 5.x 网址
友链
Bootstrap中文网ReactNext.jsDocusaurusBlitzGatsbyRecoilReduxMDXMarkdownVue.jsAlpine.jsVuePressNuxt.jsGridsomePreactSvelteSapperWebpackRollup.jsParcelNPMYarnpnpmGulpjQuerySASSTailwindCSSPurgeCSScssnanoPostCSSJestWebAssemblyDeno
Babel 中文文档采用 MIT 开源协议发布。
本站点(babeljs.cn)仅用于 “Babel 中文文档”,与 babeljs.io 没有任何关系。Babel 项目及相关资源的版权归 babeljs.io 所有。
冀ICP备14002930号-1