4
Примера коде:JavaScript вопросы о ключевых словах этого
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function init() {
var nodeList = document.getElementsByTagName("a");
var nodeArr = [];
for(var i = 0; i < nodeList.length; i++) // Copy NodeList to Array
nodeArr.push(nodeList[i]);
for(var i = 0; i < nodeArr.length; i++) // Loop over array
if(nodeArr[i].className == "clickLink")
nodeArr[i].onclick = clickLink2; // Attach event function
}
window.onload = init; //Attach event function
function clickLink2() {
console.log("this: " + this); //Prints window URL in href
console.dir(this); //show attributes of anchor
console.log(this.name); // Prints name attribute
}
function clickLink(elem) {
console.log("this: " + this); //Prints [object Window]
console.dir(this); // Shows attributes, etc. al of [object Window]
console.log("name: " + elem.name);
}
</script>
</head>
<body>
<!-- inline -->
<a href="#" name="blah1" onclick="clickLink(this); return false;">Test 1</a>
<a href="#" name="blah2" onclick="clickLink(this); return false;">Test 2</a>
<a href="#" name="blah3" onclick="clickLink(this); return false;">Test 3</a>
<a href="#" name="blah4" onclick="clickLink(this); return false;">Test 4</a>
<hr/>
<!-- not inline -->
<a href="#" name="blah5" class="clickLink">Test 5</a>
<a href="#?t" name="blah6" class="clickLink">Test 6</a>
<a href="#" name="blah7" class="clickLink">Test 7</a>
<a href="#" name="blah8" class="clickLink">Test 8</a>
</body>
</html>
Я сделал тестирование в Firefox, с поджигателями для просмотра вывода консоли.
Теперь то, что мне было интересно:
- Почему в
clickLinkделает это относятся к объекту окна? - Почему это в
clickLink2печатать на консоль как значение href ссылки? - Есть ли лучший способ передать этот ненавязчивому приложению вроде этого? как вы можете быть уверены, что такое это?
ОК, так что я взял отрывки из ответов здесь и обнаружили, что это немного изворотливый в некоторых браузерах. Кроме того, назначение функции onclick отличается тем, что прикрепляется (но, к сожалению, не все версии IE поддерживают это либо см. addEventListener vs attachEvent). По какой-то причине более старые IE также делают , это внутри тела функции запуска события по-прежнему относятся к объекту окна, а не к вызывающему. Поэтому я использовал event.srcElement. Вот несколько новых примеров кода:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function init() {
var nodeList = document.getElementsByTagName("a");
var nodeArr = [];
for(var i = 0; i < nodeList.length; i++) // Copy NodeList to Array
nodeArr.push(nodeList[i]);
for(var i = 0; i < nodeArr.length; i++) // Loop over array
if(nodeArr[i].className == "clickLink") {
var a = nodeArr[i];
if (a.addEventListener) { //IE9, other browsers
a.addEventListener('click', clickLink2); // Attach event function
} else if (a.attachEvent) { //IE6,7,8, etc.
a.attachEvent('onclick', clickLink2); // Legacy IE Attach event function
}
a.onclick = function() { return false }; // override default onclick behavior for these anchors so URL is not followed
}
}
window.onload = init; //Attach event function
function clickLink2() {
if(typeof(event) != 'undefined') {
elem = event.srcElement; //IE < 8 keeps this as window object
} else {
elem = this;
}
alert(elem.name);
}
function clickLink(elem) {
alert(elem.name);
}
</script>
</head>
<body>
<!-- inline -->
<a href="#" name="blah1" onclick="clickLink(this); return false;">Test 1</a>
<a href="#" name="blah2" onclick="clickLink(this); return false;">Test 2</a>
<a href="#" name="blah3" onclick="clickLink(this); return false;">Test 3</a>
<a href="#" name="blah4" onclick="clickLink(this); return false;">Test 4</a>
<hr/>
<!-- not inline -->
<a href="#" name="blah5" class="clickLink">Test 5</a>
<a href="#?t" name="blah6" class="clickLink">Test 6</a>
<a href="#" name="blah7" class="clickLink">Test 7</a>
<a href="#" name="blah8" class="clickLink">Test 8</a>
</body>
</html>
Похоже, вам нужно прочитать о ['this'] (https://developer.mozilla.org/en/JavaScript/Reference/Operators/this) – zzzzBov
Вы передаете ссылку на текущий элемент' onclick = " clickLink (this) 'и получая его в' function clickLink (elem) 'как' elem'. Почему бы не использовать его? – Stefan
@Stefan Код, который я представляю, на самом деле не предназначен для каких-либо конкретных действий, просто чтобы попытаться выяснить что ключевое слово _this_ делало в разных ситуациях. В сочетании с ссылкой MDN от zzzzBov, объяснениями ниже и моим собственным мастером, я думаю, что теперь у меня есть лучшая ручка _this_ в Javascript. Спасибо всем – user17753