Javascript 中的this的一些理解

118 阅读3分钟

先决条件:

  1. 函数声明、表达式和箭头函数
  2. 对象

“this”关键字到底是什么?
执行上下文包含三个组件:变量环境、作用域链和 this。

this是一个特殊变量,它采用函数所有者的值,并为每个函数[执行上下文]创建。

关键字的值只有在函数被调用时才被赋值,而且值取决于函数的调用方式,不是静态的。

如果我们只是console.log(this)。它将返回全局对象。

this关键字不指向函数本身或变量环境。

我们将看看调用函数的方式和关键字所取的值:

1、方法调用:

如果通过此方法调用函数,则this关键字将指向调用它的对象,例如:

//code 
const student={
    name:"Piyush",
    logThis:function(){
        console.log(this)
    }
}


console.log(student.logThis())


// Output: this point to the object where it is called


name: 'Piyush', print: ƒ}

2.简单的函数调用

这可能指向两个不同的值,这取决于是否启用了严格模式。

a. 如果启用了严格模式

它返回未定义。

//code 
`use strict`
function print12() {
    console.log(this)
}
console.log(print12())

// output
undefined

b. 没有严格模式

它返回全局对象。

//code 

function print12() {
    console.log(this)
}

console.log(print12())


// output: window object
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

3.箭头功能:

箭头函数没有自己的“this”关键字。在箭头函数中使用 this 关键字将简单地指向周围的函数。它也被称为“词法 this”关键字。

//code
const student={
    name:"Piyush",
    age:20,
    print12:()=> {
        console.log(this)
    }
}
console.log(student.print12())


//output: window object
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

这里的“this”并不是指向调用函数的this对象,而是指向周围的函数,这里是global(object)。

5.方法借用和this关键字:

假设我们有两个对象 student1 和 student2。Student1 有“printage”方法,我们将它复制给 student2。

//code
const student1={
    name:"Piyush",
    age:20,
    printage:function() {
        console.log(this)
        console.log("Your birth year", 2022-this.age)
    }
}


const student2={
    name:"ABC",
    age:18,
}


//copying student1.printage method to student2
student2.printage=student1.printage
console.log(student2.printage())


//output
{name: 'ABC', age: 18, printage: ƒ}
Your birth year 2004

当这一行执行“printage”方法时,即使它在 student1 中,“this”指向调用该方法的对象,这里 student2 正在调用该方法,所以我们得到上面的输出。

6、调用、申请、绑定方法:

我们可以使用这些方法显式设置“this”的值。

一个。称呼

call 方法中的第一个参数应该始终是我们希望“this”关键字指向的对象。
这里我们有两个学生:student1 和 student2。

我们从 student1 复制“printage”方法并将其存储在出生年份中。生日是一个常规函数。

之后我们使用birthyear.call方法,第一个参数student2是我们要this引用的对象。之后,我们可以为函数传递所需的参数。

例子 :

const student1={
    name:"Piyush",
    age:40,
    printage(score) {
        console.log(this)
        console.log("Hi "+this.name+". You scored "+score)
    }
}


const student2={
    name:"ABC",
    age:18,
}


// copy print age
const birthyear=student1.printage


// call method
birthyear.call(student2,20)


//output
{name: 'ABC', age: 18}
Hi ABC. You scored 20

所以我们得到,输出:{Hi ABC. You scored 20}

b. 申请:

apply 方法类似于 call 方法。这里唯一的区别是,在调用 apply 方法时,函数的参数是在一个数组中传递的。
例子:

//code
const student1={
    name:"Piyush",
    age:30,
    printage(score) {
        console.log(this)
        console.log("Hi "+this.name+". You scored "+score)
    }
}


const student2={
    name:"ABC",
    age:18,
}


// copy print age
const birthyear=student1.printage


// apply method
birthyear.apply(student2,[20])


//output
{name: 'ABC', age: 18}
Hi ABC. You scored 20

C。绑定:

bind 方法与 call 和 apply 方法有点不同。它接受一个参数,即对象 for this,并返回一个新函数。现在我们可以使用该函数来传递参数。
例子 :

//code
const student1={
    name:"Piyush",
    age:20,
    printage(score) {
        console.log(this)
        console.log("Hi "+this.name+". You scored "+score)
    }
}


const student2={
    name:"ABC",
    age:18,
}

// the bind method will return a function, while this will point to student2
const birthyear=student1.printage.bind(student2)


//use the function to pass arguments
birthyear(39)


//output
{name: 'ABC', age: 18}
Hi ABC. You scored 39