js对象语法 js对象方法简写

论文深入探讨了在JavaScript对象中，如何有效地在不同的方法之间传递数据并管理这个上下文的问题。通过一个餐饮订单系统的例子，我们讲解了如何利用Function.prototype.bind()方法，将外部函数绑定到对象实例，从而正确访问对象的内部属性和方法。文章还强调了理解这个上下文的重要性，并提供了清晰的代码示例和实践建议，帮助开发者构建更健壮、可维护的JavaScript对象。理解JavaScript中的this上下文

在JavaScript中，这个关键字的行为是其最常引起混乱的特性之一。它的值取决于函数被调用的方式，而不是函数被定义的方式。当一个函数作为对象时然而，当函数被普通函数调用，或者在回调函数、事件处理器时，这个值可能会出乎意料，通常指向作为全局对象（在非严格模式下）或未定义（在严格模式下）。

考虑以下原始代码示例，其中开发者尝试在orderDelivery方法中利用order方法获取订单详情：const Restaurant = { name： 'Classico Italiano'， location： 'Via Angelo Tavanti 23， Firenze， Italy'，categories： ['Italian'， 'Pizzeria'， 'Vegetarian'， 'Organic']， starterMenu： ['Focaccia'， 'Bruschetta'， '大蒜面包'， '凯普雷塞沙拉']， mainMenu： ['Pizza'， 'Pasta'， 'Risotto']， openingHours： { /* ... */ }， order： function (starterIndex， mainIndex) { return [this.starterMenu[starterIndex]， this.mainMenu[mainIndex]]； }， orderDelivery： function({starterIndex， mainIndex，时间，地址}) { // 尝试在内部调用order方法，但可能会导致问题 // ({starterIndex， mainIndex}) = this.order(2，1) // 尝试1 // this.order(2，1) // 尝试2 console.log(`订单收到！${this.starterMenu[starterIndex]}和${this.mainMenu[mainIndex]}将在${time}发送到${address}`)； }}；//外部调用order，然后提交结果，但orderDelivery需要索引的是// const myOrder =restaurant.order(2， 1)； // 尝试3restaurant.orderDelivery({ time： '22：30'， address： 'Via del Sole， 21'， // mainIndex： myOrder[0]， // 尝试3 // starterIndex： 2， // 硬编码})；登录后复制

在这个例子中，orderDelivery方法直接接收starterIndex和mainIndex作为参数。如果想在orderDelivery内部调用order方法来获取具体的菜品名称，并确保order方法中的this正确指向restaurant对象，就需要要特别注意。直接在orderDelivery内部调用this.order()通常是可行的，因为orderDelivery本身就是restaurant的一个方法，其this上下文在调用时会正确绑定到restaurant。然而，问题往往出现在如何利用order方法的返回值，以及如何避免硬编码。

解决方案：利用Function.prototype.bind()管理这个上下文

为了更灵活地处理对象方法和这个上下文，尤其是在将函数作为独立实体定义之后附加到对象时，Function .prototype.bind()方法是一个强大的工具。bind()方法创建一个新的函数，当这个新函数被调用时，它的这个关键字会被设置为提供的值，并且在调用新函数时，可以在前面提供任意数量的参数。

立即学习“Java免费学习笔记（深入）”；

以下是使用bind()方法解决上述问题的示例：// 1. 定义通用的订单处理函数 function genericOrder(starterIndex， mainIndex) { // 这里的this在绑定后将指向restaurant对象 return [this.starterMenu[starterIndex]， this.mainMenu[mainIndex]]；}// 2. 定义通用的订单处理函数function genericDelivery(parameters) { // 这里的this在绑定后也将指向restaurant对象 // 直接使用parameters中的索引来访问菜单项 console.log(`订单收到！${this.starterMenu[parameters.starterIndex]} 和 ${this.mainMenu[parameters.mainIndex]} 将在${parameters.time}传送到${parameters.address}`)；}// 3.定义餐厅对象，不包含方法 const Restaurant = { name： 'Classico Italiano'， 位置： 'Via Angelo Tavanti 23， Firenze， Italy'， 类别： ['意大利'， '披萨店'， '素食'， '有机']， starterMenu： ['Focaccia'， 'Bruschetta'， '大蒜面包'， '卡普雷塞沙拉']， mainMenu： ['披萨'， '意大利面'， 'Risotto']， openingHours： { /* ... */ }，}；// 4. 使用bind()方法将通用函数绑定到restaurant对象//这会新的函数，并确保创建其内部的this总是指向restaurantrestaurant.order = genericOrder.bind(restaurant)；restaurant.orderDelivery = genericDelivery.bind(restaurant)；// 5. 调用方法//先通过order方法获取具体的菜品（可选，这里只是展示order方法的使用）const myOrder = Restaurant.order(2， 1)； // 返回 ['Garlic Bread'， 'Pasta']// 然后调用 orderDelivery，直接指定所需的参数，包括索引restaurant.orderDelivery({ time： '22：30'， address： 'Via del Sole， 21'， mainIndex： 1， // 得出这里是mainMenu的索引 starterIndex： 2， //这里创建的是starterMenu的索引})；登录后复制

在这个优化后的方案中：

法语写作助手

法语助手推出的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。31条详细详情genericOrder和genericDelivery定义为独立的函数。它们被内部使用这个来访问starterMenu和mainMenu。restaurant对象只包含初始数据属性。通过restaurant.order = genericOrder.bind(restaurant)；和restaurant.orderDelivery = genericDelivery.bind(restaurant)；，我们创建了两个新的函数，把它们作为方法赋值给restaurant对象。这两个新函数的this上下文被永久绑定到restaurant对象。在调用restaurant.orderDelivery时，直接传递了starterIndex和mainIndex则，orderDelivery方法可以直接使用这些索引来包装信息。order方法可以独立用于获取最佳订单的菜品名称进一步。思考与实践实践参数

策略传递： 在orderDelivery中，直接接收starterIndex和mainIndex作为参数是更直接和清晰的方式。order方法的主要职责是根据索引返回菜品名称，而orderDelivery的职责是处理商品信息。将两者职责分开，并通过参数传递数据，可以提高代码的权限性和模块性。

ES6类语法：对于更复杂的对象结构和行为，JavaScript的ES6类语法提供了更优雅的封装方式。类方法通常会自动将这个绑定到类的实例，从而减少了手动使用bind()的需要（避免将方法作为回调函数传递）。

class Restaurant { 构造函数(name， location， categories， starterMenu， mainMenu) { this.name = name； this.location = location； this.categories = categories； this.starterMenu = starterMenu； this.mainMenu = mainMenu； // ... 其他属性 } order(starterIndex， mainIndex) { return [this.starterMenu[starterIndex]， this.mainMenu[mainIndex]]； } orderDelivery({ starterIndex， mainIndex， time， address }) { console.log(`订单已收到！${this.starterMenu[starterIndex]} 和 ${this.mainMenu[mainIndex]} 将于 ${time} 送达 ${address}`)； }}const classicoItaliano = new Restaurant( 'Classico Italiano'， 'Via Angelo Tavanti 23， Firenze， Italy'， ['Italian'， 'Pizzeria'， 'Vegetarian'， '有机']， ['佛卡夏'， '意式烤面包'， '大蒜面包'， '卡普雷塞沙拉']， ['披萨'， '意大利面'， '烩饭'])；classicoItaliano.orderDelivery({ time： '22：30'， 地址： 'Via del Sole， 21'， mainIndex： 1， starterIndex： 2，})；登录后复制

使用类，order和orderDelivery方法内部的this将自动指向classicoItaliano实例，代码结构更加清晰。总结

在JavaScript中，正确管理this上下文是编写健壮对象代码的关键。当需要在对象方法之间共享数据或逻辑，并且涉及this的访问时，可以采用以下策略：直接参数传递：如果一个方法需要另一个方法的输出或某些数据，最直接的方式是通过参数输入所需的数据。Function.prototype.bind()： 当将外部函数对象方法使用，或确保特定函数在任何调用场景下都指向特定对象时，bind() 是非常有效的工具。ES6 类：对于面向对象编程，ES6 的类语法提供了更格式化和作为现代的方式来定义对象及其方法，通常能够更好地处理此内容。

通过理解这些机制并选择合适的策略，开发者可以有效地构建出功能强大且易于维护的 JavaScript 应用程序。

以上就是JavaScript对象方法间数据传递与本上下文管理的详细内容，更多请关注乐哥常识网其他相关文章！ JavaScript 实现第三方网站“加载更多”内容的自动化展开 JavaScript 遍历与计数嵌套对象和数组 JavaScript 中动态创建对象属性名：计算属性名与赋值技巧