js 封装 call 函数

本文介绍了JS中call、apply、bind这三个Function.prototype下的原型方法,它们可改变函数执行时this的指向。还讲解了call函数的基础用法,包括参数为null时的指向处理,以及如何传递参数,使用eval函数将参数以JS语句执行等内容。

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

js中call,apply,bind是Function.prototype下的原型方法,也就是js中函数function天生就有call,apply,bind方法。都是用来改变函数执行过程中this的指向。或者直接说成是,以传入第一个参数(要指向对象)为指向来执行调用者函数的上下文。

    var value = 'this is window';
    var foo = {
       value : 'this is foo'
    }
    function bar(name,age){
       console.log(this.value);
    }
    bar.call(foo,'fly',31);  //this is foo
复制代码

那么上面的代码就是call 最基础的用法了,那看到这里会不会有人同样和我一样这样想,是不是代码可以变为:

    var foo = {
       value : 'this is foo',
       bar : function(){
          console.log(this.value);
       }
    }
    foo.bar();
复制代码

call函数在执行的过程中把this调整为传入对象,再执行一遍,那么自己封装一个:

    Function.prototype.call2 = function(obj){
        var obj = obj || window;
        var arr = [];
        obj.fn = this;
        for(var i = 1; i < arguments.length; i++){
                arr.push('arguments['+i+']');
        }
        var result = eval('obj.fn('+arr.join()+')');
        delete obj.fn;
        return result;
    }
    var value = 'this is window';
    var foo = {
        value : 'this is foo'
    }
    function bar(name,age){
        console.log(this.value);
    }
    bar.call2(foo,'fly',31);
复制代码

指向

这里如果参数为null 的话默认在浏览器中让他指向window。obj.fn 先给我们这个对象加一个属性来存调用者,这里this 就是调用者,所以obj.fn。

参数

默认是何以传递参数的,那么后面传进来的参数我们用一个临时数组存一下,循环arguments,从1开始是从第二个参数开始保存,因为第一个是obj。记住这里存完数组,arr=['argument[1]','argument[2]']。直接放到obj.fn()里面,就成了字符串了。所以我们用到了eval函数,他的作用就是可以把字符串以js语句执行。变为obj.fn(arguments[1], arguments[2], arguments[3])。执行的结果返回值存给临时变量result,返回出去,最后把obj.fn删除。

转载于:https://juejin.im/post/5ceb7fe6f265da1bbf68fb23

### 回答1: 可以使用原型链来封装一个 `everyr` 函数,该函数能够模拟 Array 原型上的 `every` 方法,但是它会从数组的末尾开始遍历。代码如下: ```javascript Array.prototype.everyr = function(callback, thisArg) { // 获取数组的长度 var length = this.length; // 如果没有传入回调函数,则抛出错误 if (typeof callback !== 'function') { throw new TypeError(callback + ' is not a function'); } // 从数组的末尾开始遍历 for (var i = length - 1; i >= 0; i--) { // 判断是否存在当前元素 if (this.hasOwnProperty(i)) { // 调用回调函数 if (!callback.call(thisArg, this[i], i, this)) { // 如果回调函数返回 false,则返回 false return false; } } } // 如果所有元素都通过了回调函数的检查,则返回 true return true; }; ``` 这个函数中,我们先获取数组的长度,然后从数组的末尾开始遍历。在每次循环中,我们检查是否存在当前元素,然后调用回调函数,并判断回调函数的返回值。如果回调函数返回 false,则说明当前元素不符合条件,我们直接返回 false。如果所有元素都符合条件,则返回 true。 ### 回答2: 在JavaScript中,我们可以使用原型封装一个名为everyr的函数。everyr函数的作用是判断数组中的每一个元素是否都满足某个条件,如果都满足则返回true,否则返回false。 首先,我们可以在Array的原型对象上添加一个everyr方法。代码如下: ```javascript Array.prototype.everyr = function (callback) { for (let i = 0; i < this.length; i++) { if (!callback(this[i], i, this)) { return false; // 如果有一个元素不满足条件,则返回false } } return true; // 如果所有元素都满足条件,则返回true }; ``` 然后,我们可以在代码中使用everyr方法来判断数组中的每一个元素是否都是偶数。代码如下: ```javascript const arr = [2, 4, 6, 8, 10]; const isEven = arr.everyr(function (item) { return item % 2 === 0; }); console.log(isEven); // 输出 true ``` 在上面的代码中,我们首先定义了一个数组arr,然后使用everyr方法来判断数组中的每一个元素是否都是偶数。在everyr的回调函数中,我们使用了取余运算符来判断元素是否是偶数。最后,将结果保存在isEven变量中,并将结果输出到控制台。 通过以上的代码,我们成功地使用原型封装了一个everyr函数,并且成功地判断了数组中的每一个元素是否都是偶数。这样,我们就可以在其他地方重复使用everyr函数来判断数组中的元素是否满足特定的条件。 ### 回答3: JavaScript中的数组对象有一个内置的方法叫做`every()`,它用于检测数组中的所有元素是否都满足某个条件。如果数组中的所有元素都满足条件,那么`every()`方法返回`true`,否则返回`false`。 我们可以使用原型封装一个名为`everyr()`的函数来模拟`every()`方法的功能。下面是使用原型封装`everyr()`函数的方法: ```javascript Array.prototype.everyr = function(callback) { for (let i = 0; i < this.length; i++) { if (!callback(this[i], i, this)) { return false; } } return true; }; ``` 在上面的代码中,我们通过给`Array.prototype`对象添加一个名为`everyr`的方法来实现。 `everyr()`函数接收一个回调函数作为参数,该回调函数用于对数组中的每个元素进行验证。回调函数接收三个参数:当前元素的值、当前元素的索引和数组对象本身。 在`everyr()`函数内部,我们使用`for`循环遍历数组中的每个元素。如果回调函数返回值为`false`,表示当前元素不满足条件,我们则立即返回`false`。只有当所有元素都满足条件时,才会最终返回`true`。 通过原型封装`everyr()`函数后,我们可以在任何数组上使用它,就像使用原生的`every()`方法一样,例如: ```javascript const arr = [1, 2, 3, 4, 5]; const result = arr.everyr((elem) => elem > 0); console.log(result); // 输出:true ``` 在上面的示例中,我们首先定义了一个数组`arr`,然后使用`everyr()`方法检查数组中的每个元素是否大于0。由于所有元素都满足这个条件,所以最终返回`true`。 总结起来,我们可以通过原型封装一个名为`everyr()`的函数来模拟JavaScript的`every()`方法,它能够对数组中的元素进行条件判断并返回一个布尔值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值