Javascript 使用 $ 符号和关键字 "this" 用法

Question

我正在研究其他人的 javascript 代码，并且我运行在一些我以前从未见过的东西上使用过。如果有人能为我阐明它，我将非常感激。我以前用过 javascript，但我绝不是专家。

1) 一些控件是从 javascript 中使用美元符号 ($) 表示法访问的，就像 JQuery 一样。我有点困惑，因为脚本语言明确指定为 javascript，而不是 JQuery，并且项目中没有 JQuery 库。我想知道这是否是一种常见做法？

<script type="text/javascript">
function select1_onchange()
{
    $('Button1').style.display = (this.value == "No" ? 'block' : 'none');
    $('OptionsBox').style.display = (this.value == "Yes" ? 'block' : 'none');
}
</script>

2) 第二件事是在上面的代码中，关键字 this 似乎是指调用脚本的对象，同时在当前上下文中 javascript 解释 this 和 window对象。这使得此代码无效。在这种特殊情况下，我应该用 $('Button1').value 或 document.getElementById('Button1')（或 document.getElementsByName('Button1')[0] 替换 this.value，因为开发人员使用 name属性而不是 id)？哪一个会更有效率？或者另一种选择 - 我应该将关键字 this 传递给函数，然后用输入变量替换 this 吗？

<script type="text/javascript">
function select1_onchange(mySelect)
{
    $('Button1').style.display = (mySelect.value == "No" ? 'block' : 'none');
    $('OptionsBox').style.display = (mySelect.value == "Yes" ? 'block' : 'none');
}
</script>

并将其命名为：

<select name="select1" onchange="select1_onchange(this)">
<option selected value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>

选择这两种方法的优缺点是什么？

Answer 1

可能有人创建了自己的小函数，比如

var $ = function(id) {
    return document.getElementById(id);
}

$('Button1').style.display = 'none';

jQuery 的写法有些相同，简单来说 javascript，因为它只是一个方便的 "helper functions".[= 的库49=] 要检查 jQuery 是否存在，可以执行 typeof jQuery，这应该 return "function"

附加内联事件处理程序时，可以传递参数

<select name="select1" onchange="select1_onchange('hello kitty')">
  <option>1</option>
  <option>2</option>
</select>

<script>
    function select1_onchange(something) {
        alert(something); // "hello kitty"
    }
</script>

传递 this 而不是字符串，给出对元素的引用，在大多数情况下它会是 window，所以这并不是通常做的事情

<select name="select1" onchange="select1_onchange(this)">
  <option>1</option>
  <option>2</option>
</select>

<script>
    function select1_onchange(something) {
        alert(this); // [object Window]
    }
</script>

如今，应该改用 addEventListener，它会自动将回调中的 this 值设置为绑定元素。

<select name="select1" id="select1">
  <option>1</option>
  <option>2</option>
</select>

<script>
  
  document.getElementById('select1').addEventListener('change', function() {
    alert(this.id); // "select1"
  }, false);
</script>

Answer 2

1) jQuery 只是一个 javascript 库：它仍然是 javascript。 jQuery 的 api 通过以“$”变量作为别名的 "jQuery" 对象公开。

2) javascript中的关键字"this"指的是父作用域，所以上面例子中函数的作用域。

Javascript 使用 $ 符号和关键字 "this" 用法

Javascript using $ notation and keyword "this" usage

javascript

this