在我们开始研究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