JavaScript : this關鍵字的作用及使用時需要注意的地方

純粹的函數呼叫 ，這是函數最通常的用法，屬於全域性呼叫,因此this就代表全域物件Global。請看下面這段程式碼，運行結果如何。複製程式碼程式碼如下

//一段正则，匹配所有_min.的图片src属性
	var test = /^img[/]/;
	//遍历所有的图片节点
	$("img").each(function(index, obj) {
		if (test.test($(this).attr("src"))) {
			var new_img;
			var this_img = $(this).attr("src");
			$.ajax({
				url : '/getImageUrl',
				type : 'post',
				data : {
					"getImageUrl" : this_img

				},
				success : function(data) {
					console.log(data, "----data");
					new_img = data;
					console.log(new_img, "----new_img");
					$(this).attr("src", data);
				}
			});
			console.log(new_img, "-----------------");

		}
	})

這是遍歷img標籤src是以"img/" 開頭的img物件,取出目前src請求伺服器取得新的src取代原來的src ;

 

注意: $(this).attr("src", data); 這個語句沒有生效是因為this已不是img物件,而是ajax物件所以沒有生效,應替換如下:

//一段正则，匹配所有_min.的图片src属性
	var test = /^img[/]/;
	//遍历所有的图片节点
	$("img").each(function(index, obj) {
		if (test.test($(this).attr("src"))) {
			var new_img;
			var this_img = $(this).attr("src");
			var this_src = $(this);
			$.ajax({
				url : '/getImageUrl',
				type : 'post',
				data : {
					"getImageUrl" : this_img

				},
				success : function(data) {
					console.log(data, "----data");
					new_img = data;
					console.log(new_img, "----new_img");
					this_src.attr("src", new_img);
				}
			});
			console.log(new_img, "-----------------");

		}
	})

如下圖,把img物件的引用指向一個變數,然後用該變數執行取代操作;

疑問: 尾部的console.log(new_img, "-----------------"); 不知為何打印的是undefined ,因為這個語句不知為何會最先執行,如下圖:

 相關推薦：

JavaScript scope作用域與this關鍵字

Java使用volatile關鍵字的注意事項

影片教學:方法中的$this關鍵字-最新的物件導向OOP程式設計

#

以上是JavaScript : this關鍵字的作用及使用時需要注意的地方的詳細內容。更多資訊請關注PHP中文網其他相關文章！