JavaScript学习笔记（9.1）

最新推荐文章于 2025-06-17 00:38:27 发布

mez_Blog

最新推荐文章于 2025-06-17 00:38:27 发布

阅读量191

点赞数 1

分类专栏：前端文章标签： javascript 前端开发语言学习 html5

本文链接：https://blog.youkuaiyun.com/mez_Blog/article/details/129554520

版权

前端专栏收录该内容

72 篇文章

订阅专栏

面向对象原型

<!--
 * @Author: RealRoad1083425287@qq.com
 * @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){
    this.name=name
    this.age=age
}

Person.prototype.say=function(){
console.log(this.name,"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.name,this.grade)
}
//覆盖
Student.prototype.say=function(){
    console.log(this.name,this.grade)
    console.log(this.name,"您好")
}
//增强原来方法
Student.prototype.say2=function(){
    this.say()
    //console.log(this.name,this.grade)
    console.log(this.name,"您好")
}
var obj=new Student("mez",12,150)

obj.say2()

obj.printGrade()

ES6继承实例

<!--
 * @Author: RealRoad1083425287@qq.com
 * @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" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <h1></h1>
        <img src="" style="width: 100px;">
        <ul></ul>
    </div>

    <div class="box2">
        <h1></h1>
        <img src="" style="width: 100px;">
        <ul></ul>
    </div>

    <div class="box3">
        <h1></h1>
        <img src="" style="width: 100px;">
        <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>