【call、apply、bind、new手写实现】

于 2024-07-08 21:18:05 发布
阅读量682 收藏 17
点赞数 22
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45906680/article/details/140278441
版权

目录

手写call和apply

手写 call

call() ：在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。

let foo = {
    name: "aq"
}

function getName() {
    console.log(this.name);
}

getName(); // undefined

getName.call(foo) // 'aq'

call() 实现的功能如下：

  • 改变this的指向，指到了getName
  • getName 函数执行了

第一步

上述方式等同于：

let foo = {
    name: "aq",
    getName: function () {
        console.log(this.name)
    }
}

foo.getName() // 'aq'

这个时候getName指向了foo，但是这样却给foo本身添加了一个属性，但是我们可以用delete删除。
所以可以将步骤分为：

  1. 将该函数设置为对象的属性；
  2. 执行该函数；
  3. 删除该函数。

所以可以实现一版：

// 第一版
Function.prototype.call2 = function(context) {
    // 首先要获取调用call的函数，用this可以获取
    context.fn = this;
    context.fn();
    delete context.fn;
}

// 测试一下
 let foo = {
    name: 'aq'
};

function getName() {
    console.log(this.name);
}

getName.call2(foo); // 'aq'

第二步

call 除了可以指定 this 还可以指定参数

// 第二版
Function.prototype.call2 = function(context) {
    // 首先要获取调用call的函数，用this可以获取
    context.fn = this;
    let arg = [...arguments].slice(1)
    context.fn(...arg);
    delete context.fn;
}

// 测试一下
 let foo = {
    name: 'aq'
};

function getName(age,gender) {
    console.log(age);
    console.log(gender);
    console.log(this.name);

}

getName.call2(foo,19,1); // 19 1 'aq'

第三步

  1. 当指定的对象为null 或 undefined的情况下
var name = 'aq'

function getName(){
    console.log(this.name);
}

getName.call(null) // 'aq'
getName.call(undefined) // 'aq'
  1. 被调用函数有返回值的情况下

function getName(){
    return {
        text: "我有返回值"
    }
}

getName.call() // {text: '我有返回值'}

所以最后终写法：

    Function.prototype.call2 = function(context,...args) {
        if(typeof context === 'undefined' || context === null){
            context = window
        }
        let symbolFun = Symbol();
        context[symbolFun] = this;
        let result = context[symbolFun](...args);
        delete context[symbolFun];
        return result
    }

手写 apply

apply 的实现跟 call 类似，只是入参不一样，apply为数组

所以最后终写法：

    Function.prototype.call2 = function(context,args) {
        if(typeof context === 'undefined' || context === null){
            context = window
        }
        let symbolFun = Symbol();
        context[symbolFun] = this;
        let result = context[symbolFun](...args);
        delete context[symbolFun];
        return result
    }

手写 bind

Function 实例的 bind() 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其this关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。

由此可见bind函数的两个特点：

  • 返回一个函数
  • 可以传入参数

返回函数模拟实现

var foo = {
    value: 1
}

function bar () {
    console.log(this.value)
}

var bindFoo = bar.bind(foo);

bindFoo(); // 1

关于this的指向，我们可以利用call或apply实现

// 版本一

Function.prototype.bind2 = function (context) {
    let self = this;
    // 当返回函数给外部之后 外部执行的 this就会被改变 所以这里要保存this
    // 被绑定函数可能会有返回值 这里将执行结果返回出去
    return function () {
        return self.apply(context)
    }
}

传参模拟实现


var foo = {
    value: 1
};

function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);

}

var bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

当需要传 name 和 age 两个参数时，可以在 bind 的时候，只传一个 name，在执行返回的函数的时候，再传另一个参数 age。
这里如果不适用rest，使用arguments进行处理：

// 第二版
Function.prototype.bind2 = function (context) {

    var self = this;
    // 获取bind2函数从第二个参数到最后一个参数
    var args = Array.prototype.slice.call(arguments, 1);

    return function () {
        // 这个时候的arguments是指bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(context, args.concat(bindArgs));
    }
}

