The content of this series is full analysis of JS, created exclusively for senior front-end teachers of Qianfeng Education
Committed to explaining clear JavaScript-related knowledge points for everyone, with rich code cases and explanations. If you feel that it is helpful to everyone, you can [click to follow] and continue to follow up~
this points to (master)
this is a keyword, a keyword used in scope
Scope is divided into global scope and local scope (private scope or function scope)
global scope
In the global scope this points to window
local scope
The this inside the function has nothing to do with how the function is defined or where the function is defined, it only depends on how the function is called (except for arrow functions)
Can be divided into the following scenarios:
Called in normal function
The this in the normal function is the same as the global call, this points to the window
语法：函数名()
<script>
// 全局使用 this
console.log(this) //window
console.log(window) //window
console.log(window === this) //true
//普通函数调用
function fn() {
console.log('我是全局 fn 函数')
console.log(this) //window
}
fn()
</script>
Objects (including arrays) call
This in the function points to the 点previous content, that is, the object or array
grammar:
对象名.函数名()*
对象名
<script>
//对象函数调用
function fn() {
console.log(this) //{fun: ƒ}
}
var obj = {
fun: fn
}
obj.fun()
obj['fun']()
</script>
Called in the timer handler function
This in the timer also points to window
<script>
// 定时器处理函数
setTimeout(function() {
console.log(this); //window
}, 1000)
</script>
event handler call
This in the event handler points to the event source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>hello world</div>
<script>
var res = document.querySelector('div')
res.onclick = function() {
console.log(this); //<div></div>
}
</script>
</body>
</html>
Called from a self-executing function
● this in the self-executing function also points to window
<script>
(function() {
console.log(this); //window
})()
</script>
Forcibly change the point of this
Through the above study, you know that this points to different things in different situations, but sometimes you need to point to a specified object, which requires changing the point of this
It can be understood as no matter where you point to before, now you have to point to where I let you point
The way to forcibly change the point of this can be call、apply和bindchanged by
call call
Function: Change the pointer of this inside the function
grammar:
函数名.call()
objectname.functionname.call(parameter1,parameter2,parameter3...)
parameter:
○The first parameter is the object to be pointed to by this
○ Starting from the second parameter, pass the actual parameters to the function in turn
Features: The function will be called immediately or executed immediately
<script>
function fn(a, b) {
console.group('fn 函数内的 打印')
console.log('this : ', this)
console.log('a : ', a)
console.log('b : ', b)
console.groupEnd()
}
var obj = {
name: '我是 obj 对象'
}
var arr = [100, 200, 300, 400, 500]
// 用 call 调用
fn.call(obj, 100, 200)
fn.call(arr, 1000, 2000)
/*
this : {name: '我是 obj 对象'}
a : 100
b : 200
fn 函数内的 打印
this : (5) [100, 200, 300, 400, 500]
a : 1000
b : 2000
*/
</script>
apply call
Function: Change the pointer of this inside the function
grammar:
○Function name.apply()
○Object name.Function name.apply(parameter 1, [parameter 2, parameter 3...])
parameter:
○The first parameter is the object to be pointed to by this
○ An array of the second parameter, the actual parameter to be passed must be placed in the array, even if there is an actual parameter, it must also be placed in the array
Features: The function will be called immediately or executed immediately
<script>
function fn(a, b) {
console.group('fn 函数内的 打印')
console.log('this : ', this)
console.log('a : ', a)
console.log('b : ', b)
console.groupEnd()
}
var obj = {
name: '我是 obj 对象'
}
var arr = [100, 200, 300, 400, 500]
// 用 apply 调用
fn.apply(obj, [100, 200])
fn.apply(arr, [1000, 2000])
/*
fn 函数内的 打印
this : {name: '我是 obj 对象'}
a : 100
b : 200
fn 函数内的 打印
this : (5) [100, 200, 300, 400, 500]
a : 1000
b : 2000
*/
</script>
bind call
Function: Change the pointer of this inside the function
grammar:
函数名.bind()
对象名.函数名.bind(参数1，参数2，参数3...)
parameter:
The first parameter is the object to be pointed to by this
Starting from the second parameter, pass the actual parameters to the function in turn
Features: The function will not be called immediately, but will return a function that changes this to the future, and needs to be called when using it
<script>
function fn(a, b) {
console.group('fn 函数内的 打印')
console.log('this : ', this)
console.log('a : ', a)
console.log('b : ', b)
console.groupEnd()
}
var obj = {
name: '我是 obj 对象'
}
var arr = [100, 200, 300, 400, 500]
// 用 bind 调用
// 注意: 因为是 bind, 不会把 fn 函数执行, 而是把 fn
// res 接受的就是 bind 方法复制出来的 fn 函数, 和 fn
var res = fn.bind(obj, 100, 200)
var res1 = fn.bind(arr, 1000, 2000)
res()
res1()
/*
fn 函数内的 打印
this : {name: '我是 obj 对象'}
a : 100
b : 200
fn 函数内的 打印
this : (5) [100, 200, 300, 400, 500]
a : 1000
b : 2000
*/
</script>
The above are some basic knowledge points pointed to by this in JS. For more technical dry goods, knowledge and skills, you can follow us! If you have any unclear questions, you can exchange and discuss them in the comment area, or you can private message Xiaoqian~