原型构造函数三个案例

油、东西

于 2022-08-09 11:05:05 发布

阅读量194

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/ZZY192921533/article/details/126243392

版权

第一个案例的要求 /输入矩形的长,宽输出面积

<!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>
</head>
<body>
    <script>
        // 输入矩形的长,宽输出面积
        function Rect(width,height){
            this.width=width
            this.height=height
        }
        // 两个不同的对象调用同一个方法就给他挂在原型上
        Rect.prototype.showInfo=function(){
            console.log("面积为:"+this.width*this.height)
        }
        // new两个对象
        var r1=new Rect(10,10)
        var r2=new Rect(20,20)
        // 调用方法
        r1.showInfo()
        r2.showInfo()
    </script>
</body>
</html>

第二个案例
创建两个不同的tank对象,舒克和贝塔,调用舒克的攻击方法攻击贝塔三次
然后展示舒克和贝塔的基本信息

<!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>
</head>
<body>
    <script>
        // 创建两个不同的tank对象,舒克和贝塔
        // 调用舒克的攻击方法攻击贝塔三次
        // 然后展示舒克和贝塔的基本信息
        function Tank(name){
            this.name=name
            this.hp=100
            this.number=100
        }
        // 两个不同的对象,调用相同的方法,都挂在原型上
        Tank.prototype.fire=function(tank){
            if("hp" in tank){
             tank.hp-=10
             this.number--
            }else{
              alert("传入对象必须要有hp属性")
            }
        }
        Tank.prototype.showInfo=function(){
            console.log(this.name+"  剩余血量为  "+this.hp+"  剩余子弹为  "+this.number);
        }
        var t1=new Tank("舒克")
        var t2=new Tank("贝塔")
        t1.fire(t2)
        t1.fire(t2)
        t1.fire(t2)
        t1.showInfo()
        t2.showInfo()
    </script>
</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>
</head>
<body>
    <script>
        // 实现一个用户 抓牌，交换牌和展示牌功能
        // 创建一个用户对象，使用抓牌功能，然后展示牌，再交换牌，再展示牌
        // 属性 leftHand rightHand name
        // 方法 grab show change
        // 构造一个"人",左右手抓牌之前为空为空
        function User(name){
           this.name=name
           this.leftHand=""
           this.rightHand=""
        }
        // 左右手进行抓牌的方法
        User.prototype.garb=function(){
            // 随机抽取俩张牌,一个放在左手,一个放在右手
            let c1=new Card()
            let c2=new Card()
            // 为左右手赋值
            this.leftHand=c1.color+c1.size
            // 添加判定条件 解决 随机覆盖 问题(左右手拿的牌color和size相同)
            // 放置随机覆盖问题 用while循环写一个死循环
            while(true){
            // 不能直接比较对象
            // 对象 属于引用数据类型
            // 引用数据类型 变量保存的是对象存储地址,不是其中的内容,所以不能直接比较
            // 如果左手的的卡牌和右手的卡牌完全相同,那么就给右手重新随机生成一个卡牌
            // 直到左右手的卡牌不相同的时候,跳出这个死循环
                if(c1.color+c1.size==c2.color+c2.size){
                    let c2=new Card()
                }else{
                    break
                }
            }
            this.rightHand=c2.color+c2.size
        }
        // 展示方法
           User.prototype.show=function(){
            console.log("名叫"+this.name+"的小伙儿 "+"左手为"+this.leftHand+";右手为"+this.rightHand)
        }
        // 随机生成牌
        function Card(){
        // 声明两个个局部变量,用来放置牌的大小,花色
            let sizes=["大王","小王","A","2","3","4","5","6","7","8","9","10","J","Q","k"]
            let colors= ["黑桃","梅花","红心","方片"]
        // 随机抽取牌的大小为
            this.size=sizes[parseInt(Math.random()*sizes.length)]
        // 增加一个if判定,如果是大王或者小王,是不用随机生成颜色的
             if(this.size=="大王"||this.size=="小王"){
        // console.log("我是大小王")
              this.color=""
             }else{
        // 随机抽取牌的颜色为
                this.color=colors[parseInt(Math.random()*colors.length)]
             }
        }
        // 交换方法
          User.prototype.change=function(){
            console.log("名叫"+this.name+"的小伙儿  开始了帅气的换牌动作")
        // 声明一个新变量,放置左手的牌
            let t=this.leftHand
        // 然后把右手的牌放到左手上
            this.leftHand=this.rightHand
        // 右手去拿变量里的牌
            this.rightHand=t
        // 完成交换
          }

        let c1=new User("查德")
        c1.show()
        c1.garb()
        c1.show()
        c1.change()
        c1.show()
        // let c1=new Card()
        // console.log(c1)
    </script>
</body>
</html>