好好学习-JS基础-call/apply实现

call

call()方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法
function foo (){
    console.log(this.name)
}
var obj = {
    name:'xiaoming'
}

foo.call(obj)  // xiaoming

从前面简单的例子中得出几点:

  • call 函数改变了 this 的指向,this 指向了 obj
  • 执行了 foo 这个函数

那是不是可以简单的理解成,我在这个对象中添加了一个属性,并执行:

var obj  ={
    name:'xiaoming',
    fn:function(){
        console.log(this.name)
    }
}
// this 指向的是 obj
console.log(obj.fn())  // xiaoming

根据上面的思路可以完善一下:

Function.prototype.call1 = function (context) {
    // this指向调用 call1方法的函数,将这个函数赋值给 fn,也就是上面说到的给 obj添加一个 fn 方法
    context.fn = this
    // 执行这个方法
    context.fn()
    //我们不能平白无故的给一个对象添加多余的属性,所以要把这个属性再删除掉
    delete context.fn
}
call()还能给定参数执行函数
Function.prototype.call2 = function(context){
    context.fn = this
    var arg = []
    // 从第二个参数开始取
    for(i=1;i<arguments.length;i++){
        arg.push(arguments[i])
    }
    // 将值传给要执行的函数
    context.fn(...arg)
    delete context.fn
}
this 参数可以为 null,当参数值为 null 时,this 指向的是 window
Function.prorotype.call3 = function (context) {
    //判断参数 context 是否为 null
    var context = context || window
    context.fn = this
    var arg = []
    for(var i = 1;i<arguments.length;i++){
        arg.push(arguments[i])
    }
    context.fn(...arg)
    delete context.fn
}
函数是可以有返回值的!

小栗子:

var obj = {
    value:1
}

function foo (name,age){
    console.log(name)
    console.log(age)
    console.log(this.value)
}
foo.call(obj,"ann",18) 
// ann
// 18
// 1

那么可以进行最后的完善啦~

Function.prototype.call4 = function(context){
    var context = context || window
    context.fn = this
    var arg = []
    for (var i = 1; i<arguments.length; i++) {
        arg.push(arguments[i])
    }
    var result = context.fn(...arg)
    delete context.fn
    return result
}

apply

apply()方法和 call()方法用法很相似
var obj = {
  value: 'value'
}
function foo(name, age) {
  console.log(name)
  console.log(age)
  console.log(this.value)
}

foo.apply(obj, ['ken', 18])
// ken
// 18
// value

实现 apply 方法:

  • 改变 this 的指向
  • 参数以数组的形式传入
Function.prototype._apply = function (context,arr) {
    context = context || window
    context.fn = this
    var result
    if(!arr){
        result = context.fn()
    }else{
        var arg = []
        for(var i = 0;i<arr.length;i++){
            arg.push(arr[i])
        }
        result = context.fn(...arg)
    }
    delete context.fn
    return result
}

参考文章

https://github.com/mqyqingfen...

Image placeholder
bollworm
未设置
  61人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Pandas数据处理三板斧——map、apply、applymap详解

微信公众号:「Python读财」如有问题或建议,请公众号留言在日常的数据处理中,经常会对一个DataFrame进行逐行、逐列和逐元素的操作,对应这些操作,Pandas中的map、apply和apply

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

Python可视化 | Seaborn5分钟入门(二)——barplot&countplot&pointplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

WebAssembly前瞻及用C/C++写HTML和Hanjst汉吉斯特

2019年12月16日,北京下了今冬第二场雪❄️,不大不小。年终岁尾,国际上几大软件及互联网公司(Google、Microsoft、Apple和Mozilla)拉上互联网标准化机构W3C发布了WebA

IDC发布:4Q18云IT基础设施收入低于传统IT基础设施收入

根据IDC全球云IT基础设施季度跟踪报告,在2018年第四季度(4Q18),包括公有和私有云在内的云IT基础设施产品(服务器、企业存储和以太网交换机)销售收入同比增长28.0%,达到168亿美元。20

Python可视化 | Seaborn5分钟入门(一)——kdeplot和distplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(三)——boxplot和violinplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

