javascript - jQuery和原生JS中 this 的区别

问题描述

问 题

        <ul id="test">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul id="test2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script src="jquery-1.11.3.js"></script>
        <script type="text/javascript">
            var lis=document.getElementById("test").children;
            test.onclick=function(){
                Array.prototype.map.call(lis,function(v,k,a){
                    v.innerHTML=parseInt(v.innerHTML)+1;
                    console.log(this);//这里的this指向window
                });
            }
            $("#test2").click(function(){
                $("#test2 li").each(function(index,value){
                    $(value).html(parseInt($(value).html())+1);
                    console.log(this);//这里的this指向li
                });
            });
        </script>

如题 ,我给test和test2分别用原生JS和jQuery实现了相同的功能，代码结构也几乎相同；可是在click事件处理函数中的回调函数中输出this，一个指向window，一个指向li。
有点不明白，，不应该都是指向window吗，jQuery是否做了特殊的处理？？谢谢

解决方案

题主题中的问题其实不是click事件回调中的this指向，而是Array.prototype.map与jQuery.each里面回调的this指向分别是什么。

先看map，Array.prototype.map，有两个参数，第二个thisArg，意为callback执行时this的指向，题中未指定这个参数，所以callback中this指向window（非严格模式下）。

再看each，定位到jQuery.each代码位置，可以清楚的看到callback.apply( obj[ i ], args )，所以callback在执行的时候this指向当前遍历到的原生DOM对象。

这篇关于javascript - jQuery和原生JS中 this 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！