js中apply()和call()的区别与用法实例分析

本文实例讲述了js中apply()和call()的区别与用法。分享给大家供大家参考，具体如下：

每个函数都包括两个非继承而来的方法：apply()和call()。两者用途都是在特定的作用域中调用函数，等于重新设置了函数体内this对象的值。

两者区别仅在于接收参数方式不同，apply()第一个参数是调用apply的函数运行的作用域，的第二个参数可以是Array的实例(数组)，也可以是arguments对象，call()第一个参数是this的值没有变化，而其余参数都直接传递给函数(也就是逐个列举出来)。

如果要传入的是数组或arguments对象，apply会更方便。

可以看到apply()和call()可以传递参数。更有用的是，两者还可以扩充函数运行的作用域:

var obj = {color:'red'};
window.color = 'blue';
function getcolor(){
  console.log(this.color)
};
getcolor.apply(obj);    //red
getcolor.apply(window);  //blue
getcolor.apply(this);   //blue

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

一个重要的用法：

var values = [1,2,3,4,5,4,3,2,1];
var max = Math.max.apply(Math,values);
console.log(max);     //5

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

这个实际上是利用apply()接收数组，方便了传参。而apply的第一个参数改为null或者空字符串均可。

此外还有bind()方法会创建一个函数的实例，其this值指向传给bind()的值：

window.color = 'red';
var o = {color:'blue'};
function sayColor(){
 console.log(this.color)
};
var objSayColor = sayColor.bind(o);
objSayColor();       //blue

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

    最近学了点vuejs,把学的东西记录下来方便你我他. vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~) 1. v-for进行遍历 比如我这里想遍历videos里的所有元素,那么我输入 <div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>

  • 使用 js 简单的实现 bind、call 、aplly代码实例

    这篇文章主要介绍了使用 js 简单的实现 bind.call .aplly代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Function.prototype._call = function(obj,...arg){ var me = this; var k = Symbol("test"); //生成唯一的 key obj[k] = me; var result = obj[k](...arg); delete obj[k

  • 详解JS中的this、apply、call、bind(经典面试题)

    这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象.记住这句话

  • 关于vue.js v-bind 的一些理解和思考

    一.v-bind 初探 它是一个 vue 指令,用于绑定 html 属性,如下: <div id="app"> <p v-bind:title="title">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div> ...... var vm = new Vue({ el: '#app', data: { title: 'title content' } }); 这里的 html 最后会渲

  • js中apply()和call()的区别与用法实例分析

    js中apply()和call()的区别与用法实例分析

    本文实例讲述了js中apply()和call()的区别与用法.分享给大家供大家参考,具体如下: 每个函数都包括两个非继承而来的方法:apply()和call().两者用途都是在特定的作用域中调用函数,等于重新设置了函数体内this对象的值. 两者区别仅在于接收参数方式不同,apply()第一个参数是调用apply的函数运行的作用域,的第二个参数可以是Array的实例(数组),也可以是arguments对象,call()第一个参数是this的值没有变化,而其余参数都直接传递给函数(也就是逐个列举出

  • JavaScript中callee和caller的区别与用法实例分析

    JavaScript中callee和caller的区别与用法实例分析

    本文实例讲述了JavaScript中callee和caller的区别与用法.分享给大家供大家参考,具体如下: 1.callee 在函数的内部,有两个特殊的对象:arguments和this.其中arguments是一个类似数组的对象,包含着传入函数的所有参数. 虽然arguments的主要用途是保存函数参数,但这个对象有一个属性--callee,该属性是一个指针,指向拥有这个arguments对象的函数 所以callee的作用就是来指向当前对象 看一个阶层函数的例子就会明白他的用途了: /* *

  • node.js中module模块的功能理解与用法实例分析

    本文实例讲述了node.js中module模块的功能理解与用法.分享给大家供大家参考,具体如下: node.js中使用CommonJS规范实现模块功能,一个单独的文件就是一个单独的模块.通过require方法实现模块间的依赖管理. 通过require加载模块,是同步操作. 加载流程如下: 1.找到需要加载的模块文件. 2.判断是否缓存过,如果没有,则读取模块文件的内容. 3.把读取到的内容,封装在一个函数里运行. (function (exports, require, module, __fi

  • JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析

    本文实例讲述了JS中类的静态方法,静态变量,实例方法,实例变量区别与用法.分享给大家供大家参考,具体如下: 1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 BaseClass.add = function() { console.log("BaseClass add()方法被调用"); }; // 类方法(类的静态函数)直接调用 // 类名.类方法名 BaseClass.add(); //BaseCl

  • Yii Framework框架中事件和行为的区别及应用实例分析

    本文实例讲述了Yii Framework框架中事件和行为的区别及应用.分享给大家供大家参考,具体如下: 个人觉得,在 Yii 里面,最难以明白的就是事件(Event)和行为(behavior)了.这不仅仅是因为它们的概念 比较难明,关键是它们的应用场景比较难明,不知道什么时候应该使用事件和行为来开发. 关于 Yii 的事件和行为的描述,可参考 http://www.yiiframework.com/doc/api/1.1/CComponent 本文参考的文章: http://www.larryu

  • js中的事件捕捉模型与冒泡模型实例分析

    本文实例讲述了js中的事件捕捉模型与冒泡模型.分享给大家供大家参考. 具体实现方法如下: 实例1: 复制代码 代码如下: <html> <head> <script type="text/javascript">  window.onload = function(){   document.getElementById('par').addEventListener('click',function() {alert('par');},true);

  • JS中自定义事件的使用与触发操作实例分析

    本文实例讲述了JS中自定义事件的使用与触发操作.分享给大家供大家参考,具体如下: 1. 事件的创建 JS中,最简单的创建事件方法,是使用Event构造器: var myEvent = new Event('event_name'); 但是为了能够传递数据,就需要使用 CustomEvent 构造器: var myEvent = new CustomEvent('event_name', { detail:{ // 将需要传递的数据写在detail中,以便在EventListener中获取 //

  • python中sort()和sorted()的区别及用法实例

    python中sort()和sorted()的区别及用法实例

    目录 一. 二. python中输入字符串转列表的注意问题 总结 本文主要讲sort与sorted的主要区别,以便正确使用 一. sort()只能用于列表:sorted()可以用于所有可迭代对象: 比如: str_a = "blue" print(sorted(str_a)) >>>['b', 'e', 'l', 'u'] 二. sort()对列表排序是进行原处排序,并不会返回新的列表: sorted()排序后会返回一个新的列表: 比如: 对于sort()来说: li

  • js构造函数constructor和原型prototype原理与用法实例分析

    本文实例讲述了js构造函数constructor和原型prototype原理与用法.分享给大家供大家参考,具体如下: 所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型) 所有函数拥有prototype属性(显式原型)(仅限函数) 原型对象:拥有prototype属性的对象,在定义函数时就被创建 __proto__, prototype和constructor 下面这三个属性的定义非常重要,始终贯穿在原型中. prototype:此属性只有构造函数才有,它指向的是当前构造函数

  • Node.js API详解之 tty功能与用法实例分析

    本文实例讲述了Node.js API详解之 tty功能与用法.分享给大家供大家参考,具体如下: tty 可以理解为终端的意思.tty 模块提供终端相关的接口,用来获取终端的行数列数等. 通过 const tty = require('tty'); 的方式引用 tty 模块 process.stdout.isTTY 说明: 此属性位于 process 模块,用来判断 Node.js 是否运行在一个 TTY 环境中 demo: console.log(process.stdout.isTTY) //

随机推荐