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 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
Angular的事件和表单详解
Dec 26 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
laydate日历控件使用方法详解
Nov 20 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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 Ctemplate引擎开发相关内容
2012/03/03 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
详解javascript遍历方式
2015/11/11 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
js实现抽奖效果
2017/03/27 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
整理Python 常用string函数(收藏)
2016/05/30 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
房地产员工找工作的自我评价
2013/11/15 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
数学系毕业生求职信
2014/05/29 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
《比的意义》教学反思
2016/02/18 职场文书