{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Juvenile、少年° 的问题《Javascript 'this' keyword returning href a》','https://www.manongdao.com/q-917840.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Requirement: Return the element object.
Problem: Using the code below, I expected the links to return [object], but they actually return the string in the href attribute (or in the case of the first link, the Window object).
(The HTML below has been tested in FireFox 3.6.8 and Internet Explorer 7 (7.0.6002.18005) with the same results.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Anchor onclick tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<a href="javascript:alert(this);" title=""><a href="javascript:alert(this);">...<a/></a> - Returns: [object Window]<br />
<a href="#" onclick="alert(this);" title=""><a href="#" onclick="alert(this);">...<a/></a> - Returns: Full URI<br />
<a href="javascript:void(0);" onclick="alert(this);" title=""><a href="javascript:void(0);" onclick="alert(this);">...<a/></a> - Returns: javascript:void(0);
</div>
</body>
</html>
Adding .tagname to the this keyword returns undefined for the first link but correctly identifies the second and third as A. Likewise, requesting .href returns undefined for the first link but correctly outputs the href (full URI in the case of '#').
Does anyone know why, and how I can get a hold on the A object itself?
As you said, accessing a property in the second and third link works. That means that
thisis indeed theADOM element but when it is converted to a string (which is what happens when you want toalertit) it is converted to the URL.So you already have your object ;)
Same happens when you do
alert(document.location). It is actually an object but when converted to a string, it prints the current location.When
alertis invoked, thetoStringmethod is internally invoked so for the case of the anchors alerting the href, the toString of anchors returns the href instead.In the JS console, do:
This would confirm it.
As for
window,thisisn't bound to a method owned by the anchor, sothisrefers to the global context.onclickis bound to the anchor sothis, aka current execution context, changes to the anchor.The result is it alerts
Awhich is the nodeName, so the browser does return thehrefif there is anhrefset so it's more "readable" and less vague.