zoukankan      html  css  js  c++  java
  • JavaScript-apply、call、ind

    *******最终定义:

      call、apply、bind都是绑架“this”,逼迫其指向其它对象

    一、方法定义

    call方法: 
    语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
    定义:调用一个对象的一个方法,以另一个对象替换当前对象。 
    说明: 
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
    如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 

    apply方法: 
    语法:apply([thisObj[,argArray]]) 
    定义:应用某一对象的一个方法,用另一个对象替换当前对象。 
    说明: 
    如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 

    注意:总结就是,call方法和apply方法对this的指向进行操作

    二、

      call:在call传入参数的时候,需要与函数所接受的参数一一对应

      apply:在apply传入参数的时候,则以数组的方式传入,数组中的元素需要与函数所接受的参数一一对应

    ************************************

    function xiaoHong()
    {
      alert('小红');
    }
    function xiaoMing()
    {
      return "小明";
    }
    alert(xiaoMing());//小明
    xiaoHong.call(xiaoMing());//结果:小红
    xiaoMing.call(xiaoHong());//小红

    //call()用在函数上面

    ***************************************

    function xiaoHong()
    {
      alert('小红');
    }
    function xiaoMing()
    {
      return "小明";
    }
    // alert(xiaoMing());//小明
    // xiaoHong.call(xiaoMing());//结果:小红
    // xiaoMing.call(xiaoHong());//小红


    //call()用在函数上面


    var Dog=function()
    {
      this.name="汪星人";
      this.shout=function()
      {
        alert(this.name);
      }
    }
    var Cat=function()
    {
      this.name="猫星人";
      this.shout=function()
      {
        alert(this.name);
      }
    }
    var dog=new Dog();
    dog.shout();

    var cat=new Cat();
    cat.shout();

    ***************************************

    var xh={
      name:'小红',
      word:'web小白'
    };
    var xm={
      name:'小明',
      word:'web资深工程师'
    };
    var jx={
      name:'杰西',
      word:'web项目总监'
    };

    //读取:我的xxx,我的工作是xxxx
    console.log("我是"+xh.name+",我的工作是:"+xh.word); //我是小红,我的工作是:web小白
    console.log("我是"+xm.name+",我的工作是:"+xm.word); //我是小明,我的工作是:web资深工程师
    console.log("我是"+jx.name+",我的工作是:"+jx.word); //我是杰西,我的工作是:web项目总监

    //用call的方法
    //call调用一个对象的一个方法,以另一个对象替换当前对象。
    function myObj()
    {
      console.log("我是"+this.name+",我的工作是"+this.word);
    }
    myObj.call(xh); //我是小红,我的工作是:web小白
    myObj.call(xm); //我是小明,我的工作是:web资深工程师
    myObj.call(jx); //我是杰西,我的工作是:web项目总监

    //用apply的方法
    myObj.apply(xh); //我是小红,我的工作是:web小白
    myObj.apply(xm); //我是小明,我的工作是:web资深工程师
    myObj.apply(jx); //我是杰西,我的工作是:web项目总监

    ***************************************

    var xh={
      name:"小红",
      word:"小白"
    };
    var xm={
      name:"小明",
      word:"资深WEB工程师"
    };
    var jx={
      name:"杰西",
      word:"项目总监"
    };

    //用call()显示:我叫xxx,我是工作是xxx
    function obj()
    {
      console.log("我的名字是:"+this.name+",我的工作是:"+this.word);
    }
    obj.call(xh);
    obj.call(xm);
    obj.call(jx);
    console.log("call---------------------------------------------------------------------");


    //用call()显示:我叫xxx,我是工作是xxx,我的性别是xx,我的年龄是xxx
    function obj2(sex,age)
    {
      console.log("我的名字是:"+this.name+",我的工作是:"+this.word+",我的性别是"+sex+",我的年龄是"+age);
    }
    obj2.call(xh); //我的名字是:小红,我的工作是:小白,我的性别是undefined,我的年龄是undefined
    obj2.call(xm); //我的名字是:小明,我的工作是:资深WEB工程师,我的性别是undefined,我的年龄是undefined
    obj2.call(jx); //我的名字是:杰西,我的工作是:项目总监,我的性别是undefined,我的年龄是undefined
    console.log("call传参---------------------------------------------------------------------");
    obj2.call(xh,"男",21); //我的名字是:小红,我的工作是:小白,我的性别是男,我的年龄是21
    obj2.call(xm,"女",22); //我的名字是:小明,我的工作是:资深WEB工程师,我的性别是女,我的年龄是21
    obj2.call(jx,"男",21); //我的名字是:杰西,我的工作是:项目总监,我的性别是男,我的年龄是21
    console.log("apply传参---------------------------------------------------------------------");
    obj2.apply(xh,["男",21]); //我的名字是:小红,我的工作是:小白,我的性别是男,我的年龄是21
    obj2.apply(xm,["女",22]); //我的名字是:小明,我的工作是:资深WEB工程师,我的性别是女,我的年龄是21
    obj2.apply(jx,["男",21]); //我的名字是:杰西,我的工作是:项目总监,我的性别是男,我的年龄是21

    bind***********************************************

    var info=["W3C",'腾讯','淘宝','天猫','世界'];
    var it={
      info:['万里','李薇','手动','速度'],
      getinfo:function(){
        console.log(this.info.join(","));
      }
    }
    it.getinfo(); //万里,李薇,手动,速度

    var data=it.getinfo;
    data(); //W3C,腾讯,淘宝,天猫,世界

    it.getinfo().bind(it);   //this指向it  /万里,李薇,手动,速度

  • 相关阅读:
    设计模式 --建造者模式
    HIVE
    Sqoop Mysql导入Hive完整命令参数解析
    Centos7 安装CDH6.3.2 集群
    sqlalchemy 批量插入
    前后端分离
    后台管理模板
    Springboot
    汇编基础
    百万点数据矢量切片实时聚合展示
  • 原文地址:https://www.cnblogs.com/xiaoyangtian/p/7976572.html
Copyright © 2011-2022 走看看