资讯专栏INFORMATION COLUMN

javascript对象不完全探索记录02:疯狂打call!给谁打call?打什么call?

Shimmer / 3012人阅读

摘要:注意该方法的作用和方法类似,只有一个区别,就是方法接受的是若干个参数的列表,而方法接受的是一个包含多个参数的数组。指定的参数列表。返回值返回值是你调用的方法的返回值,若该方法没有返回值,则返回。

温馨提示:作者的爬坑记录,对你等大神完全没有价值,别在我这浪费生命
温馨提示-续:打call原本是属于我们偶像宅文化中的专业名词,指的是饭们在看live时在台下配合爱豆演出的节奏喊口号,举例:“超绝可爱~TJY!!!”现在被各种滥用,我很蛋疼

在javascript中有两个常被提起的神奇函数,传说中的call()apply()先看看文档中的定义
JavaScript标准库 - Function.prototype.call()
JavaScript标准库 - Function.prototype.apply()

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
注意:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。

从上面段话,我get到两点:1.这不是人话 2.貌似整明白call()就约等于整明白apply()
那我就一条一条攻略吧

call谁?给谁打call?
语法
fun.call(thisArg, arg1, arg2, ...)

参数
thisArg:
在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, ...:
指定的参数列表。

返回值
返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined。

参考文档中的说明,我们可以这样理解,call()的作用实际上就是在改变函数运行的this结合call的词面意思来理解,就是喊来thisArg来作为funthis,直白点可以理解为,老王有洗衣服的这个方法,他给老张打电话让他来洗衣服,老张本身是(maybe)不会洗衣服的,但是因为这通电话他就要去洗了。

这样就好理解了,call()的两个(类)参数,第一个是要执行函数/洗衣服的this(对象)/老张,从第二个开始是这个函数的参数/要洗哪些衣服,而返回值就是这个方法本身的返回值/凉到阳台

再往简单的理解一下,call()的执行,其实就是在执行fun本身,只不过改变了执行这个函数的对象(this)

怎么call?

弄明白(maybe)call()的定义之后,脑中又浮现出了那个阴魂不散的题目

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    return function(){
      return this.name;
    };
  }
};
alert(object.getNameFunc()());//The Window

详情在我的另一片文章javascript对象不完全探索记录01:this! which?- lskrat中
这题让人懵逼的原因,就是这里面的this到底是which,出现“The Window”的原因说到底是因为执行object.getNameFunc()的是Window对象

所以为了能够得到期待的结果,是不是可以通过call()喊来object自己来执行呢,这就试试!

alert(object.getNameFunc().call(object));//My Object

真是效果拔群到想为call()打call!如此显著的疗效,都能用在哪呢?

打什么call?

我就来试着总结一下call()都有什么用处吧//本章节陆续补充

1.防止懵逼,指定this
这条的来源,看过上文就都知道了,对this目标懵逼的同学们,可以用call()来直接指定this,就让来执行!
举例:见上文

2.实现继承
继承,作为面向对象语言的基础特性,在javascript中有很多的实现方式,其中一种就是用call()

function Food(name, price) {
    this.name = name,
    this.price = price,
    this.getPrice = function() {
        console.log("吃一份" + this.name + "需要" + this.price + "块钱!贫穷使的我保持身材")
    }
}

function RouJiaMo() {
    Food.call(this, "肉夹馍", 5);
}

var rouJiaMo = new RouJiaMo()
rouJiaMo.getPrice();//吃一份肉夹馍需要5块钱!贫穷使得我保持身材

在创建实例rouJiaMo时,将Food()中的this换成了RouJiaMo,这也就在使得rouJiaMo不但可以拥有和Food中一样的内部变量并赋值,并且可以调用其内部函数,从而形成了继承

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

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

相关文章

  • 前端 call

    摘要:兼容,简单的前端框架半成品。数据查出来抛到前端觉得没有一个好看的页面展示不得劲。结果一路跑偏到前端,一入前端深似海。按趋势来说,前后端分离必然还是需要各自拥有自己的服务器。 RAW = React(Router) + Ant design + Webpack GITHUB raw-ie8兼容IE8,简单的前端框架半成品。 · 20170826 是的,最近在捣鼓SpringBoot。数据...

    eechen 评论0 收藏0
  • 记录一下自己的春招,唯品会、360、京东offer已收、腾讯offer_call已达!!!

    摘要:春招结果五月份了,春招已经接近尾声,因为到了周五晚上刚好有空,所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底,截止今天,已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。 春招结果 五月份了,春招已经接近尾声,因为到了周五晚上刚好有空,所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底,截止今天,已经斩获唯品...

    freewolf 评论0 收藏1
  • 深入理解JavaScript类数组

    摘要:但是,我们可以借用类数组方法不难看出,此时的在调用数组原型方法时,返回值已经转化成数组了。很多时候,深入看看源代码也会让你对这个理解的更透彻。的前端乐园原文链接深入理解类数组 起因 写这篇博客的起因,是我在知乎上回答一个问题时,说自己在学前端时把《JavaScript高级程序设计》看了好几遍。于是在评论区中,出现了如下的对话:showImg(https://segmentfault.c...

    Towers 评论0 收藏0
  • 「干货」细说 call、apply 以及 bind 的区别和用法

    摘要:的调用者,将会指向这个对象。此外,还可以扩展自己的其他方法。的使用最后来说说。不同的是,方法的返回值是函数,并且需要稍后调用,才会执行。而和则是立即调用。总结和的主要作用,是改变对象的执行上下文,并且是立即执行的。 前言 上一篇文章 《「前端面试题系列4」this 的原理以及用法》 中,提到了 call 和 apply。 它们最主要的作用,是改变 this 的指向。在平时的工作中,除了...

    GraphQuery 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<