JavaScript之对象的定义和原型

亦凉 2021-05-03 05:50 544阅读 0赞

## 1、对象的定义： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>对象</title>
        <script type="text/javascript">
        //javaScript这种语言一直没有类的概念，但有构造函数 Es6的出现，才有class这个东西
        //多种形式 字面量定义 Object的构造函数 自定义构造函数 还有ES6的类
        //1.字面量定义
        var p={ 
            id:"E001",
            name:"张三",
            age:25,
            say:function(){ 
                alert(this.name);
            }
        };
        p.say();
    
        var p2={ 
            name:"李四",
            age:40,
            girs:["1","2","3"],
            wife:{ 
                 ame:"后公举",
                 age:45,
                 girs:["5","2","0"],
                 kill:function(){ 
                    alert("后公举，别生气啦!");
                 },
                 run:function(){ 
    
                 }
    
            }
        };
        p2.wife.kill();
    
        //2、Object构造器函数 Object相当于所有类的基类
        var p3=new Object();//p3就是对象的实例 Object相当于p3的类（p3的构造函数)
        console.log(p3);
        p3.constructor===Object;
        console.log(p3.constructor===Object);
        p3.name="p3";
        p3.say=function(){ 
            alert(this.name);
        }
        p3.say();
        p3["age"]=25;
        p3["say2"]=function(){ 
            alert(this.age);
        }
        p3.say2();
    
        //利用工厂模式创建对象
        function create(name,age,sex){ 
            var p3=new Object();
            p3.name=name;
            p3.age=age;
            p3.sex=sex;
            
            p3.print=function(){ 
                alert(this.sex);
            }
            return p3;
            }
        
            var p4=create("后公举",35,"男");
            p4.print();
    
            //3、自定义构造函数创造对象
        </script>
    </head>
    <body>
        
    </body>
    </html>

## 2、如何获得原型： ##

**（1）把公共的属性和行为放到原型中，每个实例都会继承原型，javascript的继承就是通过原型实现的。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]  
**（2）在JavaScript中，一切都是对象，函数本身也是对象，构造函数也是函数，所以构造函数肯定也是对象。构造函数实例化的实例也是对象。  
（3）如何区分呢？函数是函数对象，构造函数实例化的对象是普通对象。  
（4）普通对象的typeof返回的是function,普通对象typeof返回呢的是Object。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70 1]  
**![加粗样式][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70 2]**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70 3]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>对象2</title>
        <script type="text/javascript">
            //构造函数创建对象 构造函数就是一个函数 
           //只不过函数名字通常大写
           function Bird(name,type,color){ 
              this.name=name;
              this.type=type;
              this.color=color;
              this.fly=function(){ 
                 window.alert(this.name+"在飞");
              };
              this.cat=function(){ 
                  window.alert(this.type+"在吃");
              }
              this.kill=kill;
           }
           //攻击函数 全局性
           function kill(){ 
                  
                }
           var a=new Bird("H公举","鸟","blue");//a就是一个实例
           var b=new Bird("一只老鹰","鹰","黑色");
           a.fly();
           b.fly();
           //instanceof
           console.log(a instanceof Bird);//true
           console.log(b instanceof Bird);//true
           //a.fly==b.fly?
           console.log(a.fly==b.fly);//false 存在多份fly函数 如何做到内存中只有一份呢
           console.log(a.kill==b.kill);//true 虽然实现了只有一份，省了内存，但是会造成全局函数膨胀
    
           console.log(typeof Bird);//函数是函数对象，返回function
           console.log(typeof a);//构造函数实例化的对象时普通对象，返回Object
           console.log(typeof b);//构造函数实例化的对象时普通对象，返回Object
    
           //通过原型，添加行为或者属性 
           function Person(name,age){ 
                this.name=name;
                this.age=age;
           }
           //使用了默认的原型
    
           Person.prototype={ 
               sex:"男",
               email:"@hou"
           }
    
           Person.prototype.fly=function(){ 
               alert("我是人我在飞");
           };
           
           Person.prototype.speak=function(){ 
               alert(this.email);
           };
           
           var p=new Person("李四",24);
           p.fly();
           console.log("--------------------------");
           console.log(Person.prototype === p._proto_);//false?
           p.speak();
        </script>
    </head>
    <body>
        
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]: /images/20210502/29eccb203d304fa3a90e6fba769fab91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70 1]: /images/20210502/5279425dc0474b5e9d20dd7335fa02b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70 2]: /images/20210502/df41676835904b499bd23fa689c0b8ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70 3]: /images/20210502/dd11da815ceb4b38abe8aaf8a84977ba.png