2014-10-19 30 views
0

我正在使用Chrome擴展教程(下面的完整代碼)。有一件事我不明白這一點,這是關係到requestKittens方法解釋「this」指向的位置

 req.onload = this.showPhotos_.bind(this); 

和showPhotos方法的1號線3號線:

 var kittens = e.target.responseXML.querySelectorAll('photo'); 

我試圖理解e.target.responseXML如何指向請求的響應XML。以下是我目前的想法:在調用此函數的行(第3行requestKittens())中,this指向kittenGenerator對象,這意味着kittenGenerator被綁定爲showPhotos()的第一個參數。所以參數eshowPhotos()應該是kittenGenerator,對吧?

如果這是真的,那麼showPhotos()第一線......

var kittens = e.target.responseXML.querySelectorAll('photo'); 

...是說kittenGenerator有一個屬性target。不過,我在Chrome控制檯中檢查了這一點,但沒有 - 因此我的邏輯中存在一個錯誤。任何人都可以幫忙?

// Copyright (c) 2012 The Chromium Authors. All rights reserved. 
// Use of this source code is governed by a BSD-style license that can be 
// found in the LICENSE file. 

/** 
* Global variable containing the query we'd like to pass to Flickr. In this 
* case, kittens! 
* 
* @type {string} 
*/ 
var QUERY = 'kittens'; 

var kittenGenerator = { 
    /** 
    * Flickr URL that will give us lots and lots of whatever we're looking for. 
    * 
    * See http://www.flickr.com/services/api/flickr.photos.search.html for 
    * details about the construction of this URL. 
    * 
    * @type {string} 
    * @private 
    */ 
    searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' + 
     'method=flickr.photos.search&' + 
     'api_key=90485e931f687a9b9c2a66bf58a3861a&' + 
     'text=' + encodeURIComponent(QUERY) + '&' + 
     'safe_search=1&' + 
     'content_type=1&' + 
     'sort=interestingness-desc&' + 
     'per_page=20', 

    /** 
    * Sends an XHR GET request to grab photos of lots and lots of kittens. The 
    * XHR's 'onload' event is hooks up to the 'showPhotos_' method. 
    * 
    * @public 
    */ 
    requestKittens: function() { 
    var req = new XMLHttpRequest(); 
    req.open("GET", this.searchOnFlickr_, true); 
    req.onload = this.showPhotos_.bind(this); 
    req.send(null); 
    }, 

    /** 
    * Handle the 'onload' event of our kitten XHR request, generated in 
    * 'requestKittens', by generating 'img' elements, and stuffing them into 
    * the document for display. 
    * 
    * @param {ProgressEvent} e The XHR ProgressEvent. 
    * @private 
    */ 
    showPhotos_: function (e) { 
    var kittens = e.target.responseXML.querySelectorAll('photo'); 
    for (var i = 0; i < kittens.length; i++) { 
     var img = document.createElement('img'); 
     img.src = this.constructKittenURL_(kittens[i]); 
     img.setAttribute('alt', kittens[i].getAttribute('title')); 
     document.body.appendChild(img); 
    } 
    }, 

    /** 
    * Given a photo, construct a URL using the method outlined at 
    * http://www.flickr.com/services/api/misc.urlKittenl 
    * 
    * @param {DOMElement} A kitten. 
    * @return {string} The kitten's URL. 
    * @private 
    */ 
    constructKittenURL_: function (photo) { 
    return "http://farm" + photo.getAttribute("farm") + 
     ".static.flickr.com/" + photo.getAttribute("server") + 
     "/" + photo.getAttribute("id") + 
     "_" + photo.getAttribute("secret") + 
     "_s.jpg"; 
    } 
}; 

// Run our kitten generation script as soon as the document's DOM is ready. 
document.addEventListener('DOMContentLoaded', function() { 
    kittenGenerator.requestKittens(); 
}); 
+0

e是事件參數,'e.target'指向事件'onload'被觸發的對象,它是'req'對象。 – 2014-10-19 10:09:31

+0

您需要記住,'.bind()'在綁定參數列表前面加上了'thisArg',這就是函數中'this'值的綁定。 – 2014-10-19 10:11:11

+0

http://stackoverflow.com/questions/4195970/what-does-this-mean – Paul 2014-10-19 10:27:21

回答

0

bind第一個參數定義局部應用程序的上下文。

req.onload = this.showPhotos_.bind(this); 

作品,因爲XMLHttpRequest使用事件作爲第一個參數上它的onload處理。這就是e.target的來源。

爲了讓您綁定的一個簡單的例子,考慮以下因素:(即東西比空別的)

function add(a, b) { 
    return a + b; 
} 

var addTwo = add.bind(null, 2); 
addTwo(10); // yields 12 

如果你定義綁定的上下文,那麼你可以使用this訪問內的這方面功能。

+0

阿確定,所以在線路... 'req.onload = this.showPhotos_.bind(本);' ...'kittenGenerator.showPhotos()'被設置爲在onload時執行,但是'this'設置爲等於'this',該行等於'kittenGenerator'。那是對的嗎? – guzman 2014-10-19 13:22:20

+0

是的。這纔是重點。這就是爲什麼我寧願避免使用'this'的原因,因爲它只是增加了對代碼的不必要的混淆。 – 2014-10-19 14:55:16

+0

另一個令人困惑的部分是'onload'自動使用事件作爲函數中的一個參數......我在Chrome控制檯中使用了這個參數,並認爲我現在明白了,但很奇怪。無論如何,感謝您的幫助。 – guzman 2014-10-19 18:00:24