call apply bind 箭头函数的实现原理

最新推荐文章于 2025-03-10 11:29:25 发布

置顶

薛定谔的panda

最新推荐文章于 2025-03-10 11:29:25 发布

阅读量1.9k

点赞数 1

分类专栏： Javascript 文章标签： call apply bind 箭头函数 JavaScript

本文链接：https://blog.youkuaiyun.com/u014168594/article/details/85071353

版权

本文深入探讨了JavaScript中call、apply、bind和箭头函数的实现原理。call和apply主要用来改变函数执行时的上下文(this)值，而bind则创建一个新的函数并预设this值。call和apply的源码分析揭示了它们如何在不同场景下工作，而bind的特殊之处在于它返回一个新的函数，并允许参数预设。最后，箭头函数不拥有自己的this，它会捕获其所在（最近的）上下文的this值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

call apply bind 箭头函数的实现原理

（一）call 源码

call() 和 apply() 类似于借用，相当于 A 对象内部有了 B 对象的方法，实质是函数在运行时指定 this 值，打破了解析器在函数调用时创建执行环境时this绑定的规则。

例子：

const val = {
    a:1
}
function add(b,c){
    return this.a + b + c
}
console.log(add.call(val,2,3))	//6

相当于：

1.给 val 对象增加方法 add

2.执行 val 对象的方法 add

3.删除 add 方法

val.add = function(b,c){...}
console.log(val.add(2,3))	//6
delete val.add

call 原生实现：

Function.prototype.callFunc = function(context){
    var context = context || window		//undefined 时 this 绑定在全局
    context.fn = this
    var args = []
    for(var i = 1, len = arguments.length; i < len; i++){
        args.push('arguments[' + i + ']')		//i 为1，除去第一个参数