Tóm Tắt
Con trỏ this với hàm không có đối tượng gọi
Ở ví dụ trước chúng ta thường gọi hàm với đối tượng như userJohn.sayHi()
hay userPeter.hi()
. Còn trong trường hợp khi tạo hàm bình thường không có đối tượng nào gọi nó, context của hàm đó là đối tượng global. Khi sử dụng Javascript ở trình duyệt thì đó là đối tượng window
.
1
2
3
4
5
function
sayHi
()
{
console
.
log
(
`this is,
${
this
}
!`
);
// this is, [Object Window]
console
.
log
(
'this is window?'
,
this
===
window
);
// true
}
sayHi
();
Ngay cả khi gọi hàm mà hàm đó ở trong một object.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var
user
=
{
firstName
:
"John"
,
sayThis
()
{
function
sayHi
()
{
console
.
log
(
`this is,
${
this
}
!`
);
// this is, [Object Window]
console
.
log
(
'this is window?'
,
this
===
window
);
// true
console
.
log
(
'Firstname is '
,
this
.
firstName
);
// undefine
}
// gọi hàm không có đối tượng đi kèm thì
// context lúc này là window
sayHi
();
}
};
user
.
sayThis
();
Trong trường hợp muốn thay đổi context, chúng ta có thể sử dụng hàm bind
chúng ta sử dụng như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var
user
=
{
firstName
:
"John"
,
sayThis
()
{
function
sayHi
()
{
console
.
log
(
`this is,
${
this
}
!`
);
// this is, [Object object]
console
.
log
(
'this is window?'
,
this
===
window
);
// false
console
.
log
(
'Firstname is '
,
this
.
firstName
);
// John
}
// gọi hàm không có đối tượng đi kèm
// nhưng chúng ta bind context muốn sử dụng vào
sayHi
.
bind
(
this
)();
}
};
user
.
sayThis
();
Arrow function với con trỏ this
Arrow function (hàm mũi tên) là hàm không có con trỏ this
, hay nói cách khác con trỏ this
của hàm lúc này là con trỏ this
của hàm gọi nó. Hay tương đương với bind(this)
như trường hợp ở trên.
Ở ví dụ trên chúng ta thay hàm sayHi thành arrow function.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var
user
=
{
firstName
:
"John"
,
sayThis
()
{
var
sayHi
=
()
=>
{
console
.
log
(
`this is,
${
this
}
!`
);
// this is, [Object object]
console
.
log
(
'this is window?'
,
this
===
window
);
// false
console
.
log
(
'Firstname is '
,
this
.
firstName
);
// John
}
// gọi arrow function
// context lúc này là của context hàm sayThis()
sayHi
();
}
}
user
.
sayThis
();
Con trỏ this
trong hàm sayHi
đã trỏ về context của hàm sayThis()
, hay cũng chính là đối tượng user
.
Con trỏ this của hàm là tham số của hàm khác
Arrow funtion không có con trỏ this nên các hàm bind()
, call()
, apply()
không có tác dụng.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var
user
=
{
firstName
:
"John"
,
sayThis
(
sayHi
)
{
sayHi
();
}
}
var
sayHi
=
()
=>
{
console
.
log
(
`this is,
${
this
}
!`
);
// this is, [Object Window]
console
.
log
(
'this is window?'
,
this
===
window
);
// true
console
.
log
(
'Firstname is '
,
this
.
firstName
);
// undefined
};
// gọi arrow function
// context lúc này của hàm sayHi là window mặc dù đã bind
user
.
sayThis
(
sayHi
.
bind
(
user
));
Thay vì sử dụng arrow function chúng ta sử dụng function bình thường:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var
user
=
{
firstName
:
"John"
,
sayThis
(
sayHi
)
{
sayHi
();
}
}
var
sayHi
=
function
()
{
console
.
log
(
`this is,
${
this
}
!`
);
// this is, [Object object]
console
.
log
(
'this is window?'
,
this
===
window
);
// false
console
.
log
(
'Firstname is '
,
this
.
firstName
);
// John
};
// gọi function
// tham số hàm sayHi có context lúc này là user
user
.
sayThis
(
sayHi
.
bind
(
user
));