欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Javascript函数的call和apply用法介绍

程序员文章站 2024-01-18 16:47:58
1、使用说明： ECMAScript规范中，所有函数都包含这两个方法，并且两个方法的使用基本一致，都是用于改变函数的作用域，即改变函数体内 this 指向。不同的是 call 方...

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>

上一篇： 关于常用的HTTP状态码汇总

下一篇： 在Word2010文档中使用突出显示文本功能

推荐阅读