构造函数效果实现

bind 还有一个特点：
一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略，同时调用时的参数被提供给模拟函数。

也就是说当bind返回的函数作为构造函数的时候，bind指定的this值会失效，但是传入的参数依然生效。举个栗子：

var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}

bar.prototype.friend = 'kevin';

var bindFoo = bar.bind(foo, 'daisy');

var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin

尽管在全局和 foo 中都声明了 value 值，最后依然返回了 undefined，说明绑定的 this 失效了

// 第三版
Function.prototype.bind2 = function (context,...args) {
    let self = this;

    let fBind =  function (...args2) {
        // 如果调用这个函数是构造函数实例调用的 那么 this 指向 该实例 否则 this 指向 window
        return self.apply(this instanceof fBind ? this: context ,[...args,...args2])
    }

    // 这里再将原型赋值给你新创建的函数
    fBind.prototype = this.prototype

    return fBind
}

构造函数效果优化实现

我们直接将 fBind.prototype = this.prototype ，假如我直接修改 fBind.prototype, 这意味着绑定函数的 prototype 也是会被修改的。所以这里我们用一个空的构造函数中转一下

// 第四版
Function.prototype.bind2 = function (context,...args) {
    let self = this;

    let middle = function () {}

    let fBind =  function (...args2) {
        // 如果调用这个函数是构造函数实例调用的 那么 this 指向 该实例 否则 this 指向 window
        return self.apply(this instanceof fBind ? this: context ,[...args,...args2])
    }

    middle.prototype = this.prototype
    fBind.prototype = new middle();

    return fBind
}

最终版

调用 bind 的不是函数时，提示错误：

Function.prototype.bind2 = function (context,...args) {
    if (typeof this !== "function") {
        throw new Error("提示错误信息");
    }
    let self = this;
    let middle = function () {}
    let fBind =  function (...args2) {
        return self.apply(this instanceof fBind ? this: context ,[...args,...args2])
    }
    middle.prototype = this.prototype
    fBind.prototype = new middle();
    return fBind
}

手写 new

new运算符允许开发人员创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

根据MDN的描述，当使用new关键字调用函数时，该函数将被用作构造函数。new将执行以下操作：

  1. 创建一个空的简单 JavaScript 对象。为方便起见，我们称之为 newInstance。
  2. 如果构造函数的 prototype 属性是一个对象，则将 newInstance 的 [[Prototype]] 指向构造函数的 prototype 属性，否则 newInstance 将保持为一个普通对象，其 [[Prototype]] 为
    Object.prototype。
  3. 使用给定参数执行构造函数，并将 newInstance 绑定为 this 的上下文（换句话说，在构造函数中的所有 this 引用都指向 newInstance）。
  4. 如果构造函数返回非原始值，则该返回值成为整个 new 表达式的结果。否则，如果构造函数未返回任何值或返回了一个原始值，则返回 newInstance。（通常构造函数不返回值，但可以选择返回值，以覆盖正常的对象创建过程。）
function objectFactory() {
    // 1.首先创建一个空的JavaScript对象
    let newInstance = Object.create();

    // 将构造函数提取出来 arguments 里面剩余的就是参数
    let Constructor = [].shift.call(arguments);

    // 2.将 newInstance 的 [[prototype]] (__proto__) 属性指向 构造函数的prototype 
    Object.setPrototypeOf(newInstance, Constructor.prototype);

    // 3.使用指定参数执行构造函数 将newInstance绑定为this
    let result = Constructor.apply(newInstance,arguments)

    // 4.判断构造函数是否返回了对象 否则返回newInstance
    return typeof result === 'object' ? result : newInstance

}

测试一下

