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 相关文章推荐
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 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
PHP 身份证号验证函数
2009/05/07 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python引用计数操作示例
2018/08/23 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python with语句的原理与用法详解
2020/03/30 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
王老吉广告词
2014/03/20 职场文书
民生工作实施方案
2014/05/31 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
销售人员求职信
2014/07/22 职场文书
安全月宣传标语
2014/10/07 职场文书
买卖合同协议书范本
2014/10/18 职场文书
超市工作总结范文2014
2014/12/19 职场文书
中学总务处工作总结
2015/08/12 职场文书
高中运动会广播稿
2015/08/19 职场文书
教师外出学习心得体会
2016/01/18 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript