0%

JavaScript的this指向

this 指向

定义:

=> this 是一个使用再作用域内部的关键字

=> 全局很少用, 大部分是在函数内部使用

指向:

=> 全局使用: window
=> 函数使用: 不管函数怎么定义, 不管函数在哪定义, 只看函数的调用(箭头函数除外)
-> 普通调用(直接调用/全局调用)

函数名(): this -> window

xxx.函数名(): this -> 点前面是谁就是谁

setTimeout(function () {}, 0): this -> window
val(function () {}, 0): this -> window
-> 事件处理函数

xxx.onclick = function () {}: this: 事件源(绑定再谁身上的事件)
ventListener(‘’, function () {}): this: 事件源
-> 自执行函数

(function () {})(): this -> window

示例1:普通调用
1
2
3
4
5
function fn() {
console.log(this)
}

fn() // 普通调用 this -> window
示例2:对象调用
1
2
3
4
5
6
7
8
9
10
11
function fn() {
console.log(this)
}
var obj = {
// 把 fn 存储的地址赋值给了 obj 的 f 成员
// 从现在开始 obj.f 和 全局变量 fn 指向同一个函数空间
f: fn,
name: '我是 obj 对象'
}

obj.f() // 对象调用 this -> obj
示例3:定时器调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function fn() {
console.log(this)
}

fn() // 普通调用 this -> window

var obj = {
// 把 fn 存储的地址赋值给了 obj 的 f 成员
// 从现在开始 obj.f 和 全局变量 fn 指向同一个函数空间
f: fn,
name: '我是 obj 对象'
}

obj.f() // 对象调用 this -> obj

// 把 fn 函数当作定时器处理函数使用
setTimeout(fn, 0) // 定时器处理函数 this -> window
setTimeout(obj.f, 0) // 定时器处理函数 this -> window
示例4:事件处理函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function fn() {
console.log(this)
}

fn() // 普通调用 this -> window

var obj = {
// 把 fn 存储的地址赋值给了 obj 的 f 成员
// 从现在开始 obj.f 和 全局变量 fn 指向同一个函数空间
f: fn,
name: '我是 obj 对象'
}

obj.f() // 对象调用 this -> obj


var div = document.querySelector('div')
// 当点击 div 的时候, 执行 obj.f 这个函数
// div.onclick = obj.f // 事件处理函数 this -> 事件源
div.addEventListener('click', obj.f) // 事件处理函数 this -> 事件源 (div)
示例5:各种复杂环境下的调用
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
function fn() {
console.log(this)
}

fn() // window

setTimeout(function () {
fn() // window
}, 0)

var div = document.querySelector('div')
div.onclick = function () {
function f() {
console.log(this)
}
f() // window
}
var obj = {
name: '我是 obj 对象',
fn: function () {
console.log(this)
function fun() {
console.log(this)
}

fun() // window
}
}

obj.fn() // this -> obj

//把 obj 里面 fn 成员存储的函数地址赋值给了全局变量 f
//全局变量 f 和 obj.fn 指向同一个函数空间
var f = obj.fn

f() // this -> window
-------------本文结束感谢您的阅读-------------
技术原创:姚渐新,您的支持将鼓励我继续创作