js面向对象基础操作3-类
2017-12-21 本文已影响0人
likeli
JS类是用来取代构造函数的一种方法，用法会比构造函数简单一点，不会像构造函数一样，只继承属性不继承原型，类会把所有都继承过来。
例如：
class Person{
//类最开始的时候执行
constructor(name,age){
this.name=name;
this.age=age;
}
hobby(){
console.log("喜欢篮球");
}
showname(){
console.log(this.name);
}
}
// 类的继承
class Student extends Person{
constructor(name,age){
super(name,age);//用来传递参数给父级
}
action(){
console.log("我是action函数")
}
}
var newstudent=new Student("李四",19)
console.log(newstudent.name);
newstudent.hobby();
27E7A4FE-44CF-4451-A64E-3ED4A9375C51.png
上面那个简单的例子就可以说明，以后在写项目的时候就会经常使用类，所有说掌握类是非常重要的
下面再举一个小例子用来进一步了解使用类的简单与方便
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="wrap">
</div>
姓名：<input type="text" name="" id="myname" value="" /> 电话：
<input type="text" name="" id="tel" value="" />
<button id="btn1" onclick="adds()">添加</button>
<br /> 姓名：
<input type="text" name="" id="smyname" value="" /> 电话：
<input type="text" name="" id="stel" value="" />
<button id="btn2" onclick="search()">查找</button>
<br /> 姓名：
<input type="text" name="" id="cmyname" value="" /> 电话：
<input type="text" name="" id="ctel" value="" />
<button id="btn2" onclick="del()">查找</button>
<br />
</body>
<script type="text/javascript">
class Photobook {
constructor(data) {
this.data = data;
console.log(this.data);
}
show() {
var html = "";
for(var i = 0; i < this.data.length; i++) {
html += `<p>姓名是:${this.data[i].name} 电话是:${this.data[i].tel}</p>`;
}
document.getElementById("wrap").innerHTML = html;
}
add(name, tel) {
var obj = {
name,
tel
};
this.data.push(obj);
}
searchs(name) {
for(var i = 0; i < this.data.length; i++) {
if(name == this.data[i].name) {
alert("姓名是" + name + ", 电话是：" + this.data[i].tel)
}
}
}
del(name) {
for(var i = 0; i < this.data.length; i++) {
if(name == this.data[i].name) {
this.data.splice(i, 1);
i--; //为了保证不会影响删除一个之后影响以下进行操作
}
}
}
}
var data = [{
name: "张三",
tel: "123"
}, {
name: "李四",
tel: "889897"
}];
var newphoto = new Photobook(data);
newphoto.show();
console.log(newphoto)
function adds() {
var name = document.getElementById("myname").value;
var tel = document.getElementById("tel").value;
newphoto.add(name, tel);
newphoto.show();
}
//查找
function search() {
var name = document.getElementById("smyname").value;
var tel = document.getElementById("stel").value;
newphoto.searchs(name);
}
//删除
function del() {
var name = document.getElementById("cmyname").value;
var tel = document.getElementById("ctel").value;
newphoto.del(name);
newphoto.show();
}
</script>
</html>
