javascript基础练习：借用原型对象实现继承 & 排他思想 & 页面带参数自动跳转
javascript基础练习：借用原型对象实现继承 & 排他思想 & 页面带参数自动跳转
Enterprise_
发布于 2020-07-10 11:07:13
发布于 2020-07-10 11:07:13
文章目录- 一.借用原型对象实现继承
- 二.排他思想
- 三.页面带参数自动跳转
一.借用原型对象实现继承
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录