JavaScript高级:JavaScript面向对象-1.2类的继承

最新推荐文章于 2024-11-12 11:19:19 发布

前端小趴菜~时倾

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量159

点赞数

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

本文链接：https://blog.csdn.net/shiqing4387/article/details/127856471

版权

JavaScript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.1继承

现实中的继承：子承父业，比如我们都继承了父亲的姓。
程序中的继承：子类可以继承父类的一些属性和方法。
语法：

class Father{ // 父类 
} 
class Son **extends **Father { // 子类继承父类 
}

实例：

class Father { 
constructor(surname) { 
this.surname= surname; 
} 
say() { 
console.log('你的姓是' + this.surname); 
} 
} 
class Son extends Father{ // 这样子类就继承了父类的属性和方法 
} 
var damao= new Son('刘'); 
damao.say();

练习-类的继承

<!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>
    <script>
        //1.类的继承
        // class Father{
        //     constructor(){

        //     }
        //     money(){
        //         console.log(100);
        //     }
        // }
        // class Son extends Father{

        // }
        // var son = new Son();
        // son.money();

        class Father{
            constructor(x,y){
                this.x = x;
                this.y = y;
            }
            sum(){
                console.log(this.x+this.y);
            }
        }
        class Son extends Father{
            constructor(x,y){
               super(x,y); //调用了父类中的构造函数
            }
        }
        var son = new Son(1,2);
        var son1 = new Son(11,22);
        son.sum();
        son1.sum();
    </script>
</body>
</html>

1.2 super 关键字

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
语法：

class Person { // 父类
	constructor(surname){
		this.surname = surname;
	}
}
class Student extends Person { // 子类继承父类
	constructor(surname,firstname){
		super(surname); // 调用父类的constructor(surname)
		this.firstname = firstname; // 定义子类独有的属性
	}
}

注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)
案例：

class Father {
	constructor(surname) {
		this.surname = surname;
	}
	saySurname() {
		console.log('我的姓是' + this.surname);
	}
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
	constructor(surname, fristname) {
		super(surname); // 调用父类的constructor(surname)
		this.fristname = fristname;
	}
	sayFristname() {
		console.log("我的名字是：" + this.fristname);
	}
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数。
语法：

class Father {
	say() {
		return '我是爸爸';
	}
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
	say() {
		// super.say() super 调用父类的方法
		return super.say() + '的儿子';
	}
}
var damao = new Son();
console.log(damao.say());

练习-super关键字调用父类普通函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // super 关键字调用父类普通函数
        class Father{
            say(){
                return '我是爸爸';
            }
        }
        class Son extends Father{
            say(){
                // console.log("我是儿子");
                console.log(super.say()+"的儿子");
                //super.say()就是调用父类中的普通函数 say()
            }
        }
        var son = new Son();
        son.say();
        // 继承中的属性或者方法查找原则: 就近原则
        // 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
        // 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
    </script>
</body>

</html>

练习:-子类继承父类方法同时扩展自己方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 父类有加法方法
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        // 子类继承父类加法方法 同时 扩展减法方法
        class Son extends Father {
            constructor(x,y) {
                //利用super调用父类的构造函数
                //super必须在子类this之前调用
                super(x,y);
                this.x = x;
                this.y = y;
                
            }
            sub(){
                console.log(this.x - this.y);
            }
            
        }
        var son = new Son(5,3);
        son.sub();
        son.sum();

        //注意: 子类在构造函数中使用super, 必须放到 this 前面  (必须先调用父类的构造方法,在使用子类构造方法)

    </script>
</body>

</html>

1.3三个注意点:

在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
类里面的共有属性和方法一定要加this使用.
类里面的this指向问题.
constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者

练习:-使用类的注意事项

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>


<body>
    <button>点击</button>
    <script>
        var that;
        var _that;
        class Star {
            constructor(uname, age) {
                //constructor 里面的this指向的是 创建的实例对象
                that = this;
                console.log(this);


                this.uname = uname;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector('button');
                this.btn.onclick = this.sing;
            }
            sing() {
                // console.log("hi");
                //这个sing方法里面的this 指向的是btn这个按钮,因为这个按钮调用了这个函数
                console.log(this);
                // console.log(this.uname);
                //that里面存储的是cunstructor中的this
                console.log(that.uname);
            }
            dance(){
                _that = this;
                console.log(this);
            }
        }


        var ldh = new Star("刘德华");
        // ldh.sing();
        console.log(that === ldh);
        ldh.dance();
        console.log(_that === ldh);
        // 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象


        // 2. 类里面的共有的属性和方法一定要加this使用.
    </script>
</body>


</html