一、call(),apply()

1、作为函数对象(指函数方法名,不带括号)的方法,需要通过函数对象调用;当对函数调用这两个方法时都会调用函数执行。

<script>
// 这个函数中,foo为函数对象
function foo() {
console.log(this + "——" + this.a);
}
var a = "Hello World"; foo(); // [object Window]——Hello World
foo.call(); // [object Window]——Hello World
foo.apply(); // [object Window]——Hello World
</script>

2、调用call、apply可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this所指。

<script>
// 这个函数中,foo为函数对象
function foo() {
console.log(this + "——" + this.a);
}
var a = "Hello World"; var obj = {
a: "wonderful"
}
foo(); // [object Window]——Hello World
foo.call(obj); // [object Object]——wonderful
foo.apply(obj); // [object Object]——wonderful
</script>

// this对象打印后面还有内容时,会简写成[object Window]

<script>
var animal = {
type: "cat",
sayType: function() {
console.log(this.type);
}
}; var animal2 = {
type: "dog"
}; animal.sayType(); // cat
animal.sayType.call(animal2); // dog
animal.sayType.apply(animal2); // dog
</script>
 

这里延伸提下函数的上下文this对象
函数调用时,浏览器为我们传递两个隐含参数:函数上下文对象this、封装实参的对象arguments。
1)在函数中,this指的是全局对象window; foo()函数调用中,this为window。
2)以对象方法调用时,this指的是调用方法的对象; animal.sayType()函数调用中,this为animal。
3)使用call、apply调用时,this指的是call、apply的第一个参数;foo.call(obj)。
4)以构造函数的形式调用时,this指的是新创建的对象, 如下说明。
5)事件中,this指的是接收事件的元素,如下说明。

用于说明4)点
<script>
function Dog() {
this.type = "Animal";
this.sayType = function () {
console.log(this);
console.log(this + " belong to " + this.type);
}
}
var obj = new Dog();
obj.sayType();
// Dog {type: "Animal", sayType: ƒ}
// [object Object] belong to Animal
</script> 用于说明5)点
<button id="btn">Click</button>
<script>
document.getElementById("btn").addEventListener("click", properties);
function properties() {
console.log(this);
console.log(this.id);
}
properties(); // 因为默认全局对象为window,这个对象可以忽略不写,相当于window.properties() // 有些内容可能一开始就接触过了,但始终不能心领神会其中含义,直到有一天你坚持去了解时,醍醐灌顶的感觉
// 函数代表一种行为,要知道这个行为可以作什么需要有调用这个行为的事物。
// 比如汽车具有发动行为,启动发动这个行为车子就会动。
// 编程语言中,函数可以类比发动行为,调用函数的对象抽象类比成汽车对象。
</script>


call()和 apply()区别:
call()方法可以将实参之后依次传递;apply()方法需要将实参装到一个数组中统一传递。


二、arguments
arguments参数列表,实参列表(函数在调用时,隐含传递封装实参的类数组对象,注意是实参对象)。
arguments作为类数组对象,它可以通过索引来操作,可获取长度,在调用参数时,传递的实参都会保存在arguments中。
即使不定义形参也可以通过arguments来使用实参里某项实参。
arguments中有个属性callee,这个属性对应一个函数对象,就是当前正在执行的函数对象。



call()、apply()、arguments的更多相关文章

  1. 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  2. JS中call、apply、bind使用指南,带部分原理。

    为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...

  3. Javascript中call、apply、bind函数

    javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...

  4. 图解call、apply、bind的异同及各种实战应用演示

    一.图解call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观 ...

  5. JavaScript中call、apply、bind、slice的使用

    1.参考资料 http://www.cnblogs.com/coco1s/p/4833199.html   2.归结如下 apply . call .bind 三者都是用来改变函数的this对象的指向 ...

  6. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  7. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  8. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...

  9. 理解JS中的call、apply、bind方法(*****************************************************************)

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  10. 聊聊call、apply、bind的故事

    说到call.apply.bind,前端的胖友可是不陌生.以下就从几个方面分别聊聊它们. 是什么?(what?) 实际上它们真正的样子是这样的: Function.prototype.call(thi ...

随机推荐

  1. JVM组成结构以及各部分的功能

    Java虚拟机主要分为以下五个区: 一.方法区(METHOD AREA): 1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区里的常量池和对类型 ...

  2. Vue手动集成less预编译器

    less是一门css预处理语言,简单的说就是在css的基础上提升为可编程性的预编译器 需要在项目中安装 less ,less-loader 2个插件,语法为:npm i -D less less-lo ...

  3. 数仓建模—OneID

    今天是我在上海租房的小区被封的第三天,由于我的大意,没有屯吃的,外卖今天完全点不到了,中午的时候我找到了一包快过期的肉松饼,才补充了1000焦耳的能量.但是中午去做核酸的时候,我感觉走路有点不稳,我看 ...

  4. List集合工具类之"将list集合按"指定长度"进行切分Lists.partition和ListUtils.partition"

    将list集合按"指定长度"进行切分,返回新的List<List<类型>>集合,如下的:  方法1:List<List<Integer>& ...

  5. MySQL索引如何优化?二十条铁则

    索引的相信大家都听说过,但是真正会用的又有几人?平时工作中写SQL真的会考虑到这条SQL如何能够用上索引,如何能够提升执行效率?  前言 索引的相信大家都听说过,但是真正会用的又有几人?平时工作中写S ...

  6. git提交错误 git config --global user.email “you@example.com“ git config --global user.name “Your Name

    1 Commit failed - exit code 128 received, with output: '*** Please tell me who you are. 2 3 Run 4 5 ...

  7. 开源HTML5游戏引擎Kiwi.js 1.0正式发布

    Kiwi.js是由GameLab开发的一款全新的开源HTML5 JavaScript游戏引擎.在经过一年多的开发和测试之后,终于在日前正式发布了Kiwi.js 1.0版本. 其创始人Dan Milwa ...

  8. Canvas 与 SVG

    什么是SVG? 引用w3c的一段话就是: SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 ...

  9. 微信小程序开发:python+sanic 实现小程序登录注册

    开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + sanic + 微信小程序实现用户快速注册登录全栈方案. 微信小程 ...

  10. python-验证6174猜想

    [题目描述]1955年,卡普耶卡(D.R.Kaprekar)对4位数字进行了研究,发现一个规律:对任意各位数字不相同的4位数,使用各位数字能组成的最大数减去能组成的最小数,对得到的差重复这个操作,最终 ...