JS---继承的概念，ES6 的类与继承

最新推荐文章于 2023-07-20 17:25:31 发布

阿尭

最新推荐文章于 2023-07-20 17:25:31 发布

阅读量167

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/qq_63322025/article/details/126860211

版权

这篇博客探讨了JavaScript中如何通过构造函数和原型实现类与继承，并通过示例展示了如何创建父类和子类，以及子类如何继承和调用父类的方法和属性。同时，还介绍了ES6中的类语法，演示了如何使用`class`关键字进行更简洁的类定义和继承操作。

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

面向对象的世界里，一切即对象.
每个对象都有自己的属性和方法.
根据不同对象的属性和方法，将对象分成不同类型
比如：人类: 有眼睛，鼻子，耳朵，能说话
手机：能打电话，发短信
学生类: 能读书，写字

继承是类与类之间的关系，子类继承父类子类就拥有父类的属性和方法。比如：学生类继承人类就拥有人类的属性和方法，学生类称为子类，人类称为父类。

JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承

 <script>
        function Person(){
            this.name='jack'
            this.age=20
        }
        Person.prototype={
            constructor:Person,//手动设置constructor指向构造函数
            say:function(){
                console.log('说话')
            }
        }

        function Student(){
            Person.call(this)//构造函数继承
            this.num=1001
        }
        Student.prototype={
            constructor:Student,
            //读书
            readBook:function(){
                console.log('读书')
            }
        }
 

        //拷贝继承，继承父类原型对象上公共的属性和方法
        for(let key in Person.prototype){
            Student.prototype[key]=Person.prototype[key]
        }
        //字类访问父类的属性和方法
        let s1=new Student()
        s1.readBook()
        s1.say()
        console.log(s1.name,s1.age,s1.num)
    </script>

原型继承缺点：
改变原型指向实现，改变原型指向时，初始的属性，继承过来的属性值都是一样的，要想改变继承过来的值，只能重新调用。

ES6 的类与继承：

继承：类与类之间的关系,

子类继承父类

语法:

// 父类

class Parent{

constructor(){

this.money = 10000

}

playGame(){

}

}

// 子类Son继承父类Parent

class Son extends Parent{

constructor( ){

// 先要实例父类再有子类实例

super() // 调用父类构造器实例化父类

this.name = 'jack'

}

}

let parent1 = new Parent()

let s1 = new Son()

练习一：

<script>
			// 父类
			class Parent {
				constructor() {
					this.money = 100000
					this.home = '房子'
				}
                playGame(){
                    console.log('玩游戏');
                }
                swiming(){
                    console.log('游泳');
                }
			}

            // 子类Son继承父类Parent
            class Son extends Parent{
                constructor(name){
                    // 先实例化父类
                    super() //super关键字表示父类构造器
                    this.name = name
                }
            }

            let parent1 = new Parent()
            let son1 = new Son('jack')

            son1.swiming()
            son1.playGame()
            console.log(son1.money, son1.home);


		</script>

练习二：

    <script>
        class Person{
            constructor(name,age){
                this.name=name
                this.age=age
            }
            say(){
                console.log(this.name,'说话')
            }
        }
        //学生类
        class Student extends Person{
            constructor(name,age,num){
                super(name,age)//super表示调用父类构造函数
                this.num=num
            }
            readBook(){
                console.log('学号是',this.num,'的学生在读书')
            }
        }
        let s1=new Student("jack",22,1001)
        s1.say()
        console.log(s1.name,s1.age,s1.num)
    </script>