Javascript-apply、call、bind

alexnevsky 发布于2019-08-23 12:10 / 1985人阅读

摘要：的作用在中，三者作用是改变某个函数的执行上下文，具体作用是改变函数体内部的指向。

apply、call、bind的作用

在javascript中，三者作用是改变某个函数的执行上下文（Execution Context），具体作用是改变函数体内部this的指向。

举个栗子：

function example() {}
example.prototype = {
    name: "will",
    say: function() {
        console.log("hi," + this.name + "!")
    }
}
var e = new example()
e.say() // hi,will!

var obj = {
    name: "lucky"
}
e.say.apply(obj) // hi,lucky! 此时this.name是lucky
e.say.call(obj) // hi,lucky! 此时this.name是lucky
e.say.bind(obj)() // hi,lucky! 此时this.name是lucky

apply、call、bind的区别

apply、call只是接受参数的方式不太一样，而且会立即执行，bind会产生一个新函数，需要再次调用才会执行

举个栗子：

function func(arg1, arg2) {
    console.log(arg1 + arg2)
}
func.apply(this, [1, 2]) // apply接受的参数，第一个是对象，第二个是数组
func.call(this, 1, 2) // call接受的参数，第一个是对象，后面一个接一个

简单举几个apply、call、bind的应用场景 伪数组转标准数组

var obj = {
    0: 1,
    1: 2,
    length: 2
}
var arr1 = Array.prototype.slice.call(obj) // [1, 2]
var arr2 = Array.prototype.slice.apply(obj) // [1, 2]

取数组中的最大值或者最小值

var arr = [1, 2, 3, 4]

//取最大值
console.log(Math.max.apply(Math, arr)) // 4
console.log(Math.max.call(Math, ...arr)) // 4

//取最小值
console.log(Math.min.apply(Math, arr)) // 1
console.log(Math.min.call(Math, ...arr)) // 1

检验是否是数组

function isArray(obj) {
    return Object.prototype.toString.call(obj) === "[object Array]"
}
isArray([1]) // true
isArray({}) // false

React中使用bind使函数可以获取到props

class MyCircle extends Component {
    constructor(props) {
        super(props)
        this.func = this.func.bind(this)
    }
    func() {
        ...
    }
    ...
}

等等... 总结

三者作用都是改变函数this的指向
三者第一个传参都是要this要指向的对象
apply、call是立即执行函数，bind需要再次调用

GPU云服务器云服务器 JS中bind、call和apply的作 called Calls call

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98028.html

JS中的call、apply、bind方法详解

摘要：不能应用下的等方法。首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 评论0 收藏0
JS基础篇--call、apply、bind方法详解

摘要：首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。而则会立即执行函数。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 评论0 收藏0
前端基础:call,apply,bind的的理解

摘要：和区别其实他们的作用是一样的，只是传递的参数不一样而已。接受个参数，第一个参数指定了函数体内对象的指向，第二个参数为数组或者一个类数组。看个栗子一个有意思的事在中，多次是无效的。而则会立即执行函数。背景前两天在做小程序的需求的时候用到bind的时候才想起自己对这三的东西的了解比较浅薄，这个时候用的时候就有点怕。时候还是要好好学习下，理解下怎么玩。正文先说call 和 apply...

netmou 2019-08-20 17:01 评论0 收藏0
JS系列之call & apply & bind

摘要：参考链接在中，和是对象自带的三个方法，都是为了改变函数体内部的指向。返回值是函数方法不会立即执行，而是返回一个改变了上下文后的函数。而原函数中的并没有被改变，依旧指向全局对象。原因是，在中，多次是无效的。参考链接：https://juejin.im/post/59bfe8... 在JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变...

xiaochao 2019-08-23 13:09 评论0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0