面向对象与this指向

2019-10-20 本文已影响0人杰克_王_
<!DOCTYPE html>
<html lang="en">

<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>面向对象与this指向</title>
</head>

<body>
    <script>
        var obj = { name: "jieke" };
        var timeout = setTimeout(function () {
            obj = Object.assign(obj, { age: 20 });
            console.log(obj);
            console.log(this);
            clearTimeout(timeout);
        }, 2000);
        console.log(obj);
    </script>

    <script>
        var obj = {
            startActon() {
                // debugger;
                this.property = {
                    name: "jieke",
                    age: 20
                };

                this.callSetTimeout();
            },
            callSetTimeout() {
                // debugger;
                var timeout = 1000;

                // 箭头函数没有自己的作用域
                this.timeout = setTimeout(() => {
                    debugger;
                    console.log(this.property);
                }, timeout);

                // 使用bind函数传递this
                // this.timeout = setTimeout(function () {
                //     console.log(this.property);
                // }.bind(this), timeout);

                // 使用自定义变量传递this
                // var that = this;
                // this.timeout = setTimeout(function () {
                //     console.log(that.property);
                // }, timeout);
            },
            endAction() {
                // debugger;
                console.log(this.property);
                clearTimeout(this.timeout);
            }
        };

        obj.startActon();

        var interval = setInterval(() => {
            debugger;
            obj.endAction();
            clearInterval(interval);
        }, 2000);
    </script>

    <script>
        // 构造函数，约定首字母大写，普通函数首字母小写
        // 如果直接使用，相当于普通函数，this指向windows对象
        // 如果使用 new 创建一个新的对象，则this指向这个新创建的对象
        // 属性放在函数内部，方法放在原型上，new 时对象只会占用属性的空间，不会占用方法的空间
        function ConstructionFunc(obj) {
            var initObj = {
                name: "jieke",
                age: 20
            };
            this.property = Object.assign({}, initObj, obj);
        }

        ConstructionFunc.prototype = {
            startActon: function () {
                // debugger;
                this.callSetTimeout();
            },
            callSetTimeout: function () {
                // debugger;
                var timeout = 1000;

                // 箭头函数没有自己的作用域
                this.timeout = setTimeout(() => {
                    debugger;
                    console.log(this.property);
                }, timeout);

                // 使用bind函数传递this
                // this.timeout = setTimeout(function () {
                //     console.log(this.property);
                // }.bind(this), timeout);

                // 使用自定义变量传递this
                // var that = this;
                // this.timeout = setTimeout(function () {
                //     console.log(that.property);
                // }, timeout);
            },
            endAction: function () {
                // debugger;
                console.log(this.property);
                clearTimeout(this.timeout);
            }
        }

        var obj = new ConstructionFunc({ sex: "man" });
        obj.startActon();

        var interval = setInterval(() => {
            debugger;
            obj.endAction();
            clearInterval(interval);
        }, 2000);
    </script>
</body>

</html>
面向对象与this指向

猜你喜欢

热点阅读
