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()
|
示例2:对象调用
1 2 3 4 5 6 7 8 9 10 11
| function fn() { console.log(this) } var obj = { f: fn, name: '我是 obj 对象' } obj.f()
|
示例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() var obj = { f: fn, name: '我是 obj 对象' } obj.f() setTimeout(fn, 0) setTimeout(obj.f, 0)
|
示例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() var obj = { f: fn, name: '我是 obj 对象' } obj.f() var div = document.querySelector('div') div.addEventListener('click', obj.f)
|
示例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() setTimeout(function () { fn() }, 0) var div = document.querySelector('div') div.onclick = function () { function f() { console.log(this) } f() } var obj = { name: '我是 obj 对象', fn: function () { console.log(this) function fun() { console.log(this) } fun() } } obj.fn() var f = obj.fn f()
|