第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

javascript中匿名函數(shù)調(diào)用寫法引發(fā)的感想

標(biāo)簽:
Html/CSS JavaScript

匿名函数自动调用的三种写法如下:

var f1 = function(){alert("f1");}();
 
(function(){alert("f2");}());
 
void function(){alert("f3");}();

再来看一段代码:

function Person(properties){
    for(var p in properties){               
        (function(context){ 
            var t = p;
            context["get" + t] = function(){return properties[t];}
            context["set" + t] = function(val){properties[t] = val;}
        }(this));
    }
}
 
var p = new Person({name:"菩提树下的杨过",sex:"男"});
alert(p.getname());//弹出"菩提树下的杨过"
alert(p.getsex());//弹出"男"
alert(p.name);//弹出:undefined

Person类为所有传入的对象属性,自动生成了getXXX与setXXX方法,这一段代码虽然很短,却包含了诸多js中的关键概念:

1.json对象表示法

当我们把"{name:"菩提树下的杨过",sex:"男"}"做为参数,传入Person构造函数时,实际上就建立了一个字典结构的键值对:

name --> "菩提树下的杨过"
sex --> "男"

即  name - value 结构,所以也就能用for ...in语句来遍历了

以上结论,可以这样测试

var obj = {name:"菩提树下的杨过",sex:"男"};
for(var p in obj){
    alert("名称:" + p + ",值:" + obj[p]);
}

2.匿名函数的自动调用

这一段代码结构可以简化为:

function Person(properties){
for(var p in properties){    
    (  
      function(){ 
       ...
      }()  
    );
  }
}

可以看到,里面其实就是调用了匿名函数(即文章最开头的第二种写法)

3.函数调用时的上下文关系

每个函数调用时总会关联一个上下文(如果找不到上下文,则最终会关联到window对象)

function foo(fn){   
 //this.barbar = "Foo.barbar";
 if (typeof fn === "function"){
  fn();
 } 
}
 
var bar = {
 barbar : "Hello,World!",
 method:function(){    
  alert(this.barbar);
 }
}
 
bar.method(); //调用时,medhod中的this指的就是bar对象的上下文,此时this.barbar 与 bar.barbar等效  
 
foo(bar.method);//调用时,这时bar.method中的this指代的是foo内部的上下文,而foo中并没有barbar的定义,因此最终this.barbar其实就是foo.barbar,所以会弹出"undefined",如果把foo中的注释行去掉注释,就更能映证这一点

这是最近网上热传的"javascript令人费解的10件事"中的一段代码,我在注释中加了自己的理解,再回到文中的代码,代码的本意是想让Person类动态添加对所有的属性的getXXX与setXXX方法(通过匿名函数的自动调用),而匿名函数在执行时getXXX与setXXX函数的上下文this默认是指向匿名函数的,而非Person类本身!为了解决这个问题,不得不在匿名函数中增加了一个参数context,并且在调用时用(function(...){}(this));把Person的上下文this传入到匿名函数中

4.闭包
关于闭包,不再做过多的学术解释,先给一段代码:

<ul>
 <li id="a1">aa</li>
 <li id="a2">aa</li>
 <li id="a3">aa</li>
</ul>
 
<script type="text/javascript">
 
for (var i=1;i<= 3;i++){
 var li = document.getElementById("a" + i);
 li.onclick = function(){
  alert(i);
 }
}
 
</script>

解释onclick生成了一个匿名函数,并引用外层的变量i,形成闭包,造成变量i在该函数中共享(可以理解为三个li的onclick函数中都引用同一个变量i),而i在循环结束后,变成4,因此所有li最终点击都是弹出4

解决办法:

<script type="text/javascript">
for (var i=1;i<= 3;i++){
 var li = document.getElementById("a" + i);
 li.i = i;
 li.onclick = function(){    
  alert(this.i);
 }
}
</script>

再回到文中的代码,同样匿名函数引用外层的变量p,形成闭包,如果不用var t = p;中转一下变量,则最后所有的getXXX与setXXX方法,都是对应最后一个属性的.

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消