Function.prototype.call()的使用与实现

最新推荐文章于 2022-01-14 15:33:42 发布
最新推荐文章于 2022-01-14 15:33:42 发布
阅读量1.5k 收藏 7
点赞数 3
分类专栏： 前端 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41996454/article/details/108609687
版权

文章目录





Function.prototype

在一个对象的上下文中应用另一个对象的方法；参数能够以数组形式传入。

bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

在一个对象的上下文中应用另一个对象的方法；参数能够以列表形式传入。

若函数对象为generator，返回true，反之返回 false。

获取函数的实现源码的字符串。 覆盖了 Object.prototype.toSource 方法。

获取函数的实现源码的字符串。覆盖了 Object.prototype.toString 方法。




call()的语法

call与apply 用于显示的设置函数的上下文，两个方法作用一样都是将对象绑定到this，只是在传递参数上有所不同。

  • call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。

  • call 可以接收一个参数列表

  • apply 只接受一个参数数组。

  • 与 bind 不同 call/apply 会立即执行函数

function show(title) {
    console.log(`${title + this.name}`);
}
let lisi = {
    name: '李四'
};
let wangwu = {
    name: '王五'
};
show.call(lisi, '用户1：');
show.apply(wangwu, ['用户2：']);

// 用户1：李四
// 用户2：王五

一些使用例子

找出数组最大值

let arr = [1, 3, 2, 8];
console.log(Math.max(arr)); //NaN
console.log(Math.max.call(Math, ...arr)); //8
console.log(Math.max.apply(Math, arr)); //8
console.log(Math.max(...arr)); //8

设置函数上下文

<body>
    <button message="这是按钮一">button</button>
    <button message="这是按钮二">button</button>
</body>
<script>
    function show() {
        alert(this.getAttribute('message'));
    }
    let bts = document.getElementsByTagName('button');
    for (let i = 0; i < bts.length; i++) {
        bts[i].addEventListener('click', () => show.call(bts[i]));
    }
</script>

构造属性继承

"use strict";
function Request() {
    this.get = function (params = {}) {
        //组合请求参数
        let option = Object.keys(params)
            .map(i => i + "=" + params[i])
            .join("&");

        return `获取数据 API:${this.url}?${option}`;
    };
}

//文章控制器
function Article() {
    this.url = "article/index";
    Request.apply(this, []);
}



//课程控制器
function Lesson() {
    this.url = "lesson/index";
    Request.call(this);
}



let article = new Article();
console.log(
    article.get({
        row: 10,
        start: 3
    })
);


let lesson = new Lesson();

console.log(
    lesson.get({
        row: 20
    })
);

手动实现一个call()

  • 不传入第一个参数，那么默认为 window
  • 改变 this 指向，让新的对象可以执行该函数
  • 给新的对象添加一个函数func，这个函数的上下文属于传入的this
  • 在执行完以后删除func
Function.prototype.myCall = function(context){
    context = context || window

    // 给context添加一个属性
    // getValue.call(a, 'user1', '24') => a.func = getValue
    context.func = this

    let args = [...arguments].slice(1)

    let result = context.func(...args)
    
    // 删除func
    delete context.func

    return result   
}



let arr = [1, 3, 2, 8];
console.log(Math.max(arr)); //NaN
console.log(Math.max(...arr)); //8
console.log(Math.max.apply(Math, arr)); //8
console.log(Math.max.call(Math, ...arr)); //8
console.log(Math.max.myCall(Math, ...arr)); //8

参考资料

《MDN文档》

《后盾人》

《前端进阶之道》

