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 Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
js+html5实现的自由落体运动效果代码
Jan 28 Javascript
jQuery中的select操作详解
Nov 29 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
jquery编写日期选择器
Mar 16 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
详解python tkinter模块安装过程
2020/01/06 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python3开发环境搭建详细教程
2020/06/18 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Python 实现简单的客户端认证
2020/07/29 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
公司开业庆典主持词
2014/03/21 职场文书
平安工地建设方案
2014/05/06 职场文书
村庄环境整治方案
2014/05/15 职场文书
主持人开幕词
2015/01/29 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
golang连接MySQl使用sqlx库
2022/04/14 Golang