为什么类方法中的粗箭头不能绑定到父作用域的this？

Question

I've got an ES2015 code snippet where I'm trying to dynamically populate the objects this.data.pageCategoryL1~3 keys with different data depending on the state of the originalData . I'm passing class methods as a callback to _categoryMapper , which isn't binding the callback to class's this - it's only passing a pointer to the function without binding it even though it's a method. That alone seems weird odd that it isn't automatically bound to the instance.

The truly puzzling part though: inside of _categoryMapper 's reduce function, the fat arrow function's this is undefined . I thought fat arrows were supposed to bind to their parent this 's scope?

 class AnalyticsData { constructor(originalData) { this.data = {}; this.originalData = originalData; } mapCategories() { debugger; let mappedCategories = { pageCategoryL1: '', pageCategoryL2: '', pageCategoryL3: '' }; if (this.originalData.search && this.originalData.search.refinements) { mappedCategories = this._categoryMapper({ pageCategoryL1: 'categoryl1', pageCategoryL2: 'categoryl2', pageCategoryL3: 'categoryl3' }, this._getSomeCategory); // if i bind only here it will work, because it doesn't use fat arrow's this } else if (this.originalData.items) { mappedCategories = this._categoryMapper({ pageCategoryL1: 'a', pageCategoryL2: 'b', pageCategoryL3: 'c' }, this._getSomeOtherCategory); } return mappedCategories; } _categoryMapper(mapping, callback) { return Object.keys(mapping).reduce((acc, key) => { // fat arrow in reduce should be implicitly bound to this console.log(this); let category = callback(mapping[key]).bind(this); acc[key] = category ? category : ''; return acc; }, {}); } _getSomeCategory(categoryKey) { // No access to this as currently written console.log(this) let refinements = this.originalData.search.refinements; let matchedObj = refinements.find(({ refinement }) => categoryKey === refinement.name); return matchedObj && matchedObj.refinement.value; } _getSomeOtherCategory(categoryKey) { let id = Object.keys(this.originalData.items)[0]; return this.originalData.items[id][categoryKey]; } } window.x = new AnalyticsData({ search: { refinements: [{ refinement: { name: 'categoryl1', value: 'yup' } }] } }).mapCategories() console.log(x) /* this.data should be: { pageCategoryL1: 'yup', pageCategoryL2: '', pageCategoryL3: '' };*/ 

Answer 1

You're misusing bind here.

let category = callback(mapping[key]).bind(this);

bind creates a copy of a function with this set to whatever you passed it and zero or more arguments preloaded.

 function log(argument1) { console.log(this); console.log(argument1); } let f = log.bind({ a: 1 }, 'a'); let g = log.bind({ b: 2 }, 'b'); f(); g(); 

What you probably want to use is call which calls a function with this set to it's first argument.

 function log(argument1) { console.log(this); console.log(argument1); } log.call({ a: 1 }, 'a'); log.call({ b: 2 }, 'b'); 

The reason this === undefined is that callback is not defined with an arrow function nor does it have any other way of defining what this should be. This is essentially what you're doing.

 'use strict'; let obj = { a: 1, log() { console.log(this); } }; function callCallback(callback) { callback(); } // This is what you want to happen callCallback(obj.log.bind(obj)); // This is what you're doing callCallback(obj.log);