【Java 反射学习】Java 反射基础

知识点 类是用来描述对象的,而反射就可以理解为是用来描述类的。 类中的属性包括: Class类本身 Package类所在的包 Field类中的属性 Method类中的方法 Constructor类中的

零基础学习Swift中的数据科学

概述Swift正迅速成为数据科学中最强大、最有效的语言之一Swift与Python非常相似,所以你会发现2种语言的转换非常平滑我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数据科学

零基础的小白怎么学习数据分析?

微信公众号:「Python读财」如有问题或建议,请公众号留言作为一个从超级菜鸟阶段过来的人,也曾迷茫,也曾面对一大堆资料不知所措,从无到有踩过太多的坑,在这里分享一下我总结出来的数据分析学习路径,为了

React 基础_JSX

JSX简介 JSX是一种用于描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI。 JSX语法 基本语法 JSX的基本语法和XML语法相同,都是使用成对的标签构成一个树状结构的

MongoDB数据库因安全漏洞,导致Family Locator泄露二十多万名用户数据

摘要:本月第二次,未受保护的MongoDB数据库因大量安全漏洞而导致敏感信息泄露,受欢迎的家庭跟踪应用程序FamilyLocator已经暴露了超过238,000名用户的实时未加密位置数据。该应用程序非

shell基础应用

一丶什么是shell?Shell是在linux你忽然与用户之间的解释器程序,通常指的是bash,负责想内核翻译及传达用户/程序指令Shell的使用方法:1.交互式执行指令:人工干预,执行效率低.2.非

shell基础笔记

学习编程的方法:1.照抄程序,保证程序能正确运行2.删除所有注释,自己往上默写注释,如果注释能写清楚,就代表程序看懂了3.删除代码,留下注释,照着注释写代码

leveldb源代码分析系列1.2:skiplist实现

skiplist的实现介绍leveldb中的SkipList是一个模板类,其模板参数的类型分别是存储的Key类型和Comparator类型。虽然名字是Key类型,但其实存储了整个entry,只不过Co

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

《从PPTV网络视频,到PPIO区块链分布式存储》

摘要:2019年11月26日,同济创业谷与PPIOCodeTalks联合举办了《创新X-区块链与创新创业》区块链技术分享会,本期我们为读者带来主题分享--《从PPTV网络视频,到PPIO区块链分布式存

【PHP学习】PHP入门学习 之 常量

PHP常量是一个简单值的标识符(名字)。如同其名称所暗示的,在脚本执行期间该值不能改变(除了所谓的魔术常量,它们其实不是常量)。PHP常量默认为大小写敏感。传统上常量标识符总是大写的。 PHP常量名

学习 nodejs+mongodb+koa2 写接口(一) 环境布置

一.环境准备最近在学用Nodejs写后端接口,了解到koa2是Nodejs的一个框架。可以快速开发后端接口,同时也能更快熟悉Nodejs以下是所需的环境node  v7.6+,可以用nvm或者n安装指

学习 nodejs+mongodb+koa2 写接口(二) koa2教程入门

一.hellokoa安装koa2#初始化package.json npminit #安装koa2 npminstallkoahelloworld代码constKoa=require('koa') c

JSON.parse和JSON.stringify的巧用

JSON.parse和JSON.stringify是对json数据的转换,在js中使用的频率还是非常高的,比如localStorage,cookie中对复合型数据的存储,与服务器进行数据交互的格式转换

JSON.parse和JSON.stringify的巧用

JSON.stringify()是将一个JavaScript值(对象或者数组)转换为一个json字符串,如果指定了replacer是一个函数,则可以选择性地替换值,或者如果指定了replacer是一个

JS 直接打印功能实现代码

Jsweb打印方法汇总 1.插件打印,网上可以搜有付费和免费的打印插件可以用,一般来说免费的一般只支持ie浏览器,有的免费插件还有水印。需要安装插件到打印机所用电脑上。2.js直接打印,只支持IE浏览

css如何实现文字颜色渐变?3种实现方法

基础样式:.gradient-text{ text-align:left; text-indent:30px; line-height:50px; font-size:40px; font-

{