在我们开始研究call, apply, bind
之前,应该对how does "this" keyword works in JavaScript有所认知。
简言之,"this"
创造了指向一个对象的引用。它可能指向了全局对象,比如在全局作用域{window object}
。
console.log(this); //Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …} 复制代码
"this"
在一个对象的内部指向对象的本身。
const student = { name: "ritik", getDetails(){ console.log(this) } } student.getDetails(); // {name: "ritik", getDetails: f} 复制代码
所以,那就是"this"
如何通过作用域自动地获取它的上下文的。
但是,如果我们想指定"this"
上下文(环境)到一个特定的对象呢?
我们在代码中演示this
。
const religion = { type: "humanity", property: "greatest" } function getDetails(){ console.log(`${this.type} is the ${this.property} religion`); } getDetails() // undefined is the undefined religion 复制代码
所以,这里的"this"
指向"window"
对象(根据函数中"this"默认行为,它指向"window"对象)。
但是,我们想它指向"religion"
对象。
那就是call, apply, bind
出现的地方。
const religion = { type: "humanity", property: "greatest" } function getDetails(){ console.log(`${this.type} is the ${this.property} religion`); } getDetails.call(religion); // humanity is the greatest religion getDetails.apply(religion); // humanity is the greatest religion 复制代码
这里,"call"
或者"apply"
方法将"religion"
对象和getDetails
函数关联起来。
或者,我们可以说,"call"
或者"apply"
方法在getDetails
函数中创造了一个"this"
指向"religion"
对象。
"call"
和"apply"
达到的效果是一样的,但是,它们处理参数的方式不同。
现在,我们传递一些参数给getDetails
函数。
const religion = { type: "humanity", property:"greatest" } function getDetails(world,creature){ console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`); } getDetails.call(religion,"modern world","human"); //humanity is the greatest religion in the modern world of human getDetails.apply(religion,["modern world","human"]); //humanity is the greatest religion in the modern world of human 复制代码
"call"
方法接收以逗号分隔的参数;但是"apply"
通过一个数组来处理参数。
现在,如果你想在代码很多地方使用带不同参数的"getDetails"
函数。
多次使用"call"
和"apply"
是一种解决方法,但是"bind"
函数可以让这个过程更加容易。
"bind"
方法创造了一个指向传入对象的"this"
引用,这和"apply"
或者"call"
那样,但是其返回一个函数。
现在,在你的代码中,这个函数通过不同参数被多次使用。
const religion = { type: "humanity", property:"greatest" } function getDetails(world,creature){ console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`); } const newgetDetails = getDetails.bind(religion); newgetDetails("modern world","human"); //humanity is the greatest religion in the modern world of human newgetDetails("future world","different creatures"); //humanity is the greatest religion in the future world of different creatures 复制代码
如果你不想存储返回的函数,那么它也可以直接引用,如下:
const religion = { type: "humanity", property:"greatest" } function getDetails(world,creature){ console.log(`${this.type} is the ${this.property} religion in the ${world} of ${creature}`); } getDetails.bind(religion)("modern world","human") //humanity is the greatest religion in the modern world of human