先搞懂this到底是个啥玩意儿

你知道在JavaScript里面 this这个东西特别猥琐，它总是爱变来变去。当你把一个函数作为对象的方法来调用时this通常会指向那个对象本身。就像这样：

是不是？ javascript const restaurant = { name: '张三餐厅', starterMenu: , mainMenu: ,

order { return , 大体上... this.mainMenu]; } };

出岔子。 restaurant.order; // 输出：

在这个例子里 order方法能访问到starterMenu和mainMenu主要原因是它们都挂在同一个对象上，奥利给！。

最直接的调用方式

如果你想让一个方法去使唤另一个方法，最简单的就是直接通过this.来调用。就像这样：

javascript const person = { name: '李四', sayHello { console.log; this.sayAge; // 调用下一个方法 }, sayAge { console.log; } };

person.sayHello; // 输出： // 呵呵！ 吃瓜。 李四 // 啊呀！我30岁了！

看到了吗？在sayHello里面可以直接通过this.sayAge来呼叫sayAge方法。

搞点高级玩意儿：bind

歇了吧... 有时候我们得搞点复杂操作，比如需要把外部定义的函数绑定到某个对象上。这时就要靠那个神奇的.bind了。

乱弹琴。 function genericDelivery { const = genericOrder.call; console.log; }

太虐了。 const restaurantWithBoundMethods = { name: '王五小馆', starterMenu: , mainMenu: };

// 把genericOrder和genericDelivery绑定到restaurantWithBoundMethods上 const order = genericOrder.bind; const delivery = genericDelivery.bind;

// 调用 delivery({ starterIndex: 1, mainIndex: 2, time: "下午6点", address: "天通苑大街" });，拖进度。

容我插一句... 注意这里我们使用了.bind把两个外部函数都绑定到了我们的餐厅对象上。这样在调用的时候它们内部的this就会自动指向正确的对象。

再聪明一点：传参进去

有时候可能不需要这么复杂，你也可以先计算好数据再塞进去。比如：

javascript const restaurantPrecompute = { name: "赵六火锅", menuItems: ,

getItems {
    return indexes.map;
},
showReceipt {
    const itemsOrdered = this.getItems;
    console.log}，总价：${orderDetails.totalPrice}元`);
    console.log;
    console.log;
 }

};

// 用法： restaurantPrecompute.showReceipt({ itemIndexes:, totalPrice:'89.9', address:'朝阳门大街', phone:'138**1234' });，说白了...

走捷径。 看见没？我们先通过getItems准备好要显示的内容，然后再传给showReceipt显示出来。虽然代码多了一些步骤，但是逻辑更清晰啦！

防呆设计：call和apply

如果实在不行，还有.call和.apply这两个东西可以帮忙手动控制一下：

javascript function cookFood { console.log; }，可不是吗！

const kitchen = { };

// 用call强制让cookFood中的this指向kitchen cookFood.call;，至于吗？

或者当参数有很多时：

javascript function bake { // ... }，也许吧...

// 用apply传入多个参数时比较方便 bake.apply;，被割韭菜了。

注意事项要牢记！

使用这些技巧的时候要注意几件事：

1. 不要混淆作用域确保每次使用 this. 时都清楚它指向哪。
2. 性能考虑频繁使用 .bind, .call, .apply会影响性能。
3. 代码可读性尽量写清晰易懂的代码别搞得自己也看不懂。
4. 兼容性问题确保所有环境都支持这些高级特性。

常见问题解答

Q: 在回调函数中如何维持正确的 this?

A: 用箭头函数或者预先 .bind 一下就行啦，礼貌吗？！

Q: 不小心丢失了 this,咋办?

我开心到飞起。 A: 把当前 this 值存起来比如 _self, vm, _that, 或其它名字备用。

Q: 不同浏览器间有兼容性问题吗?

A: IE8及以下版本可能不支持某些新特性，但现在基本不用担心这些啦，搞一下...！

全文

想让JavaScript中不同方法之间互相配合工作一边又不让那个狡猾鬼一样随时变化着身份跑掉的话——主要还是靠清楚理解各种语法糖怎么玩儿才行呢！从简单直白地直接使用‘.’操作符开始；然后逐渐深入理解并灵活运用那些看似复杂实则超实用工具类功能如.bind,.call.。。再说说记住无论什么时候只要遇到麻烦情况记得往简单角度想——是不是有地方被自己给弄混淆嘛，原来如此。？

希望这篇乱七八糟文章至少能给各位提供一些思路或是启发——毕竟编程路上永远不会少走弯路而真正重要只是每一次错误后所获得那份经验值与成长感吧，换言之...？

---