【js系列】this的四种指向和三种改变方法

this的四种指向和三种改变方法

一、this指针:

下面是MDN上关于this指针的表述:

当前执行上下文(global、function 或 eval)的一个属性,在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。—MDN

从字面上的意思,this也就是当前对象主体的一个代指。

二、this指针在JavaScript中的四种指向:

  1. 直接调用的情况下this指向window,即直接调用一个可以直接调用的函数,this指向window
  2. 通过new运算符,new这个函数,则this指向当前new出来的函数对象
  3. 通过创建一个对象,然后通过对象进行调用,this指向该对象(谁调用,指向谁)
  4. 箭头函数中没有this,箭头函数中的this指向的是上下文的this
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 1.直接调用的情况下this指向window
console.log("情况一:this指向window")
console.log(this); //window
// 用var 会将name挂载到window
var name = 'window\'s name'
// 2.直接调用一个可以直接调用的函数,this指向window
function print() {
console.log(this)
console.log(this.name);
}
console.log("情况二:函数中直接调用:this指向window,实质上就是指情况一")
print();

console.log("情况三:通过new运算符初始化一个实例,this指向该实例")
// 3.通过new运算符,new一个对象后再调用
let pri = new print();

console.log("情况四:通过创建一个对象,然后通过对象进行调用,this指向该对象(谁调用,指向谁)")
// 4.对象中使用,this指向该对象(谁调用,指向谁)
let obj = {
age: 18,
name: 'ax',
print: print
}
obj.print();

// 5.箭头函数 箭头函数中没有this,this指向的是上下文的this
console.log('情况五:箭头函数中调用this,this指向');
let obj2 = {
print: () => {
console.log(this);
}
}
obj2.print();

结果:

三、通过bind, call, apply三种方式改变某函数的this指向

在JavaScript中有三个函数可以对bind, call, apply进行动态的改变:
区别:

  • 执行形式上:

call和apply在使用后会立刻执行函数,而bind则只是绑定this对象,在之后才会调用

  • 传入参数上:

call, bind, apply第一个传入参数是一致的,都是第一个参数为this要指向的对象,区别在于,call和bind后面的参数都是后续传参,而apply的第二个参数则必须是一个数组

  • 箭头函数调用call或者apply方法的时候第一个参数会被忽略!(不能绑定this)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 通过bind call apply可以改变this指针的指向
// call和apply在使用后会立刻执行函数,而bind则只是绑定this对象,在之后才会调用

// 1.call:第一个参数是要改变的this指向 后续参数都是其要传入的值
function print() {
console.log(this);
console.log(this.name);
console.log(arguments);
}
var name = "ax"
let obj = {
name: 'AX'
}
print(19, '计算机类');
// window
// ax
// Arguments(2) [19, "计算机类", callee: ƒ, Symbol(Symbol.iterator): ƒ]
print.call(obj, 20, '软件工程');
// {name:'AX'}
// AX
// Arguments(2) [20, "软件工程", callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 2.apply
print.apply(obj, [21, "前端实习工程师"]);
// {name: "AX"}
// AX
// Arguments(2) [21, "前端工程师", callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 3.bind
// bind仅绑定,而不会立即执行,如果需要立刻执行 则必须在后面加上立即执行
// bind会返回一个函数,这个函数就是新的绑定了this的函数
console.log(print.bind(obj, 22, "前端工程师")); //ƒ print()
// 执行bind后的函数
print.bind(obj, 22, "前端工程师")();
//{name: "AX"}
// AX
// Arguments(2) [22, "前端工程师", callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 必须注意的是,原函数不会被bind影响,打印结果同正常情况下直接调用print,也就是说
// 函数执行bind的结果只会绑定在返回的函数上面
print();
// window
// ax
// Arguments(2) [19, "计算机类", callee: ƒ, Symbol(Symbol.iterator): ƒ]