zoukankan      html  css  js  c++  java
  • 夺命雷公狗---javascript NO:32 Call/Apply方法

    行内绑定中this指向:全局window对象

    动态绑定中this指向:当前要操作的dom对象

    构造器中的this指向:谁实例化构造器那么其内部的this就指向谁

    1、为什么需要Call与Apply方法

    问题:我们可以不可以手工改变函数内部的this指向?答:可以,使用Call或Apply方法

    2、如何定义Call与Apply方法

    call([thisObj[,arg1[,arg2[,argN]]]])

    参数说明:

    函数.call(thisObj,arg1,arg2,arg3…)

    thisObj :要指向的Obj对象

    arg1,arg2,arg3 :要传递的参数

    apply([thisObj[,argArray]])

    参数说明:

    thisObj :要指向的Obj对象

    argArray :要传递的参数,要求格式为数组

    Call与Apply方法区别?

    在功能上,两者效果完全一致,都是用于改变函数内部的this指向

    在语法上,两者语法略有不同

    3、为对象添加一个speak成员方法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=’utf-8′>
    <title></title>
    </head>
    <body>
    <script>
    //定义一个公用的说话方法
    function speak(){
    alert(this.name+this.age);
    }
    function person(){}
    //通过person构造器创建对象
    var p1 = new person();
    p1.name = ‘zhangsan';
    p1.age = ’22′;
    //通过call方法调用speak方法
    speak.call(p1);
    var p2 = new person();
    p2.name = ‘lisi';
    p2.age =55′;
    //通过apply方法调用speak说话方法
    speak.apply(p2);
    </script>
    </body>
    </html>

    4、call与apply方法执行流程

    1)改变函数内部的this指向

    2)调用函数

    5、实现为speak方法传参

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=’utf-8′>
    <title></title>
    </head>
    <body>
    <script>
    //定义一个公用的说话方法
    function speak(email,address){
    alert(this.name+this.age+email+address);
    }
    function person(){}
    //通过person构造器创建对象
    var p1 = new person();
    p1.name = ‘zhangsan';
    p1.age = ’22′;
    //通过call方法调用speak方法
    speak.call(p1,’123.@.163.com’,’广东省广州市’);
    var p2 = new person();
    p2.name = ‘lisi';
    p2.age =55′;
    //通过apply方法调用speak说话方法
    speak.apply(p2,[‘5566@qq.com’,’广东省深圳市’]);
    </script>
    </body>
    </html>

    6、案例:同时改变文字大小与颜色特效

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=’utf-8′>
    <title></title>
    <script>
    function fn1(){
    this.style.color = ‘red';
    }
    function fn2(){
    this.style.fontSize = ’30px';
    }
    window.onload = function(){
    document.getElementById(‘result’).onclick = function(){
    fn1.call(this);
    fn2.apply(this);
    }
    }
    </script>
    </head>
    <body>
    <div id=’result’>call与apply方法主要功能是改变函数内部的this指向</div>
    </body>
    </html>
  • 相关阅读:
    ionic serve 报【ionic-app-scripts' 不是内部或外部命令 】问题解
    Angular4.x+Ionic3 踩坑之路之打包时出现JAVASCRIPT HEAP OUT OF MEMORY的几种解决办法
    webpack打包---报错内存溢出javaScript heap out of memory
    IDEA版本控制工具VCS中使用Git,以及快捷键总结(不使用命令)
    详解Intellij IDEA中.properties文件中文显示乱码问题的解决
    PostgreSQL判断一个表是否存在
    关于Hadoop结合RDBMS应用的一些思考
    hadoop的hdfs文件操作实现上传文件到hdfs
    用hdfs存储海量的视频数据的设计思路
    hbase+hive应用场景
  • 原文地址:https://www.cnblogs.com/leigood/p/5032044.html
Copyright © 2011-2022 走看看