专栏首页小L的魔法馆javascript基础练习:借用原型对象实现继承 & 排他思想 & 页面带参数自动跳转

javascript基础练习:借用原型对象实现继承 & 排他思想 & 页面带参数自动跳转

文章目录
  • 一.借用原型对象实现继承
  • 二.排他思想
  • 三.页面带参数自动跳转

一.借用原型对象实现继承

class Person {
    constructor (name, age) {
        this.name = name
        this.age = age
    }
    info () {
        console.log("I am " + this.name)
    }
}

class Student extends Person {
    constructor (name, age, grade) {
        super(name, age)  // super必须在子类this之前
        this.grade = grade
    }
    getGrade () {
        console.log(this.grade)
    }
}

var stu1 = new Student('li lei', 18, 'A')
stu1.info()  // I am li lei
stu1.getGrade()  // A

定义两个构造函数Student和Person,利用原型对象模拟上面类的继承关系。就是用对象模拟类,然后用call方法在函数内调用父类的方法即可。 注意call的返回值是调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined

代码如下:

function Person(name,age){
    this.name = name;
    this.age  = age;
    this.info = () => { console.log("I am " + this.name);}
}

function Student(name,age,grade){
    Person.call(this,name,age);
    this.grade=grade;
    this.getGrade = ()=>{ console.log(this.grade);}
}

var stu1 = new Student('li lei', 18, 'A');
stu1.info();
stu1.getGrade();

二.排他思想

有五个按钮,点击其中一个按钮,该按钮背景颜色变为"pink",其他按钮变为"white"。

只要注意添加点击事件时需要知道被点击的对象;

目标效果图如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button >按钮</button>
    <button >按钮</button>
    <button >按钮</button>
    <button >按钮</button>
    <button >按钮</button>
    <script>
    var arr = document.querySelectorAll("button");
    for(var i=0;i<arr.length;i++){			
        arr[i].index=i;                     //添加属性index记录每个button的下标
        arr[i].onclick = function () {
            this.style.backgroundColor = "pink";   
            var index=this.index;           //当前被点击的button的下标			
            for(var j=0;j<arr.length;j++){	
                if(index===j)continue;		//这里不能写arr[i].index===j;因为被点击的时候对象未知
                arr[j].style.backgroundColor="white";
            }
        }
    }
    </script>
</body>
</html>

三.页面带参数自动跳转

在a.html页面上利用prompt输入一个name,3秒后自动跳转到b.html页面,且在b页面上弹出( alert )刚才在a页面输入的name值。 思路就是将参数拼接到原来的url上,然后跳转后的页面里把url和参数解析出来即可。

//A页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是A页面</h1>
    <script>
        var name=prompt("Please input a name:");
        setTimeout(()=>{window.location.href="b.html?name="+name;},3000);
    </script>
</body>
</html>
//B页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body> 
    <h1>这是B页面</h1>
    <script> 
    var hf=window.location.href
    var index= hf.indexOf("?");
    var Turl = hf.substr(0,index);
    var Trans_argument=hf.substr(hf.indexOf("=")+1);
    if(index!=-1){
        alert("The name is "+Trans_argument);
        window.location.replace(Turl);
    }
    //stringObject.substring(start,stop)
    //stringObject.substr(start,length)
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HUD 1411--校庆神秘建筑(欧拉四面体体积计算)

    校庆神秘建筑 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (...

    Enterprise_
  • C++最接近整数的浮点运算

    Enterprise_
  • C++继承与多态练习--计算图形面积

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invi...

    Enterprise_
  • this

    天天_哥
  • 夜谈Java类的定义

    对于结构化程序设计:起床,洗脸,吃饭,下课,放学 对于面向对象设计,类,类中的方法

    达达前端
  • PHP面向对象之构造函数和析构函数

    构造方法又称为构造函数,是对象被创建时自动调用的方法,一般用来完成类初始化需要做的事情

    hedeqiang
  • php 利用socket发送GET,POST请求的实例代码

      作为php程序员一定会接触http协议,也只有深入了解http协议,编程水平才会更进一步。最近我一直在学习php的关于http的编程,许多东西恍然大悟,受益...

    砸漏
  • php用select实现I/O复用

    在Linux Socket服务器短编程时,为了处理大量客户的连接请求,需要使用非阻塞I/O和复用,select、poll和epoll是Linux API提供的I...

    gaobinzhan
  • RocketMQ存储--主从同步【源码笔记】

    1.消息存储在Master上了,如何同步到Slave上了呢? 2.同步复制和异步复制流程是怎么样的?

    瓜农老梁
  • 如何用 vue 制作一个探探滑动组件

    前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组...

    程序员宝库

扫码关注云+社区

领取腾讯云代金券