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 相关文章推荐
JavaScript 注册事件代码
Jan 27 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
js/jquery获取文本框输入焦点的方法
Mar 04 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php变量作用域的深入解析
2013/06/03 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
js实现分割上传大文件
2016/03/09 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
ES6扩展运算符用法实例分析
2017/10/31 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
jQuery pjax 应用简单示例
2018/09/20 jQuery
jQuery实现消息弹出框效果
2019/12/10 jQuery
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Python自定义一个异常类的方法
2019/06/27 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python合并多个excel文件的示例
2020/09/23 Python
python中time tzset()函数实例用法
2021/02/18 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
经典c++面试题二
2015/08/14 面试题
服装行业创业计划书范文
2014/02/05 职场文书
大学生应聘求职信
2014/05/26 职场文书
大学团日活动总结书
2015/05/11 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
新学期开学寄语2016
2015/12/04 职场文书
python中使用redis用法详解
2022/12/24 Redis