豆子前端
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsthis指向问题： new、apply、call、bind详解
qq_34691738的博客
04-08 158
JavaScript 中的 apply、call 和 bind 方法是前端代码开发中相当重要的概念，并且与 this 的指向密切相关 很多人对它们的理解还比较浅显，如果你想拥有扎实的 JavaScript 编程基础，那么必须要了解这些基础常用的方法。希望通过这一讲的学习，你可以彻底掌握它们。 为了方便你更好地理解本讲的内容，在课程开始前请你先思考几个问题： 1、用什么样的思路可以 new 关键词？ 2、apply、call、bind 这三个方法之间有什么区别? 3、怎样实现一个 apply 或者 call
Function.prototype.bind、call与apply方法简介
weixin_30615767的博客
08-31 138
前言 前段时间面试遇见一题，题目内容大概是 function Parent() { this.prop = 'parent'; } Parent.prototype.get = function() { alert(this.prop); }; Parent.prototype.show = function() { setTimeout(t...
前端必看：大厂面试题深度解析20发
小若燕雀，亦可一展宏图的博客
03-03 799
今年来，各大公司都缩减了HC，甚至是采取了“裁员”措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。本文挑选了20道大厂面试题，建议在阅读时，先思考一番，不要直接看解析。如果您有更好的答案，欢迎给我留言。如果有错误，可以在评论区指出。本文篇幅较长，希望小伙伴们能够坚持读完。 1. new的实现原理是什么？ new 的实现原理: 创建一个空对象，构造函数中的this指向这个...
前端面试总结
qq_31965515的博客
10-09 776
 这是我前段时间面试是遇到的一些问题，现在有时间了总结一下，当然这里面有自己的一些认识，也有一些从别人那里copy过来的，希望能给大家的面试带来帮助。   1.Vue的双向数据绑定原理是什么？ 简而言之：         vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消...
Function.prototype.apply()与Function.prototype.call()小结
10-22
JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数
Function.prototype.call.apply结合用法分析示例
09-05
昨天在网上看到一个很有意思的js面试题：var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);alert(a); 分析步骤如下，感兴趣的朋友可以参考下哈
浅谈javascript的Array.prototype.slice.call
10-23
发现大多人都用了Array.prototype.slice.call(argments,0)，一直不明白这句是干什么的。而昨天温习了slice()方法，再参考Function.call(thisArg[, arg1[, arg2[, ...]]])，还是不得而知（我脑筋转得慢:|）。
Function.prototype.apply()
weixin_33747129的博客
02-10 215
于.call()方法相似 唯一的区别就是，它接收一个数组作为函数执行时的参数 function f(x, y){ console.log(x + y); } f.call(null, 1, 1) // 2 f.apply(null, [1, 1]) // 2 复制代码 var a = ['a', , 'b']; var print = (a) => { c...
Function.prototype.call.apply结合用法
runfeel
07-03 236
昨天在网上看到一个很有意思的js面试题，就跟同事讨论了下，发现刚开始很绕最后豁然开朗，明白过来之后发现还是挺简单的，跟大家分享下！ 题目如下：var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);alert(a); 分析步骤如下： 1、将Function.prototype.call当成整体，ca...
Function.prototype.apply.call 待解答原理？？？
bounsail
07-28 1376
首先需要了解apply,call的基本用法,其目的是改变调用方法中的this指向,将其指向为传入的对象   代码:console.log   Js代码   var console = window.console || {log: function () {}};    var log = console.log;   console.log = fu
Function.prototype.call.apply作用详解
03-05 1210
关于call()和apply()基本用法可以参阅如下两篇文章: （1）.call方法参阅JavaScript call()一章节。 （2）.apply方法参阅JavaScript apply()一章节。 网上看到一段用法比较奇怪的代码，代码如下: [JavaScript] Function.prototype.apply.call(Math.floor, undefined...
Function.prototype.call 实现原理
前端大菜鸟的博客
03-26 467
Function.prototype.call 方法说明 call() 允许为不同的对象分配和调用属于一个对象的函数/方法。 call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法） 源码的关键点在于 在传递进来的上下文对象中构造一个需要执行的方法，比如： ctx = { fn...
Function.prototype.apply.call
BiuBiu_Tian(田)
06-04 1089
今天在读cw_logger源码的时候，看到这么一个方法: Function.prototype.apply.call 顿时，觉得难道还能这么调用。为什么？ 1. 先来看看上下文 if (context === MyLogger.WARN &amp;amp;&amp;amp; console.warn) { hdlr = console.warn; } else if (con...
前端js面试题
Xiaocong__的博客
01-14 1460
javascript原型与原型链 1. prototype 每个函数都有一个prototype属性，被称为显示原型 2._ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype 3. constructor 每个prototype原型都有一个constructor属性，指向它关联的构造函数。 4. 原型链 获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__pro
Function.prototype.call.call
[暂停使用]任先阳
02-13 338
Function.prototype.call.apply、Function.prototype.apply.call、Function.prototype.apply.apply 同理 const obj1 = { hello: 'obj1', sayHello() { console.log...
js prototype call 函数的讲解
热门推荐
小程序
02-08 1万+
prototype   源码 说明 1 Object.prototype.Property = 1; Object.prototype.Method = function () {     alert(1); }   var obj = new Object(); alert(obj.Property); obj.Metho
Array.prototype.slice.call()详解及转换数组的方法
bowen11233的博客
11-22 8697
在翻看以前公司留下的项目时，看到一段代码。 var $show=$imgList.filter(':visible'); var showPics=Array.prototype.slice.call('$show',0); 其中第二行虽然能猜出大意，但也有一些费解，不知道这样的用意为何。于是在网上搜了一下，发现关于这个用法讲解的还挺多，选其中一篇较为详细的，转存来以备不时之需。在此感谢小平果
JavaScript函数方法之bind()方法，Function.prototype.bind()
flym_的博客
06-23 299
bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。 实例 1.创建绑定函数 bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的 this 是原来的对象（比如在回调中传入...
Function.prototype.apply.call 理解分析
03-05 178
首先需要了解apply,call的基本用法,其目的是改变调用方法中的this指向,将其指向为传入的对象,改变this的指向，两种方法接收参数的方式不同。 代码:console.log var console = window.console || {log: function () {}}; var log = console.log; console.log = ...
Call apply属于function.prototype的方法
最新发布
07-17
是的，你说得对。在JavaScript中，call和apply都是Function.prototype对象的方法。这意味着每个函数对象都可以使用call和apply方法。 Function.prototype是JavaScript中所有函数对象的原型对象。原型对象是一个特殊的对象，它包含了一些共享的属性和方法，可以被其他对象继承和访问。 因此，当你定义一个函数时，它会自动继承Function.prototype对象上的方法，包括call和apply方法。这意味着你可以在任何函数对象上使用call和apply方法，通过调用函数对象的这两个方法来改变函数内部的this指向并传递参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值