先决条件:
- 函数声明、表达式和箭头函数
- 对象
“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