当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Javascript函数的call和apply用法介绍

Javascript函数的call和apply用法介绍

2018年04月11日  | 移动技术网IT编程  | 我要评论

1、使用说明：

ECMAScript规范中，所有函数都包含这两个方法，并且两个方法的使用基本一致，都是用于改变函数的作用域，即改变函数体内 this 指向。不同的是 call 方法的第二个参数可以接收任意个参数，以逗号分隔;而 apply 方法的第二个参数必须是一个数组或者类数组。

2、实例1 - 改变 this 指向

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <script type="text/javascript">  
        var name = "Java";  
        var obj = {name: "Javascript"};  
  
        function sayName() {  
            return this.name;  
        }  
        console.log(sayName.call(window));  // 输出"Java"，将this指向window  
        console.log(sayName.call(obj));     // 输出"Javascript"，将this指向obj  
  
        console.log(sayName.apply(window)); // 输出"Java"，将this指向window  
        console.log(sayName.apply(obj));    // 输出"Javascript"，将this指向obj  
  
    </script>  
</body>  
</html>

3、实例2 - 调用其他函数，传递参数

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <script type="text/javascript">  
          
        // 定义一个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  
  
    </script>  
</body>  
</html>

4、实例3 - 实现继承

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
</head>  
<body>  
    <script type="text/javascript">  
          
        // 父类 Person  
        function Person() {  
            this.sayName = function() {  
                return this.name;  
            }  
        }  
  
        // 子类 Chinese  
        function Chinese(name) {  
            // 借助 call 实现继承  
            Person.call(this);  
            this.name = name;  
        }  
  
        // 子类America  
        function America(name) {  
            // 借助 call 实现继承  
            Person.call(this);  
            this.name = name;  
        }  
  
        var chinese = new Chinese("你好");  
        //调用 父类方法  
        console.log(chinese.sayName());     // 输出 "你好"  
  
        var america = new America("Hello");  
        // 调用 父类方法  
        console.log(america.sayName());     // 输出 "Hello"  
  
    </script>  
</body>  
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网