call&apply&bind的js实现以及应用

mgckid 发布于2019-08-23 15:26 / 3360人阅读

摘要：实现使用是这样转换的生成新的函数，新的执行上下文通过在传入对象中增加调用方法执行被改变，得恢复原来的值实现在这里，我们看到了一个有趣的现象，在中可以传入数组两大作用改变借用其他对象的方法改变如何实现执行借用其他对象的方法继承的实现执行能借用

js实现call

// example
let obj = {
    a: 124,
    b: "ccc"
};
function fn(c) {
    return this.a + this.b + this.c;
}
// 使用call是这样转换的
// step 1: 生成新的函数，新的执行上下文(通过在传入对象中增加调用方法)
const obj = {
    a: 124,
    b: "ccc",
    fn: function(c) {
        return this.a + this.b + this.c;
    }
}
// step2: 执行 obj.fn(333);
let res = obj.fn(333);
// step3: obj被改变，得恢复原来的值
delete obj.fn;

Function.prototype.myCall = function(context) {
    const newContext = context || window;
    newContext.fn = this;
    const args = [];
    for(let i = 1; i < arguments.length; i++) {
        args.push(arguments[i]);
    }
    const res = newContext.fn(...args);
    delete newContext.fn;
    return res;
}
console.log(fn.myCall(obj, "cccc"));

js实现apply

Function.prototype.myApply = function(context, arr) {
    const newContext = context || window;
    newContext.fn = this;
    const args = [];
    let res;
    if (!arr) {
        res = newContext.fn(...args);
    }
    else {
        if (!(arr instanceof Array)) {
            throw new Error("params must be array");
        }
        result = context.fn(...arr);
    }
    delete newContext.fn;
    return res;
    
}
console.log(fn.myApply(obj, ["cccc"]));

call & apply

Math.max.apply(null, [3,5,88,2])
在这里，我们看到了一个有趣的现象，在Math.max中可以传入数组
call&apply两大作用：

改变this
借用其他对象的方法

改变this

如何实现Function.prototype.bind()

Function.prototype.bind = function(){
    var self = this,
        context = [].shift.apply(arguments);
        args = [].slice.apply(arguments);
    
    return function(){
        return self.apply(context, [].concat.apply(args, [].slice.apply(arguments)))
    };
}

//执行
var obj = {
    name: "yyh"
}
var func = function(a, b, c, d){
    console.log(this.name);
}.bind(obj, 1, 2);
func(3, 4);

借用其他对象的方法

继承的实现

var aFn = function(){
    this.name = "yyh"
}
var bFn = function(){
    aFn.apply(this, arguments);
}
bFn.prototype.getName = function(){
    return this.name
}
//执行
var b = new bFn();
console.log(b.getName())

能借用数组的方法，Obj.array.push, 需要满足两个条件

Obj的属性可存取

length属性可读写

var a = {c:3};
[].push.apply(a, [3,4,5])
console.log(a)

GPU云服务器云服务器 JS中bind、call和apply的作 js中的call和apply js的 &amp标签 apply与call的区别

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

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

JS系列之call &amp; apply &amp; bind

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

xiaochao 2019-08-23 13:09 评论0 收藏0
apply&amp;&amp;call&amp;&amp;bind

摘要：用来改变函数的对象的指向都是用来改变函数的对象的指向的。后面的参数是调用方法的参数。都可以利用后续参数传参。用来改变函数的this对象的指向都是用来改变函数的this对象的指向的。第一个参数都是this要指向的对象。后面的参数是调用方法的参数。都可以利用后续参数传参。 var xw={ name: 小王, gender: 男, age: 24, ...

whataa 2019-08-22 15:37 评论0 收藏0
Hard binding &amp; Soft binding detailed explanati

摘要：硬绑定会大大降低函数的灵活性，使用硬绑定之后就无法使用像隐式绑定或显示绑定来修改。如果可以给默认绑定指定一个全局对象和意外的值，那就可以实现和硬绑定相同的效果，同时保留隐式绑定或显示绑定修改的能力。 JavaScript中硬绑定与软绑定详解 JS中硬绑定这种方式可以把this强制绑定到指定的对象(除了使用new时)，防止函数调用时应用默认绑定规则(非严格模式下全局对象-window| ...

xiyang 2019-08-26 12:11 评论0 收藏0
《javascript高级程序设计》函数调用模式 &amp; this深度理解

在上一篇文章（《javascript高级程序设计》笔记：Function类型）中稍微提及了一下函数对象的属性—this，在这篇文章中有深入的说明：函数的三种简单调用模式 1 函数模式定义的函数，如果单独调用，不将其与任何对象关联，那么就是函数调用模式 function fn(num1, num2) { console.log(this); } // 直接在全局调用 fn();// w...

wyk1184 2019-08-21 16:22 评论0 收藏0
JS手写bind之处理new的情况详解

　　你有遇见过给bind返回的函数做new操作的场景，本篇主要讲述的就是实现一下兼容new操作的bind写法，顺便学习一下new操作符，为大家提供下参考。　　大家可以去看下关于 JS 中 bind 方法的实现的文章，并给出了实现：　　Function.prototype.myBind=function(thisArg,...prefixArgs){ 　　constfn=this; 　　return...

3403771864 2022-11-19 22:09 评论0 收藏0