js中apply与call简单用法详解


Posted in Javascript onNovember 06, 2017

你可以直接看例子,也可以先读一下介绍:

call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.
从上面可以得出 call, apply 是给方法使用的,为了改变调用该方法的 this指针

简单例子:

call

function A() {
  this.getName = function (xx) {
    return xx;
  }
}

function B() {

}

var a = new A();
console.log( a.getName('i am A') ); //i am A

var b = new B() ;
console.log( a.getName.call(b,'i am B') ); // i am B

B 函数中没有 任何方法 , A 函数有个 getName() 方法 ,a.getName() 自然成立 ,但 B 也要使用 getName() 的方法怎么办呢 ? 那就用 call(this,'参数') !!

可以 再理解一下这句话 -- 我们可以借助call或apply调用其它对象的方法来操作,call和apply是为了动态改变this而出现的 ,本来 a.getName() 的 this 指向 a, call 动态的 把 this 指向了 b ,变成了 b.getName()

apply

apply 与 call 只是参数的使用不同而已

function A() {
  this.sun = function (a ,b) {
    return a+b;
  }
}

function B() {

}

var a = new A();
console.log( a.sun(1,2) ); //3

var b = new B() ;
console.log( a.sun.call(b,2,2) ); // 4

console.log( a.sun.apply(b,[3, 3]) ); //6

call和apply一般使用情况

用的比较多的,通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

这样domNodes就可以应用Array下的所有方法了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
解析原生JS getComputedStyle
May 25 Javascript
js实现简单数字变动效果
Nov 06 #Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
Node.js实现发送邮件功能
Nov 06 #Javascript
快速搭建React的环境步骤详解
Nov 06 #Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 #Javascript
two.js之实现动画效果示例
Nov 06 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
脚本收藏iframe
2006/07/21 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
Python群发邮件实例代码
2014/01/03 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
留学自荐信写作方法
2014/01/27 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
开工典礼策划方案
2014/05/23 职场文书
服务理念标语
2014/06/18 职场文书
世博会口号
2014/06/20 职场文书
神农溪导游词
2015/02/11 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
歼十出击观后感
2015/06/11 职场文书
2016情人节宣传语
2015/07/14 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS