Leonid Kuznetsov leonidkuznetsov18

How to Eyeball Your ‘This’ Context in Javascript

The early programmer struggles with the Javascript keyword this. But understanding your this context is easier than it seems.

This is all about where a function is invoked. Often, early programmers worry about where the function was declared. Perhaps the function was declared in a specific file or a particular object. Surely this changes it's this!

Nope.

To understand this, we need to see where it is invoked. Nothing else matters, with one exception which we'll cover in a moment.

	const contentToFlatList = ({ content }, accumulator = []) =>
	content.reduce((result, item) => {
	if (item.content) {
	return result.concat(contentToFlatList(item));
	}

	return result.concat([item]);
	}, accumulator);

	function connect(mapStateToProps, mapDispatchToProps) {
	return function connector(Component) {
	class ContainerComponent extends React.Component {
	componentDidMount() {
	const { store } = this.context;
	this.unsubscribe = store.subscribe(() => this.forceUpdate());
	}

	componentWillUnmount() {
	this.unsubscribe();

	function sum(...arg) {
	function sumReturn(...arg2) {
	return sum(...arg, ...arg2)
	}

	let total = arg.reduce((total, val) => total + val);

	sumReturn.value = total;
	return sumReturn;
	}

	function connect(mapStateToProps, mapDispatchToProps) {
	return function(WrappedComponent) {
	return class extends React.Component {
	constructor() {
	const { store } = this.context;
	this.unsubcribe = store.subcribe(this.handleChange)
	}

	componentWillUnmount() {
	this.unsubcribe()

	function foo(a, b) {
	console.log("___A___", a);
	console.log("___B___", b);
	return a + b + this.c;
	}

	function bind(fn, ctx, ...args) {
	if(typeof(fn) !== 'function') {
	throw new TypeError("error");
	}

	import styled, { css } from 'styled-components'

	const Button = styled.button(props => css`
	height: ${props.height};
	width: ${props.width};
	color: ${props.theme.fontColor};
	background-color: ${props.theme.backgroundColor};
	`)

	// OR

	const memoize = (fn) => {
	let cache = {};
	const cacheFn = (...args) => {
	let key = JSON.stringify(args);
	if (key in cache) {
	return cache[key]
	}
	return (cache[key] = fn.call(null, ...args));
	}
	return cacheFn;

	const delayPromise = (delay) => {
	return function(data) {
	return new Promise((resolve, reject) => {
	setTimeout(() => {
	resolve(data);
	}, delay);
	});
	}
	};

	const debounce = (fn, wait = 1) => {
	let timeout = 0;
	return function (...args) {
	clearTimeout(timeout);
	timeout = setTimeout(() => fn.call(this, ...args), wait)
	}
	};