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 相关文章推荐
网上抓的一个特效
May 11 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 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学习教程之第2天
2008/06/15 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
详解vue的数据binding绑定原理
2017/04/12 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
出纳员岗位职责
2014/03/13 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
出生公证书样本
2014/04/04 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
导游词之河北野三坡
2019/12/11 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP