javascript之this

this

在js可是有点难度的哦



<strong>且看一段code</strong>



<br />



<br />



<a href="https://ls-l.cn/wp-content/uploads/2016/11/this_1.png"><img src="https://ls-l.cn/wp-content/uploads/2016/11/this_1-300x71.png" alt="this_1" width="300" height="71" /></a> <a href="https://ls-l.cn/wp-content/uploads/2016/11/this_2.png"><img src="https://ls-l.cn/wp-content/uploads/2016/11/this_2-300x130.png" alt="this_2" width="300" height="130" /></a> 



<br />

这段demo是在群里看到一个小伙伴发出的疑惑

函数内部他是想this能拿到当前li的
可是此时函数内部的this指向是window全局

<br />



分析前。我需要说明几点。

this并不是指向自身

很多人以为的,像别的语言一样 this是指向自身的。所以往往犯一些错误



<br />



<a href="https://ls-l.cn/wp-content/uploads/2016/11/this_3.png"><img src="https://ls-l.cn/wp-content/uploads/2016/11/this_3.png" alt="this_3" width="161" height="117" /></a> 



看看这段代码。当前的this究竟是什么?



是window全局变量



我们在window全局下调用了函数tips 此时的this是window对象



所以会输出11 &nbsp;而不是33



<br />



this并不是在函数声明的时候就固定好的。



而是根据调用上下文而决定的



<br />



在调用的时候会隐式传两个参数 就是 arguments跟this



arguements以后再谈



<br />

1、当作为普通函数调用绑定this(默认绑定)

function part1(){



return this.name;



}



var name='zhouwenkang';



part1();

2、当对象内的方法调用绑定this(隐式绑定)

this此时则是此对象



function part2(){



return this.name;



}



var name='zhouwenkang';



var o = {name:'kang'};



o.test=part2;



o.test()



//在you don't know js里面也叫隐式绑定 &nbsp;它有隐式丢失的风险



要是在上面的代码 &nbsp;加上一句 &nbsp; var test = o.test显然与上面的 &nbsp;它实际上一个函数的引用



调用test()



此时的this绑定的全局对象了。

3、当构造函数绑定this

function part3(a){



this.a=a;



}



var test = new part3(2);



console.log(test.a)



这个也就是构造函数 &nbsp;用new来调用的函数&nbsp;



实际上经过了四步:



1、创建一个全新的对象



2、这个新对象执行原型连接



3、新对象绑定到函数调用的this



4、如果没有返回其它对象 &nbsp; 那么new 表达式会自动返回这个新对象



<br />

4、硬绑定(apply,bind,call)

apply跟call都是极为相似。只是他们的传参不同



apply是传递一个参数数组



Math.max.apply(null,[5,32,6,12,32,5,2])



call则是传递多个参数



Math.max.call(null,5,32,6,12,32,5,2)



显式的指定this绑定的上下文



function part4(value,name){<br />

    console.log(this);
    return this.a+value+name;
}
var test = {a:1}
part4.apply(test,[‘hello man’,’zhouwenkang’]);
part4.call(test,’hello man’,’zhouwenkang’)

代码非常容易看出效果也方便记忆



<br />



还有一个bind



bind相比apply call 也是类似但是方法稍微有点不同



bind是返回一个已经绑定好this 调用上下文的函数



function part4(value,name){<br />

    console.log(this);
    return this.a+value+name;
}
var test = {a:1}

var bindfun = part4.bind(test,'hello','zhouwenkang');



bindfun();



<br />



<br />



this的面貌已经完全展现在面前 就等着我们去精巧地使用它了



new调用&gt;硬绑定&gt;上下文的隐式绑定&gt;默认绑定



<br />



2016年12月16日23:32:10



明天四级了我的天!!



博文会在12月份写多几篇。最近实在太多事了!!!

发表评论

电子邮件地址不会被公开。 必填项已用*标注