【译】JavaScript中的call,apply,bind

【译】JavaScript中的call,apply,bind

在我们开始研究​​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});}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});}getDetails.call(religion);// humanity is the greatest religiongetDetails.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 humangetDetails.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 humannewgetDetails("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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。