JS中的this用法总结

    <script type="text/javascript">

    //this用法总结:

    // 当以函数调用时this是window
    // 当以方法的形式调用时,谁调用方法this就是谁
    // 当以构造函数的形式调用时,this就是新创建的那个对象


        //  用函数的方式调用时this指向的是window
        //  用方法调用this时执行的是调用方法的对象

        // this指向的是一个对象 这个对象称为函数执行的上下文对象
        // 根据函数调用方式不同,this指向不同的对象
        // function fun(a, b) {
        //     console.log(this.name);
        // }

        // fun(123, 456);//Window  Window是一个网页的全局对象


        // // 创建一个对象

        // var obj = {
        //     name: "孙悟空",
        //     sayname: fun

        // };
        // var obj2 = {
        //     name: "沙和尚",
        //     sayname: fun

        // };


        // console.log(obj.sayname == fun);//true

        // obj.sayname();//孙悟空

        // obj2.sayname();//沙和尚
        // // 根据函数调用方式不同,this指向不同的对象
        // // 谁调用函数this指向谁

        var name = "全局变量";

        function fun() {
            console.log(name);
        }


        var obj11 = {
            name: "孙悟空",
            sayname: fun

        };


        var obj22 = {
            name: "唐三",
            sayname: fun

        };

        obj22.sayname();//全局变量 因为找不到变量只好去全局变量var name="全局变量"

        function fun1() {
            console.log(this.name);
        }


        var obj12 = {
            name: "孙悟空",
            sayname: fun1

        };


        var obj23 = {
            name: "唐三",
            sayname: fun1

        };

        obj23.sayname();//孙悟空
        obj12.sayname();//唐三









    </script>

工厂类

 <script type="text/javascript">
        //使用工厂类创建对象
        // function createPerson() {
            
        //     var obj = new Object();

        //     obj.name = "孙悟空";
        //     obj.age = "18";
        //     obj.gender = "男";

        //     obj.sayname = function () {
        //         alert(this.name);
        //     }

        //     return obj;
        // }
        // var obj1 = createPerson();
        // var obj2 = createPerson();
        // var obj3 = createPerson();

        // console.log(obj1);//{name: "孙悟空", age: "18", gender: "男", sayname: ƒ}
        // console.log(obj2);//{name: "孙悟空", age: "18", gender: "男", sayname: ƒ}
        // console.log(obj3);//{name: "孙悟空", age: "18", gender: "男", sayname: ƒ}

        function createPerson(name, age, gender) {
            var obj = new Object();

            obj.name = name;
            obj.age = age;
            obj.gender = gender;

            obj.sayname = function () {
                console.log(this.name);
            }

            return obj;
        }
        var obj1 = createPerson("唐三", 16, "男");//{name: "唐三", age: 16, gender: "男", sayname: ƒ}
        var obj2 = createPerson("蜘蛛精", 18, "母");//{name: "蜘蛛精", age: 18, gender: "母", sayname: ƒ}
        var obj3 = createPerson("八戒", 20, "公");//{name: "八戒", age: 20, gender: "公", sayname: ƒ}
        console.log(obj1);
        console.log(obj2);
        console.log(obj3);

        obj1.sayname();//唐三
        obj2.sayname();//蜘蛛精
        obj3.sayname();//八戒



    </script>

构造函数

<script type="text/javascript">
        //  创建一个构造函数专门用来创建Person对象
        //  构造函数就是一个普通的函数,创建方法和普通函数没有区别习
        // 习惯性首字母大写


        // 构造函数执行流程:
        // 立刻创建一个新对象
        // 将新建对象设置为函数中的this
        // 逐行执行函数中的代码
        // 将新建的对象作为返回值返回

        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayname = function () {
                alert(this.name)
            }
        }

        function Dog(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayname = function () {
                alert(this.name)
            }
        }
        //之前工厂类需要new一个对象
        function createPerson(name, age, gender) {
            var obj = new Object();

            obj.name = name;
            obj.age = age;
            obj.gender = gender;

            obj.sayname = function () {
                console.log(this.name);
            }

            return obj;
        }




        // 使用同一个构造函数创建对象我们称为一类对象,也将一个构造函数称为一个类
        // 我们通过一个构造函数创建的对象也称为该类的实例

        var per1 = new Person("芜湖大司马", "28", "男童");//构造函数需要new关键字来调用
        console.log(per1);//有对象类型是Person /Person {name: "芜湖大司马", age: "28", gender: "男童", sayname: ƒ}
        per1.sayname();

        var dog1 = new Dog("炫狗", 18, "男酮");
        console.log(dog1);//类型是Dog     /Dog {name: "炫狗", age: 18, gender: "男酮", sayname: ƒ}
        dog1.sayname();

        var per = Person();//   普通函数调用不需要new关键字
        console.log(per);//undefined

    </script>