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两行代码按指定格式输出日期时间
Oct 21 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
详解Vue之计算属性
Jun 20 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弹出对话框实现重定向代码
2014/01/23 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php数组遍历类与用法示例
2019/05/24 PHP
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
JS实现的自定义map方法示例
2019/05/17 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
前端性能优化建议
2020/09/17 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python绘制封闭多边形教程
2020/02/18 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
IBatis持久层技术
2016/07/18 面试题
医院反腐倡廉演讲稿
2014/09/16 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书