JS-面向对象-This的指向---简单的函数调用 / 作为对象的方法调用时 / 作为构造函数调用时-CSDN博客

本文链接：https://blog.csdn.net/qq_45802159/article/details/103246454

简单的函数调用


<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script>

        // 1. 普通的函数调用时
        function max () {
            this.x = 1;
            // this 指的是 global 对象，由于 global 对象是作为 window 对象的一部分实现的，因此 this 认为是 window 对象
            console.log(this)
        }
        max();

    </script>
</body>

</html>

作为对象的方法调用时


<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script>

        // 2. 作为对象的方法调用时
        var obj = {
            fullName: '张康',
            sayName: function() {
                // this 指的是 obj 对象
                console.log(this)
                return this.fullName;
            }
        };
        
        // 函数中的 this 指向的是函数的直接所有者。换句话来说，函数直接属于谁，函数中的 this 就指向谁。
        window.obj.sayName();

    </script>
</body>

</html>

作为构造函数调用时


<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script>

        // 3. 作为构造函数调用时
        function Dog(dogName, dogAge) {
            // this 指的是新创建的实例，接下来会被自动返回到函数外部
            console.log(this)
            this.name = dogName;
            this.age = dogAge;
        }

        // 调用构造函数
        var dog1 = new Dog('哈士奇', 3);
        var dog2 = new Dog('泰迪', 2);

        console.log(dog1, dog2)

    </script>
</body>

</html>