对象返回为未定义

Question

如果我调用查找函数 APP.count() 一切正常，我得到的结果是正确的，但是当我调用 APP.add() 时，我得到的 this.basket 是未定义的。我不明白为什么会这样？

var APP = (function() {

  var
    basket = [
      { id: 100, price: 10, description: '', name: 'item one', quantity: 10, url: '' },
      { id: 200, price: 20, description: '', name: 'item two', quantity: 15, url: '' }
    ],

    find = function(item) {
      for(var i = 0; i < this.basket.length; i++) {
        if(this.basket[i].id === item) {
          return i
        }
      }
      return null
    },

    add = function(item) {
      var itemFound = find(item)
    },

    count = function() {
      var total = 0;
      for(var i = 0; i < this.basket.length; i++) {
        total = total + this.basket[i].quantity
      }
      return total
    };

  return {
    basket: basket,
    find: find,
    add: add,
    count: count
  };

})();

 APP.count()      /* works */
 APP.add()        /* returns this.basket as undefined */

Answer 1

问题出在 add 函数中对 find(item) 的调用。

像这样调用find函数不会使用APP对象的上下文作为this，所以this.basket将是未定义的。

您可以使用简单的 console.log(this)

检查当前上下文 this

所以如果要用APP的上下文调用find函数，在add函数中需要调用this.find(item)

Answer 2

您好，当您通过 add()

调用查找方法时，问题出在 this 引用上

add = function(item) {
      var itemFound = find(item)
    },

此关键字引用 window 对象

尝试使用下面的运行代码

var APP = (function() {

  var
    basket = [
      { id: 100, price: 10, description: '', name: 'item one', quantity: 10, url: '' },
      { id: 200, price: 20, description: '', name: 'item two', quantity: 15, url: '' }
    ],

    find = function(item) {
      for(var i = 0; i < this.basket.length; i++) {
        if(this.basket[i].id === item) {
          return i
        }
      }
      return null
    },

    add = function(item) {
      var itemFound = this.find(item) //changed
      return itemFound;                //changed
    },

    count = function() {
      var total = 0;
      for(var i = 0; i < this.basket.length; i++) {
        total = total + this.basket[i].quantity
      }
      return total
    };

  return {
    basket: basket,
    find: find,
    add: add,
    count: count
  };

})();

对象返回为未定义

Object returning as undefined

javascript

object

this

undefined