liang14658fox

Appearance

^finished

普通函数的this ​

先看这样一句话： ​

  • this 用于访问当前方法的所属对象

什么意思呢？举个例子：

这里我声明一个对象，这个对象里有一个属性a随便给他赋值，还有一个方法b。

js
let obj = {
    a : 128,
    b : function() {
        console.log(this) // { a: 128,b: f...}
        console.log(this === obj) // true
    }
}
let obj = {
    a : 128,
    b : function() {
        console.log(this) // { a: 128,b: f...}
        console.log(this === obj) // true
    }
}

通过打印发现，这里this指向当前方法的所属对象obj。

这个很好理解，现在稍微改动一下，对象的方法这次不写在对象里面了。

js
let obj = {
    a : 128
}
obj.b = function() {
        console.log(this) // { a: 128,b: f...}
        console.log(this === obj) // true
    }
let obj = {
    a : 128
}
obj.b = function() {
        console.log(this) // { a: 128,b: f...}
        console.log(this === obj) // true
    }

通过打印结果发现结果跟上面的一样，貌似没什么特别的。

这种写法好像很熟悉，和写事件的处理函数很像。比如给document添加一个点击事件。

js
document.onclick = function() {
        console.log(this) // document
    }
document.onclick = function() {
        console.log(this) // document
    }

这里打印输出了document，所以这里的this指向的就是绑定了该事件的对象，和前面都是一样的。

但是，实际上，事件onclick也是一个方法，因为它后面跟的就是一个函数，只不过这个方法需要我们手动取操作才执行（比如点击事件、键盘事件），前面的方法是单独调用执行的。

之前说的都是对象的方法的调用，那么接下来来说说普通函数。

还有这样一句话： ​

  • 普通函数下this不受函数定义的环境影响，而是取决于函数被谁调用

这句话非常重要。如何理解？举例子：

这里定义一个普通函数，名称为a。

js
function a() {
    console.log(this) // window
}
a()
function a() {
    console.log(this) // window
}
a()

那么this指向哪里呢？根据上面那句话我们不知道谁调用的a(),你认为是window？没错，确实是window。

但是如果是window，那么问题又来了：它似乎收到了函数定义环境的影响，而不是取决于函数被谁调用。

再改一下代码，函数还是不变（仍然定义在之前的环境）。声明一个数组，给数组元素赋值函数a

js
function a() {
    console.log(this) // [1,2,3,fn: f]
}
let arr = [1,2,3]
arr.fn = a
arr.fn()
function a() {
    console.log(this) // [1,2,3,fn: f]
}
let arr = [1,2,3]
arr.fn = a
arr.fn()

这次this打印出来是arr这个数组，可以论证之前的那句话了，不受函数定义环境影响，而取决于函数被谁调用。

现在打开严格模式再执行一次看看this是不是还是window

js
'use strict'
function a() {
    console.log(this) // undefined
}
a()
'use strict'
function a() {
    console.log(this) // undefined
}
a()

打开严格模式之后发现输出undefined，这里this找不到谁调用的函数，所以输出的就是undefined。

让setTImeout调用函数。

js

将a()当做一个构造函数，实例化一个对象出来，看看this指向是不是实例化出来的对象。

js

DANGER

未完成

箭头函数的this指向 ^2023-06-15 ​