PostsOldAbout

javascript之this

· javascript, 前端技术

this

在js可是有点难度的哦
<strong>且看一段code</strong>
<br />
<br />
 
<br />

这段demo是在群里看到一个小伙伴发出的疑惑
函数内部他是想this能拿到当前li的
可是此时函数内部的this指向是window全局

<br />
分析前。我需要说明几点。

this并不是指向自身

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

看看这段代码。当前的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月份写多几篇。最近实在太多事了!!!

2026 © zwkang.RSS