文章目錄 - 一.借用原型對象實作繼承
- 二.排他思想
- 三.頁面帶參數自動跳轉
一.借用原型對象實作繼承
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> 複制