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 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 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和ACCESS写聊天室(六)
2006/10/09 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP获取文件行数的方法
2015/06/10 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
vue实现文字加密功能
2019/09/27 Javascript
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python交互式图形编程实例(三)
2017/11/17 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
环保倡议书怎么写
2014/05/16 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
门市房租房协议书
2014/12/04 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2015年售票员工作总结
2015/04/29 职场文书
Python字符串的转义字符
2022/04/07 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python