并排记录 object 和 object.key 时的矛盾值

Question

我有两个 console.log 语句，一个接一个。第一个记录整个对象elem，第二个记录elem.hero。这是我得到的结果：

//console.dir(elem)
{ 
    project: {}, 
    hero: {
        path: "569f9dcbe4b0ea7fccac85b4/569f9dd5e4b060eb54c0dd7c",
        fileType:"png"
    }
}

//console.dir(elem.hero)
{ 
    path: "default",
    fileType:"jpg"        
}

这里的图片：

换句话说，检查elem 对象的 hero 属性给了我我的期望，但是直接将它的值记录到控制台给了我一个旧值。这里发生了什么？这是我的相关代码。

var projects = []

function getProjects() {
  return new Promise(function(resolve, reject){
    var url = "http://example.com/api/v2/projects"
    utils.sendAPIRequest(url, utils.generateToken(), function(err, data, xhr){
      if(err) {
        reject(Error(err))
      }
      else {
        for(var i in data) {
          projects.push({project: data[i], hero: { path: "default", fileType: "jpg"}})
        }
        resolve() 
      }      
    })
  })
}

function constructHeroURL(elem){
  return new Promise(function(resolve, reject){
    var url = 'http://example.com/api/v2/files?size=1&query=meta.image.ExecPortalArtistImage_1445947066011:Yes+AND+project._id:' + elem.project.id 
    utils.sendAPIRequest(url, utils.generateToken(), function(err, data, xhr){
      if(err) {
        reject(Error(err))
      }
      else {
        for(var i in data) {
          var id = data[i].id
          var fileID = data[i].revisions[0].preview[0].fileID
          var fileType = data[i].revisions[0].preview[0].name.split('.')
          elem.hero.path = id + '/' + fileID
          elem.hero.fileType = fileType[fileType.length-1]
        }
        resolve() 
      }      
    })    
  })
}

function getHeroImages(elem){
  return new Promise(function(resolve, reject){
    console.dir(elem) // logs in question
    console.dir(elem.hero) // on these lines
    var url = 'http://localhost:3000/media/' + elem.hero.path
    $.get(url)
    .done(function(data, status, xhr){
      resolve(data) 
    })
    .fail(function(xhr, status, err){
      reject(Error(err))   
    })    
  })  
}

getProjects()
.then(function(){
  return projects.map(constructHeroURL)
})
.then(function(){
  return projects.map(getHeroImages)
  .reduce(function(sequence, imagePromise) {
    // Use reduce to chain the promises together,
    // adding content to the page for each chapter
    return sequence.then(function() {
      // Wait for everything in the sequence so far,
      // then wait for this chapter to arrive.
      return imagePromise
    }).then(function(image) {
      console.log(image)
    })
  }, Promise.resolve())
})

Answer 1

我认为这是因为elem.hero 的属性有primitive types，但elem 的属性hero 有reference type。

所以console.log(elem.hero); 的结果显示了它的属性值（原语），console.log(elem); 显示了对其属性hero 的引用，该属性在请求成功后更新。