手写Js代码 (2) ------ call方法，apply方法，bind方法

最新推荐文章于 2025-06-04 16:52:28 发布

原创最新推荐文章于 2025-06-04 16:52:28 发布 · 220 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

手写js代码专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何通过自定义Function原型方法实现call、apply和bind的功能，这些方法用于改变函数调用时的上下文，即this指向。通过给目标对象添加Symbol类型的属性，巧妙地实现了对函数调用上下文的修改。

// 实现思路，给target对象加symble类型的属性，指向this
Function.prototype.myCall = function (target,...args){
    // 判断如果targe为null或者undefined，将this指向window 或者Clobalthis
    target = target || globalThis;
    
    // 将this指针指向返回的对象
    const prop = Symbol();
    target[prop] = this;
    var result = target[prop](...args);
    delete target[prop];    
    return result;
}
function person (name,age){
    console.log("I am " + this.name);
    console.log(age);
}
var david = {
    name:'david'
}
 person.myCall(david,'',28);

// 实现思路，给target对象加symble类型的属性，指向this
Function.prototype.myApply = function (target,args){
    // 判断如果targe为null或者undefined，将this指向window 或者Clobalthis
    target = target || globalThis;
    
    // 将this指针指向返回的对象
    const prop = Symbol();
    target[prop] = this;
    var result = target[prop](...args);
    delete target[prop];    
    return result;
}
function person (name,age){
    console.log("I am " + this.name);
    console.log(age);
}
var david = {
    name:'david'
}
 person.myApply(david,['',28]);

Function.prototype.myBind = function (target){
    // 判断如果targe为null或者undefined，将this指向window 或者Clobalthis
    target = target || globalThis;
    var self = this;
    return function(...args){
        self.apply(target,args);
    }
}
function person (age){
    console.log("I am " + this.name);
    console.log(age);
}
var david = {
    name:'david'
}
 var Asian =  person.myBind(david);

Asian(18);