function objectFactory() {
    // 1.首先创建一个空的JavaScript对象
    let newInstance = Object.create(null);

    // 将构造函数提取出来 arguments 里面剩余的就是参数
    let Constructor = [].shift.call(arguments);

    // 2.将 newInstance 的 [[prototype]] (__proto__) 属性指向 构造函数的prototype 
    Object.setPrototypeOf(newInstance, Constructor.prototype);

    // 3.使用指定参数执行构造函数 将newInstance绑定为this
    let result = Constructor.apply(newInstance,arguments)

    // 4.判断构造函数是否返回了对象 否则返回newInstance
    return typeof result === 'object' ? result : newInstance

}

function foo (name,age) {
    this.name = name;
    this.age = age
    // return {}
}

foo.prototype.getInfo = function () {
    console.log(this.name + '今年' + this.age + '岁');
}

let obj = objectFactory(foo,'敏敏',18);
obj.getInfo(); // 敏敏今年18岁
console.log(obj); // foo { name: '敏敏', age: 18 }
阿柒的以气驭剪
关注
手写函数 bind、call、apply
m0_38066007的博客
05-25 165
bind 应用 - 返回一个新的函数（旧函数不会更改），但不执行 - 绑定 `this` 和部分参数 - 如果是箭头函数，无法改变 `this` ，只能改变参数 function fn(a, b, c) { console.log(this, a, b, c) } const fn1 = fn.bind({x: 100}) fn1(10, 20, 30) // {x: 100} 10 20 30 const fn2 = fn.bind({x: 100}, 1, 2) fn2(10, 20,
js手写apply
qq593249106的博客
10-17 991
前端面试题之JS手写apply 参考之前手写的call方法： https://blog.csdn.net/qq593249106/article/details/83115935 Function.prototype.call2 = function (obj) { var obj = obj || window; var args = []; for(var i = 1;...
教你如何手写call、apply、bind函数
jianjieX的博客
11-20 188
Function.prototype.myCall=function(context){ //判断调用对象 if(typeof this!=="function"){ console.err('type error'); } //获取参数 let args=[...arguments].slice(1), result=null; //判断context是否传入，如果未传入则设置未window context=context||window; //将调用函数设为对象的方法 conte
手写call和apply
weixin_43956427的博客
03-01 205
------------------------------------------------------------------------ 手写call 先看下call的使用，通过 call()方法可以使用另一个对象的方法 var person = { //sayhello: () => { console.log('hello', this.name) } sayhello: function() { console.log('hello', this.name) } } var p1
手写实现call,apply函数
weixin_45936275的博客
09-14 441
call的使用 举个例子： var foo = { value: 1 }; function bar() { console.log(this.value); } bar.call(foo); // 1 注意两点： 1.call 改变了 this 的指向，指向到 foo 2.bar 函数执行了 实现第一步 那么我们该怎么模拟实现这两个效果呢？ 试想当调用 call 的时候，把 foo 对象改造成如下： var foo = { value: 1, bar: functio
面试常考点：手写一个call和apply
Heartbroken_man的博客
02-07 412
面试的时候call和apply是经常被问到的点，它们可以用来改变函数的this指向，那么是怎么实现的呢？ 首先我们定义一个需要用到的实例代码 const name = 45456; const obj = { name: 111, fn: function (param1, param2) { console.log(this.name, param1, param2); }, }; 我们调用自带的call方法 obj.fn.call(null, 2, n
手写 call、apply 及 bind 函数
weixin_47450807的博客
02-26 4708
手写 call、apply 及 bind 函数
最详细的apply、call、bind手写实现教学
weixin_45819276的博客
08-19 627
1、call Function.prototype.call 语法 fun.call(thisArg[,arg1[,arg2[, ...]]]) 参数 thisArg 在fun运行时指定的this值。 arg1, arg2, ... 给到fun的参数列表（每个参数都写出来）。 返回值 使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined。 2、apply Function.prototype.apply 语法 fun.apply(thisArg, [ar
js代码-手写call/bind/apply
07-14
以上代码定义了`myCall()`, `myBind()`, 和 `myApply()` 方法，它们分别实现了与原生`call()`, `bind()`, 和 `apply()` 相同的功能。在实际应用中，这些自定义方法可以用于学习理解，但为了性能和兼容性考虑，通常应...
js代码-手写代码，手动实现new,stringtify,parse,call,apply,bind等常见函数。
07-15
在JavaScript编程中，掌握一些核心的内置函数是至关重要的，比如`new`、`JSON.stringify()`、`JSON.parse()`、`Function.prototype.call()`、`Function.prototype.apply()`以及`Function.prototype.bind()`。...
call、apply和bind的区别及如何手写
weixin_43190804的博客
02-18 435
三者的相同点：都是用来改变this的指向 1.call()和apply()的区别： 都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同） B.call(A, args1,args2);即A对象调用B对象的方法 F.apply(G, arguments);即G对象应用F对象的方法 相同点：第一个参数是this要指向的对象,当第一个参数为null、undefined时，默认指向window; 不同点：apply()第二个参数是数组，call()是参数列表 ...
JS学习笔记—手写封装call、apply 、 bind 函数和new的实现
阿周的博客
04-25 887
一、实现call函数 Function.prototype.myCall = function(context) { if (typeof this !== 'function') { throw new TypeError('Error') } //当传入的context为基础类型时，直接挂载fn会报错 if(typeof context !== 'object') ...
JS手写实现call、apply、bind
追风Programer的博客
09-09 2509
目录 写在前面 call手写实现 apply手写实现 bind手写实现 写在前面 今天的主题是手写实现某些常见的js函数。在JavaScript中，我们知道改变一个函数的this指向，一般来说有这样三个函数可以帮助我们做到这样的效果，分别是call、apply、bind。但是三个函数又有所区别，具体的区别我就不详述了，大家可以去call、apply、bind详细介绍看看详细的介绍。 ...
手写call,apply,bind函数
热门推荐
白天不懂夜的黑
02-22 1万+
涉及面试题 call,apply,bind函数内部实现是怎样的? 考虑两点: 第一个参数为undefined或null的时候，那么会转变为window 改变了this执行，让新的对象可以执行该函数。 call Function.prototype.myCall = function(context) { if (typeof context === "undefined" || c...
如何实现一个call或 apply方法，手写一个call或apply
宋坚强大大~~
11-25 1054
call语法： fun.call(thisArg,arg1,arg2,...)，调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。 apply语法： func.apply(thisArg,[argsArray])，调用一个函数，以及作为一个数组（或类似数组对象）提供的参数。 Function.call按套路实现 call核心： 将函数设为对象的属性...
手写call、apply
linxf
07-06 926
在Function的prototype添加myCall和myApply 方法 Function.prototype.mycall = function (ctx,...args){ cxt = ctx||window; var fn = Symbol(); cxt[fn] = this; var result = cxt[fn](...args); re...
手写call、apply、bind实现及详解
weixin_34218579的博客
02-03 986
它们有什么不同？怎么用？ call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。 let obj = { name: "一个" } function allName(firstName, lastName) { console.log(this) ...
全网最详细手写call和apply
qq_52648305的博客
08-09 269
代码】全网最详细手写call和apply。
【JS】手写实现call、apply
m0_57946086的博客
04-14 1175
目录 1、call、apply作用、区别 2、实际开发中call、apply的应用场景 3、手写_call函数 4、手写_bind函数 1、call、apply作用、区别 作用：改变this指向。 区别：参数的区别。call传数据，apply传数组 2、实际开发中call、apply的应用场景 js的继承：1）原型链继承；2）构造函数继承-call实现； js的数据类型-Object.prototype.toString.call()； es5把伪数组转化成数组-Array
手写call apply bind方法
最新发布
03-17
手写call方法: ``` Function.prototype.myCall = function(context) { context = context || window; context.fn = this; var args = [...arguments].slice(1); var result = context.fn(...args); delete ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值