Kasan Blog

this是指什么?

1.对于函数而言

对象是通过地址引用函数,因为对象和函数在内存里不是同一处的

所以函数被调用时,需要告知是谁调用了它,那么谁调用了它,谁就是this

通常我们可以通过.call()的第一项确认或改变this

const obj = {
    fn : function(){
    console.log(this)},
    b : 10086,
}

const obj2 = {test:'obj22333'}

obj.fn()
obj.fn.call(obj2)

如果直接调用函数,默认的this是window,

在严格模式下,默认 this 为undefined

const fn = function(){
    console.log(this)
}
fn() // Window

// 严格模式
const fn = function(){
    'use strict'
    console.log(this)
}
fn() // undefined

2.对于构造函数而言

在构造函数中,this指向的是构造函数的new出来的实例对象

function Person(name, age) {
    this.name = name,
    this.age = age
}
 
Person.prototype.sayHi = function() {
    console.log(this, this.name, this.age)
}
 
let newPerson = new Person('tom', 30)
newPerson.sayHi()// {name: 'tom', age: 30} 'tom' 30

3.箭头函数会继承this

3.1 在下面这段代码中,箭头函数的this和普通函数的指向并不相同,因为箭头函数没有this,它的this跳出了obj外找,这里只能是window了

let obj = {
    name: 'alex',
    logA: function () {
        console.log(this)
    },
    logB: () => {
        console.log(this)
    }
}
 
obj.logA() //{name: 'alex', logA: ƒ, logB: ƒ}
obj.logB() //Window

3.2 在第二种情况中,箭头函数定义在另一个函数内,那么他将继承定义他的这个函数的this,

因为函数是直接执行的,this也就是window,this.shuxing === window.shuxing

var shuxing = 'test'  //var 会提升变量,这样写会把shuxing挂载到全局的window上
x2 = function(){
        let shuxing = 'wuhu'
        console.log(this.shuxing)

        let x6 = ()=>{
            let shuxing = '23333'
            console.log(this.shuxing)
        }
        x6()
    }
x2()