(散乱篇幅,小篇幅)关于js里的函数_1

//先提前声明一下只是个人的猜测,如有不对欢迎指正,谢谢

//1
<button type="button" >点击</button>
<script>
for (var i = 0;i < 10; i+=1){
document.getElementsByTagName('button')[0].onclick = a(); //这里会一直输出从0道9, 按照我个人的理解就是程序执行的时候碰到了a(),所以就相当于执行了函数
//document.getElementsByTagName('button')[0].onclick = function() { console.log(i); };//而这个则只会输出10,因为函数要调用才会执行,这里调用就相当onclick

function a(){
//console.log(i);
document.write(i + '<br>');
}
}
</script>

//2
<script>
function test_3(){
var num = 0;
return function() { return num += 1;};
}
function test_4(){
var num = 0;
return function() { return num += 1;};
}
var f_1 = test_3();
document.write(f_1() + '<br>');//1
var f_2 = test_4();
document.write(f_2() + '<br>');//1
document.write(f_2() + '<br>');//2
document.write(f_2() + '<br>');//3
document.write(f_2() + '<br>');//4
document.write(f_1() + '<br>');//2
</script>
//执行上面的代码发现虽然num变量重名了,但是并没有相互影响,也就是说局部变量是分开的,不会相互影响即使重名了,只要是不同地方的局部变量就行了

//3

<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script>
var lis = document.getElementsByTagName('li');
for (var i = 0;i<lis.length;i+=1){
lis[i].onclick = function() {alert(i);};
}
//上面点击为4,因为你for循环只是给li绑定事件,但是里面的函数代码并不会执行啊,
// <b>这个执行是在你点击的时候才执行的好吧?<b>
// 但是此时的i已经是4了,所以所有的都打印出4来了。
//还要理解的就是会执行lis[i].onclick这一句,只是不会执行后面的函数而已,也就是说js只是给你创建了一个函数并没有执行这个函数
//函数要等你调用的时候才会去执行
//导致你onclick的时候,执行alert(i),从而js会去找i发现i在for里面,且为4

//这个时候要解决的话可以尝试这样
var lis = document.getElementsByTagName('li');
for (var i = 0;i<lis.length;i+=1){
    (function(i){
lis[i].onclick = function() {alert(i);};
})(i);
  //运用函数的自调用执行一下函数使得里面的i保存到了自调用函数里面,(纯粹就是我自己的理解,错了的话希望指正,谢谢)而因为onclick函数里面又引用了i使得i一直就保存在这个时候的自调用里面,
//使得函数使用的时候执行里面的代码的时候会去找一下i,而i是在自调用函数里面的
  //成功打印每个i的值,原理就是通过自执行函数,并且将变量i保存到这个自执行函数的参数中。(这个是大神说的原话,我复制粘贴一下,,,)

//关于js里面函数和变量的编译//
当执行预编译处理的时候变量和函数都会提升到当前作用域的顶部
并且js是逐行执行的
我还要说一下就是觉得函数在定义的时候并不会理会里面的内容只会知道有这么一个函数,所以可以判断一下下面这种方法能不能行的通
(可以看一下下面这篇博客
https://www.cnblogs.com/qsdf/p/10133655.html
 for (var i = 0;i<lis.length;i+=1){
lis[i].onclick = function() {
    var x = i;
    alert(x);
};
}
</script>
-----------------------------------------------
发现了一个关于js里普通this指向的问题,差点被误导
<script>
    var a=11;
    function test1(){
        this.a=22;
        let b=function(){
            console.log(this.a);
        };
        b();
    }
    var x=new test1();
    输出11
</script>

刚开始不是很理解为什么会输出11

然后突然顿悟,其实是因为输出this.a的时候是考执行b()的时候输出的,而new的过程只是绑定test1里面的this,并没有绑定到b里面,而调用b的时候b的环境是windows所以,b里面的this就是指向windows了

所以输出就是11

原文地址:https://www.cnblogs.com/WildSky/p/10992825.html