JavaScript之对象的定义和原型

最新推荐文章于 2023-04-22 15:13:16 发布

码说芯语

最新推荐文章于 2023-04-22 15:13:16 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/YYBDESHIJIE/article/details/106180399

版权

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的继承就是通过原型实现的。
在这里插入图片描述
（2）在JavaScript中，一切都是对象，函数本身也是对象，构造函数也是函数，所以构造函数肯定也是对象。构造函数实例化的实例也是对象。
（3）如何区分呢？函数是函数对象，构造函数实例化的对象是普通对象。
（4）普通对象的typeof返回的是function,普通对象typeof返回呢的是Object。

在这里插入图片描述

<!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>

码说芯语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之对象的定义和原型

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">
复制链接

扫一扫