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 Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Vue2.0实现购物车功能
Jun 05 Javascript
node.js通过url读取文件
Oct 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
给多个地址发邮件的类
2006/10/09 PHP
php 购物车完整实现代码
2014/06/05 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
JavaScript之编码规范 推荐
2012/05/23 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
使用python求解二次规划的问题
2020/02/29 Python
python中列表的含义及用法
2020/05/26 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
婚礼答谢词
2015/01/04 职场文书
门卫管理制度范本
2015/08/05 职场文书
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Python闭包的定义和使用方法
2022/04/11 Python