js中call()和apply()改变指针问题的讲解


Posted in Javascript onJanuary 17, 2019

1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。(天生的)

2. 相同点:这两个方法的作用是一样的。

都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。

一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。

call有两个妙用:

  •           1: 继承。
  •           2: 修改函数运行时的this指针。

js中call()和apply()改变指针问题的讲解

js中call()和apply()改变指针问题的讲解

区别:call和apply的区别在于call的第二个参数可以是任意类型,而apply的第二个参数必须是数组或者arguments

<script>
  //一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。
  /*
  call方法:
  语法:call(thisObj,arg1,arg2,……,argN)
  定义:调用一个对象的一个方法,以另一个对象替换当前对象
  参数
    thisObj;可选项,将被用作当前对象的对象
    arg1,arg2,……,argN;可选项,将被传递方法参数序列
  说明
    call方法可以用来代替另一个对象调用一个方法。call方法可将一个函数的对象上下文从初始的上下文改变为有thisObj指定的新对象。
  
  如果没有提供thisObj参数,那么Global对象被用作thisObj
  */
  /*
  apply方法:
  语法:apply(thisObj,[arg1,arg2,……,argN])
  定义:应用某一个对象的一个方法,用另一个对象替换当前对象
  */
  //区别:call和apply的区别在于call的第二个参数可以是任意类型,而apply的第二个参数必须是数组或者arguments
  //1.
  function add(a,b) {
    console.log(a+b);
  }
  function sub(a,b) {
    console.log(a-b);
  }
  add.call(sub,3,1);//用add来替换sub,add.call(sub,3,1)==add(3,1),结果是console.log(4);
  //2.
  function Animal(){
    this.name="Animal";
    this.showName=function(){
      alert(this.name);
    }
  }
  function Cat(){
    this.name="Cat";
  }
  var animal=new Animal();
  var cat=new Cat();
  animal.showName.call(cat);
  // 通过call或者apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用。结果为alert("Cat");
  //3.
  function Animal(name){
    this.name=name;
    this.showName=function(){
    alert(this.name);
    }
  }
  function Cat(name){
    Animal.call(this,name);
  }
  var cat=new Cat("Black Cat");
  cat.showName();
  //Animal.call(this)的意思是使用Animal对象代替this对象,那么Cat中就有了Animal的所有方法和属性了,Cat对象就能直接调用Animal的方法和属性了。
  //4.
  function Class10(){
    this.showSub=function(a,b){
      alert(a-b);
    }
  }
  function Class11(){
    this.showAdd=function(a,b){
      alert(a+b);
    }
  }
  function Class2(){
    Class10.call(this);
    Class11.call(this);
  }
  //使用两个call就实现多继承了。
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
angular实现form验证实例代码
Jan 17 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 #Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 #Javascript
vue中$nextTick的用法讲解
Jan 17 #Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 #Javascript
js中Array对象的常用遍历方法详解
Jan 17 #Javascript
vuex如何重置所有state(可定制)
Jan 17 #Javascript
node app 打包工具pkg的具体使用
Jan 17 #Javascript
You might like
ThinkPHP php 框架学习笔记
2009/10/30 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python Logging 日志记录入门学习
2018/06/02 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
通过cmd进入python的步骤
2020/06/16 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
竞选部门副经理的自荐书范文
2014/02/11 职场文书
保护环境倡议书300字
2014/05/19 职场文书
通信工程专业求职信
2014/06/04 职场文书
入党转正申请报告
2015/05/15 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
微信小程序调用python模型
2022/04/21 Python