zoukankan      html  css  js  c++  java
  • Javascript中的apply与call

    一丶定义

          每个函数都包含两个非继承而来的方法:apply()和call()。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。

     1.apply()方法

          apply()接手两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以使Array的实例也可以是arguments对象。

    说明:
      如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 
      如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

    2.call()方法

    call()与apply()方法的作用相同,区别仅在于接收参数的方式不同。call()方法传递的参数必须逐个列举出来。

    说明:

          call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
      如果没有提供 thisObj 参数,那么 Global 对象被用作thisObj。说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

    二丶用法

    1.调用函数,传递参数

      //定义一个add 方法
        function add(x, y) {
            return x + y;
        }
    
        //用call 来调用 add 方法
        function myAddCall(x, y) {
            //调用 add 方法 的 call 方法
            return add.call(this, x, y);
        }
    
        //apply 来调用 add 方法
        function myAddApply(x, y) {
            //调用 add 方法 的 applly 方法
            return add.apply(this, [x, y]);
        }
    
        console.log(myAddCall(10, 20));    //输出结果30
      
        console.log(myAddApply(20, 20));  //输出结果40

    2.改变函数作用域

      var name = '小白';
    
        var obj = {name:'小红'};
    
        function sayName() {
            return this.name;
        }
    
        console.log(sayName.call(this));    //输出小白
    
        console.log(sayName. call(obj));    //输入小红

    3.高级用法,实现 js 继承

     //父类 Person
        function Person() {
            this.sayName = function() {
                return this.name;
            }
        }
    
        //子类 Chinese
        function Chinese(name) {
            //借助 call 实现继承
            Person.call(this);
            this.name = name;
    
            this.ch = function() {
                alert('我是中国人');
            }
        }
    
        //子类 America
        function America(name) {
            //借助 call 实现继承
            Person.call(this);
            this.name = name;
    
            this.am = function() {
                alert('我是美国人');
            }
        }
    
    
        //测试
        var chinese = new Chinese('成龙');
        //调用 父类方法
        console.log(chinese.sayName());   //输出 成龙
    
        var america = new America('America');
        //调用 父类方法
        console.log(america.sayName());   //输出 America

    三丶好处

    call() 和 apply() 最大的好处:方便我们解耦,对象不需要和方法有任何的耦合性,能使我们写出更好的面相对象程序。
    大家如果看一些 js 框架底层的话会看到好多地方都有大量用到。

          

  • 相关阅读:
    在IE和Firfox获取keycode
    using global variable in android extends application
    using Broadcast Receivers to listen outgoing call in android note
    help me!virtual keyboard issue
    using iscroll.js and iscroll jquery plugin in android webview to scroll div and ajax load data.
    javascript:jquery.history.js使用方法
    【CSS核心概念】弹性盒子布局
    【Canvas学习笔记】基础篇(二)
    【JS核心概念】数据类型以及判断方法
    【问题记录】ElementUI上传组件使用beforeupload钩子校验失败时的问题处理
  • 原文地址:https://www.cnblogs.com/zhus/p/6529568.html
Copyright © 2011-2022 走看看