面向对象原型
<!--
* @Author: RealRoad
* @Date: 2023-03-15 13:51:18
* @LastEditors: Mei
* @LastEditTime: 2023-03-15 14:20:27
* @FilePath: \vscode\面向对象.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!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>
<div class="box1">
<h1></h1>
<ul></ul>
</div>
<div class="box2">
<h1></h1>
<ul></ul>
</div>
<div class="box3">
<h1></h1>
<ul></ul>
</div>
<script>
var data={
title:"体育",
list:["内容1","内容2","内容3"]
}
var data2={
title:"娱乐",
list:["内容1","内容2","内容3"]
}
var data3={
title:"新闻",
list:["内容1","内容2","内容3"]
}
function CreateList(choice,data){
this.ele=document.querySelector(choice)
this.title=data.title,
this.list=data.list
}
//原型
CreateList.prototype.render=function(){
//渲染页面
var h1=this.ele.querySelector("h1")
var ul=this.ele.querySelector("ul")
h1.innerHTML=this.title
ul.innerHTML=this.list.map(item=>`<li>${item}</li>`)
.join("")
}
var obj1=new CreateList(".box1",data)
console.log(obj1)
obj1.render()
var obj2=new CreateList(".box2",data2)
obj2.render()
var obj3=new CreateList(".box3",data3)
obj3.render()
</script>
</body>
</html>
对象.__proto__===构造函数的原型.prototype
console.log(obj1.__proto__===CreateList.prototype)
原型链
//__proto__=>Object.prototype=> toString()
obj1.toString()
解释以下为什么对象都有tostring（）这个方法？（或解释一下原型链的概念）
因为我们自己对象new创建函数之后，它会有一个__proto__这个属性，如果我们调用一个toString()方法，他会在自己对象身上找，如果找不到，他就会沿着__proto__找他构造函数prototype上有没有，如果没有，它就会继续沿着构造函数原型的__proto__，这样一级一级的往上找的过程就构成了一个看不见的链条，就是原型链。而tostring（）方法在object原型上是有的，这样就能找到并调用。
那整个原型链的顶点是什么呢？
有两种解释，Object.prototype就是顶点了，它的顶点就是空。或者直接说顶点是空
模块化思维导入和导出js
导入
<script type="module">
import Mytabs from 'Tabs.js'
new Mytabs(blur....)
new Mytabs(blur....)
</script>
导出
export{
Tabs
}
//或
export default Tabs
面向对象继承
构造函数继承、原型继承、组合继承(就是构造函数继承+原型继承)
function Person(name,age){
=name
this.age=age
}
Person.prototype.say=function(){
console.log(,"hello")
}
function Student(name,age,grade){
Person.call(this,name,age) //Person.apply(this,[name,age])
this.grade=grade
}
var obj=new Student("mez",12,150)
console.log(obj)
构造函数继承，只能继承属性，无法把函数（方法）继承下来。
Student.prototype=new Person()
//基础增加方法
Student.prototype.printGrade=function(){
console.log(,this.grade)
}
//覆盖
Student.prototype.say=function(){
console.log(,this.grade)
console.log(,"您好")
}
//增强原来方法
Student.prototype.say2=function(){
this.say()
//console.log(,this.grade)
console.log(,"您好")
}
var obj=new Student("mez",12,150)
obj.say2()
obj.printGrade()
ES6继承实例
<!--
* @Author: RealRoad
* @Date: 2023-03-15 13:51:18
* @LastEditors: Mei
* @LastEditTime: 2023-03-15 16:36:27
* @FilePath: \vscode\面向对象.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1">
<h1></h1>
<img src="" >
<ul></ul>
</div>
<div class="box2">
<h1></h1>
<img src="" >
<ul></ul>
</div>
<div class="box3">
<h1></h1>
<img src="" >
<ul></ul>
</div>
<script>
var data={
title:"体育",
url:"./img/0123.jpg",
list:["内容1","内容2","内容3"]
}
var data2={
title:"娱乐",
url:"./img/0121.jpg",
list:["内容1","内容2","内容3"]
}
var data3={
title:"新闻",
url:"./img/0120.jpg",
list:["内容1","内容2","内容3"]
}
class CreateList{
constructor(choice,data={}){
this.ele=document.querySelector(choice)
this.title=data.title,
this.list=data.list
}
render(){
//渲染页面
var h1=this.ele.querySelector("h1")
var ul=this.ele.querySelector("ul")
h1.innerHTML=this.title
ul.innerHTML=this.list.map(item=>`<li>${item}</li>`)
.join("")
}
}
// function CreateList(choice,data){
// this.ele=document.querySelector(choice)
// this.title=data.title,
// this.list=data.list
// }
//原型
// CreateList.prototype.render=function(){
// //渲染页面
// var h1=this.ele.querySelector("h1")
// var ul=this.ele.querySelector("ul")
// h1.innerHTML=this.title
// ul.innerHTML=this.list.map(item=>`<li>${item}</li>`)
// .join("")
// }
class CreateImgList extends CreateList{
constructor(choice,data={}){
super(choice,data)
this.imgUrl=data.url
}
render(){
super.render()
var img=this.ele.querySelector("img")
img.src=this.imgUrl
}
}
var obj1=new CreateImgList(".box1",data)
// console.log(obj1)
obj1.render()
var obj2=new CreateImgList(".box2",data2)
obj2.render()
var obj3=new CreateImgList(".box3",data3)
obj3.render()
</script>
</body>
</html>
