this
在js可是有点难度的哦
<strong>且看一段code</strong>
<br />
<br />
<br />
这段demo是在群里看到一个小伙伴发出的疑惑
函数内部他是想this能拿到当前li的
可是此时函数内部的this指向是window全局
<br />
分析前。我需要说明几点。
this并不是指向自身
很多人以为的,像别的语言一样 this是指向自身的。所以往往犯一些错误
<br />
看看这段代码。当前的this究竟是什么?
是window全局变量
我们在window全局下调用了函数tips 此时的this是window对象
所以会输出11 而不是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里面也叫隐式绑定 它有隐式丢失的风险
要是在上面的代码 加上一句 var test = o.test显然与上面的 它实际上一个函数的引用
调用test()
此时的this绑定的全局对象了。
3、当构造函数绑定this
function part3(a){
this.a=a;
}
var test = new part3(2);
console.log(test.a)
这个也就是构造函数 用new来调用的函数
实际上经过了四步:
1、创建一个全新的对象
2、这个新对象执行原型连接
3、新对象绑定到函数调用的this
4、如果没有返回其它对象 那么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调用>硬绑定>上下文的隐式绑定>默认绑定
<br />
2016年12月16日23:32:10
明天四级了我的天!!
博文会在12月份写多几篇。最近实在太多事了!!!