zoukankan      html  css  js  c++  java
  • JS call和apply方法使用

    总是对call和apply方法使用存在迷惑,特此记录一下

    一句话理解这两个方法:

      call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作

    举个栗子:

      我们都知道在函数中有一个伪数组 arguments ,其结构像数组,但是没有数组的(join,slice)等方法,因此我们用call借用数组中的这些方法操作 arguments

        function fn(){
            console.log(Array.prototype.join.call(arguments,'-'));
        }
        fn('abc','bdc','fgv');

      输出:·abc-bdc-fgv·

    再举一个栗子:

      通过document.getElementsByTagName选择的dom 节点是一种类似array的array,它不能应用Array下的push,pop等方法

    var domNodes =  Array.prototype.slice.call(document.getElementsByTagName("*"));

    到此我们大概可以了解call和apply的使用场景了

    接下来具体介绍一下这两个方法

    在下面代码中,我们定义了猫和狗两个类,其各自有自己的属性(name、color),但是狗没有eat和say这两个方法,因此可以通过call调用猫 ,cat的say方法中this指向会指向dog

      function cat(obj){        
        this.color = obj.color;

        this.name = obj.name; } cat.prototype = { food : 'fish', say : function (){ console.log('喵~ , 我的名字叫'+this.name); }, eat : function(food1,food2){ console.log('我是'+this.name+',我吃'+ food1 + food2); } } var xiaobai = new cat({name:'xiaobai',color:'white'}); function dog(obj){ this.color = obj.color; this.name = obj.name; } dog.prototype = { food : 'bone' } var xiaohei = new dog({name:'xiaohei',color:'black'}); xiaobai.say.call(xiaohei); //这里调用猫的say方法,this指向 xiaohei
       喵~ , 我的名字叫xiaohei
    xiaobai.eat.apply(xiaohei,['骨头','肉']); //apply可以跟多个参数,以数组的形式
      我是xiaohei,我吃骨头肉

    引用网友的一段话,帮助记忆这两个方法

    猫吃鱼,狗吃肉,奥特曼打小怪兽。

    有天狗想吃鱼了

    猫.吃鱼.call(狗,鱼)

    狗就吃到鱼了

    猫成精了,想打怪兽

    奥特曼.打小怪兽.call(猫,小怪兽)

  • 相关阅读:
    C#网络编程之Http请求
    使用 pdf.js 在网页中加载 pdf 文件
    程序员转型技术管理,这几本书不能错过
    HTTPS小结 、TSL、SSL
    clipboard 在 vue 项目中,on 事件监听回调多次执行
    Vue 引入 .md 文件,解析markdown语法
    Vue cli4.0 代理配置
    npm publish 一直报错 404
    JSON 多层对象获取键值
    Tomcat8配置Https协议,Tomcat配置Https安全访问,Tomcat Https配置
  • 原文地址:https://www.cnblogs.com/xiaoliwang/p/9034318.html
Copyright © 2011-2022 走看看