call 和 apply 用法

時間 2019-11-30

標籤 apply 用法简体版

原文原文鏈接

ECMAScript規範中，全部函數都包含這兩個方法，而且兩個方法的使用基本一致，都是用於改變函數的做用域，即改變函數體內 this 指向。不一樣的是 call 方法的第二個參數能夠接收任意個參數，以逗號分隔；而 apply 方法的第二個參數必須是一個數組或者類數組。javascript

一、改變 this 指向html

<!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>

二、調用函數java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        
        function add(x, y) {
            return x + y;
        }

        function myAddCall(x, y) {
            return add.call(this, x, y);
        }

        function myAddApply(x, y) {
            return add.apply(this, [x, y]);
        }

        console.log(myAddCall(10, 20));    // 輸出結果30
      
        console.log(myAddApply(20, 20));  // 輸出結果40

    </script>
</body>
</html>

三、實現繼承數組

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。