kangkangblog

Menu

javascript之this

this

在js可是有点难度的哦

且看一段code

this_1 this_2

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

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

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

this并不是指向自身

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

this_3

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

是window全局变量

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

所以会输出11  而不是33

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

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

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

arguements以后再谈

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 表达式会自动返回这个新对象

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){
    console.log(this);
    return this.a+value+name;
}
var test = {a:1}
part4.apply(test,['hello man','zhouwenkang']);
part4.call(test,'hello man','zhouwenkang')

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

还有一个bind

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

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

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

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

bindfun();

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

new调用>硬绑定>上下文的隐式绑定>默认绑定

2016年12月16日23:32:10

明天四级了我的天!!

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

— 于 共写了1470个字
— 文内使用到的标签:

发表评论

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