JavaScript的第7天_javascript +7天-CSDN博客

本文链接：https://blog.csdn.net/qq_46426476/article/details/122135429

js中的this关键字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            解析器在调用函数每次都向函数内部传进一个隐含的参数，
                这个隐含的参数就是this，this指向的是一个对象，
                这个对象我们称为函数执行的上下文对象

                根据函数的调用方式不同，this会指向不同的对象

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

                        var obj1={
                                name:"孙悟空",
                                age:17,
                                sayName:fun1
                        };

                        var obj2={
                                name:"沙和尚",
                                age:17,
                                sayName:fun1
                        };

                        var name="全局的name属性";

                    1，以函数的方式调用时，this永远都是window
                         fun1();          //全局的name属性
                         上式等同于
                         window.fun1();   即也是调用window对象(全局属性)的name属性

                    2，以方法的形式调用时，this就是调用方法的那个对象
                        obj1.sayName();  //孙悟空 
                        obj2.sayName();  //沙和尚

        */
       function fun1() {
           console.log(this.name)
       }

       var obj1={
            name:"孙悟空",
            age:17,
            sayName:fun1
       };

       var obj2={
            name:"沙和尚",
            age:17,
            sayName:fun1
       };

       var name="全局的name属性";

       fun1();          //全局的name属性

       obj1.sayName();  //孙悟空 
       obj2.sayName();  //沙和尚
    </script>
</head>
<body>
    
</body>
</html>

使用工厂方法创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            使用工厂方法创建对象
                通过该方法可以大批量的创建对象
        */
       function creatObject(name,age,gender) {
           var obj={
               name:name,
               age:age,
               gender:gender,
               sayName:function(){
                    alert("这是一个属性内的函数");
               }
           };
           return obj;
       }

       var a=creatObject("张三",14,"男");
       var b=creatObject("李四",24,"男");
       //console.log(a);  //由函数创建的a对象的结构
       //console.log(b);  //由函数创建的b对象的结构
       console.log(a.sayName());   //网页中输出"这是一个属性内的函数"，控制台显示undefined
       console.log(b.sayName());   //网页中输出"这是一个属性内的函数"，控制台显示undefined
       
    </script>
</head>
<body>
    
</body>
</html>

构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            创建一个构造函数，专门用来创建Person对象的
                构造函数就是一个普通的函数，创建方式和普通函数没有区别，
                不同的是构造函数习惯上首字母大写

            构造函数和普通函数的区别就是调用方式的不同
            function Fun1(){
                console.log("这是一个函数");
            };

            普通函数就是直接调用，
            普通函数
            //    Fun1();          //这是一个函数


            而构造函数需要使用new关键字来调用
            // 构造函数
            new Fun1();  //这是一个函数

        */


       /*
            构造函数的执行流程：
                1，立刻创建一个新的对象
                2，将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
                3，逐行执行函数中的代码
                4，将新建的对象作为返回值返回

            
            使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类
                我们将通过一个构造函数创建的对象，称为是该类的实例，或者叫做该构造函数的实例

            this的情况:
                1,当以函数的形式调用时，this是window
                2，当以方法的形式调用时，谁调用方法，this就是谁
                3，当以构造函数的形式调用时，this就是新创建的那个对象
       */
      function Person(name,age,gender){
           this.name=name;
           this.age=age;
           this.gender=gender;
      }

      function Dog(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
      }

    //   调用person构造函数
    var a=new Person("孙悟空",17,"男");
    var b=new Dog("二哈",18,"女");
    console.log(a);   //构造函数a的函数结构
    console.log(b);   //构造函数b的函数结构
    

    /*
        使用instanceof可以检查一个对象是否是一个类的实例
            语法:
                对象 instanceof 构造函数
            如果是，则返回true，否则返回false
    */

    console.log(a instanceof Person);    //true
    console.log(a instanceof Dog);       //false

    /*
        所有的对象都是Object的后代，
            所以任何对象和Object做instanceof检查时都会返回true
    */
   console.log(a instanceof Object);   //true
   console.log(b instanceof Object);   //true
    </script>
</head>
<body>
    
</body>
</html>

原型对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            原型 prototype

             我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
                    这个属性对应着一个对象，这个对象就是我们所谓的原型对象
             如果函数作为普通函数调用prototype没有任何作用
            
             以后我们创建构造函数时，可以将这些对象共有的属性和方法，
             统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，
             也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法

        */
        function Fun1(){

        }
        // 向Fun1的原型中添加属性a
        Fun1.prototype.a="原型对象中a";
        // 向Fun1的原型中添加一个方法
        Fun1.prototype.sayName=function(){
            console.log("这是原型中的方法");
        };
        var a=new Fun1();
        var b=new Fun1();
        /*
            当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
            指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

            原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象
                我们可以将对象中共有的内容，统一设置到原型对象中
        */
       
        console.log(Fun1.prototype);   //构造函数的原型对象
        console.log(a.prototype);      //undefined
        console.log(a.__proto__);      //构造函数的原型对象


        //当我们访问对象的一个属性或者方法时，它会先在对象自身中寻找，如果有则直接使用，
        //如果没有则会去原型对象中寻找，如果找到则直接使用
        console.log(a.a);              //原型对象中的a
        a.sayName();                    //这是原型中的方法
    </script>
</head>
<body>
    
</body>
</html>

优化构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 当要创建100个构造函数的对象时，sayhello会创建100个出、执行一样功能且不一样的方法，
        // 很消耗内存
        // function fun1(name,age,gender){
        //     this.name=name;
        //     this.age=age;
        //     this.gender=gender;
        //     this.sayHello=function(){
        //         console.log("姓名是:"+this.name);
        //     }
        // }


        function fun1(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
        }
        // 向原型对象中添加方法，使得每个由fun1创建出来的构造函数（普通函数没用）,都能有这个方法
        fun1.prototype.sayHello=function(){
                console.log("姓名是:"+this.name);
        }
        var a=new fun1("孙悟空");
        var b=new fun1("猪八戒");
        var c=fun1("猴子")
        a.sayHello();         //姓名是:孙悟空
        b.sayHello();         //姓名是:猪八戒
        c.sayHello();         //Cannot read properties of undefined (reading 'sayHello')
    </script>
</head>
<body>
    
</body>
</html>