class和继承，原型和原型链

最新推荐文章于 2023-09-15 09:07:17 发布

老街一角

最新推荐文章于 2023-09-15 09:07:17 发布

阅读量637

点赞数 2

分类专栏： js 文章标签： class 继承

本文链接：https://blog.csdn.net/Wen_Tao98/article/details/111825893

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文深入探讨JavaScript中的class语法、继承机制以及原型和原型链的概念。讲解了函数的prototype属性、实例对象的隐式原型以及原型链的工作原理，并通过手写简易jQuery来实践这些概念。

摘要由CSDN通过智能技术生成

js本身是一个基于原型继承的语言

一，class

//用class定义类，类型首字母大写，类中可以定义多个属性或方法
	class Student{
        constructor(name,number){ //constructor是一个构造方法，用来接收参数
            this.name=name;	//this代表的是实例对象
            this.number=number;
        }
        sayHi(){	//这是一个类的方法，注意千万不要加上function
            console.log(
                `姓名${this.name},学号${this.number}`
            )
        }
    }
    //通过类 new 对象/实例
    const xialuo=new Student('夏洛',100)
    console.log(xialuo.name)
    console.log(xialuo.number)
    xialuo.sayHi()

二、继承

用class定义类，通过extends继承父类，通过super表示父类的属性
class实际上是一个函数

<script>
    //父类
    class People{
        constructor(name){
            this.name=name
        }
        eat(){
            console.log(`${this.name} eat something `)
        }
    }

    //子类
    class Student extends People{
        constructor(name,number){
            super(name)
            this.number=number
        }
        sayHi(){
            console.log(`姓名 ${this.name}，学号 ${this.number}`)
        }
    }

    // 子类
    class Teacher extends People{
        constructor(name,major){
            super(name)
            this.major=major
        }
        teach(){
            console.log(`${this.name} 教授 ${this.major} `)
        }
    }

    //实例
    const xialuo=new Student('夏洛',100)
    console.log(xialuo.name)
    console.log(xialuo.number)
    xialuo.sayHi()
    xialuo.eat()

    //实例
    const wanglaoshi=new Teacher('王老师','语文')
    console.log(wanglaoshi.name)
    console.log(wanglaoshi.major)
    wanglaoshi.teach()
    wanglaoshi.eat()

</script>

三、原型

每个函数都有一个prototype属性，被称为显示原型
每个实例对象都会有 _ proto _ 其被称为隐式原型
每一个实例对象的隐式原型 _ proto _ 属性指向自身构造函数的显式原型prototype
每个prototype原型都有一个constructor属性，指向它关联的构造函数。

四、原型链

每个对象都会在其内部初始化一个属性，就是 prototype (原型)，当我们访问一个对象的属性时。如果这个对象内部不存在这个属性，那么他就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。

五、手写简易jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>123678</p>
    <p>123678</p>
    <p>123678</p>
    <p>123678</p>
    <p>123678</p>
</body>
</html>
<script>

    class jQuery{
        constructor(selector){
            const result=document.querySelectorAll(selector);
            const length=result.length;
            for(let i=0;i<length;i++){
                //this相当于class中定义属性时的this
                this[i]=result[i]
            }
            //类数组的形式
            this.length=length
            this.selector=selector
        }
        each(fn){
            for(let i=0;i<this.length;i++){
                const elem=this[i]
                fn(elem)
            }
        }
        on(type,fn){
            return this.each(elem=>{
                elem.addEventListener(type,fn,false)
            })
        }
    }

    //插件
    jQuery.prototype.dialog=function(info){
        alert(info)
    }
    
    //“造轮子”
    class myJQuery extends jQuery{
        constructor(selector){
            super(selector)
        }
    }

    // 可在控制台打印查看
    //const $p=new jQuery('p')
    //$p.get(1)
    //$p.each((elem)=>console.log(elem.nodeName))
    //$p.on('click',()=>alert('clicked'))

</script>

老街一角

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
class和继承，原型和原型链

js本身是一个基于原型继承的语言一，class//用class定义类，类型首字母大写，类中可以定义多个属性或方法 class Student{ constructor(name,number){ this.name=name; this.number=number; } sayHi(){ console.log( `姓名${this.name},学号
复制链接

扫一扫

专栏目录