Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
JavaScript Function Bind Syntax
var eventLib = require('eventLib');
var self = this;
eventLib.on('foo', function() {
self.gotFoo();
});
eventLib.on('bar', this.gotBar.bind(this));
eventLib.on('log', console.log.bind(console));
var ArrayProto = Array.prototype;
var map = ArrayProto.map;
var filter = ArrayProto.filter;
var todoItems = document.querySelectorAll('ul.my-list > li');
var completedItems = filter.call(todoItems, function(item) {
return item.dataset.completed;
});
var titles = map.call(todoItems, function(item) {
return item.textContent;
});
var DEBUG = console.log.bind(console, 'DEBUG:');
function add(x, y) {
return x + y;
}
var add1 = add.bind(null, 1);
var three = add1(2);
DEBUG(three); // prints "DEBUG: 3"
class HomePage {
run(casper) {
function thenClickInMySection(n, selector) {
return casper.thenClick(`.my-section:nth-of-type(${n}) ${selector}`);
}
function thenScreenshotContainer(name) {
return casper.thenScreenshot('#container', name);
}
casper = casper
.thenVisit('http://my-url.com/home')
.thenScreenshot('body', 'home');
casper = thenClickInMySection(1, '.foo');
casper = thenScreenshotContainer('foo');
casper = casper.thenClick('.cancel');
casper = thenClickInMySection(2, '.bar');
casper = thenScreenshotContainer('bar');
return casper;
}
}
import eventLib from 'eventLib';
eventLib.on('foo', ::this.gotFoo);
eventLib.on('bar', ::this.gotBar);
eventLib.on('log', ::console.log);
class HomePage {
run(casper) {
function thenClickInMySection(n, selector) {
return this.thenClick(`.my-section:nth-of-type(${n}) ${selector}`);
}
function thenScreenshotContainer(name) {
return this.thenScreenshot('#container', name);
}
return casper
.thenVisit('http://my-url.com/home')
.thenScreenshot('body', 'home')
::thenClickInMySection(1, '.foo')
::thenScreenshotContainer('foo')
.thenClick('.cancel')
::thenClickInMySection(2, '.bar')
::thenScreenshotContainer('bar');
}
}
let { map, filter } = Array.prototype;
let todoItems = document.querySelectorAll('ul.my-list > li');
let completedItems = todoItems::filter(item => item.dataset.completed);
let titles = todoItems::map(item => item.textContent);
const DEBUG1 = ::console.log('DEBUG:');
// Currently calls the function back on the same receiver
// var DEBUG1 = console.log.call(console, 'DEBUG:');
const DEBUG2 = ::console.log['DEBUG:'];
// This clashes with existing [] semantics
// var DEBUG2 = console.log['DEBUG:'].bind(console);
const DEBUG3 = ::console.log<'DEBUG:'>;
// SyntaxError
const DEBUG4 = ::console.log{'DEBUG:'};
// SyntaxError
function add(x, y) {
return x + y;
}
let add1 = ::add(1);
// SyntaxError (we need a context for the bind operator)
// ...
// Binding a function to a context
var log = console.log.bind(console);
// Calling functions with a context
var foo = {};
function bar() {
log(this);
}
function world(a) {
log(this, a);
}
bar.call(foo);
function hello() {
world.apply(foo, arguments);
}
// Binding a function to a context
let log = ::console.log;
// Calling functions with a context
let foo = {};
function bar() {
log(this);
}
function world(a) {
log(this, a);
}
foo::bar();
function hello() {
foo::world(...arguments);
}

joezimjs commented Jun 5, 2015

I don't understand the Casper examples... how are you calling thenClickInMySection when the functions are named clickInMySection?

Owner

jfairbank commented Aug 15, 2015

I don't understand the Casper examples... how are you calling thenClickInMySection when the functions are named clickInMySection?

I came back to these examples to get some code for some talk slides and just noticed your comment. You are right. I goofed up the names on that example. I updated them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment