JavaScript学习8：类、构造函数和原型、ES5新增方法_构造函数es5创建方法(1)

2401_84446548

于 2024-04-28 18:07:04 发布

阅读量762

点赞数 18

分类专栏：程序员文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/2401_84446548/article/details/138286671

版权

程序员专栏收录该内容

163 篇文章 0 订阅

订阅专栏

	- [二、构造函数和原型（ES6之前）](#ES6_73)
	- [三、ES5新增的方法](#ES5_127)

一、类

在这里插入图片描述
三个特性：封装性、继承性、多态性

ES6中的类和对象
在这里插入图片描述

基本使用：

    <script>
        //创建类 函数不用写function 不用加，分隔
        class Star {
            constructor(uname, age) { //构造函数 new的时候自动调用，返回实例对象
                this.uname = uname;
                this.age = age;
            }
            sing(song) {
                console.log(this.uname + song);
            }
        }

        //创建对象
        var lhm = new Star('vivian', 18);
        console.log(lhm.uname, lhm.age);
        lhm.sing("believe");
    </script>

类的继承

    <script>
        class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
            say() {
                return '我是爸爸';
            }

        }
        class Son extends Father { //继承
            constructor(x, y) {
                super(x, y); //调用了父类中的构造函数 必须先写
                this.x = x;
                this.y = y;
            }
            say() {
                console.log(super.say() + '的儿子'); //调用父类中的函数
            }
            subtract() {
                console.log(this.x - this.y);
            }
        }
        var son = new Son(1, 2);
        son.sum(); //3
        son.say(); //就近原则 '我是爸爸的儿子'
        son.subtract(); //-1
    </script>

在这里插入图片描述

二、构造函数和原型（ES6之前）

在这里插入图片描述

实例成员和静态成员：

构造函数的问题

原型链

1.构造函数中的this指向对象实例
2.原型对象函数中的this指向调用者

原型对象的应用：
在这里插入图片描述

继承
在这里插入图片描述

    <script>

        function fun(x, y) {
            console.log(x + y);
            console.log(this);
        }
        var o = {
            name: 'vivian'
        };
        //1. call()可以调用函数
        //fun.call();//指向windows对象
        //2. call()可以改变这个函数的this指向
        fun.call(o, 1, 2);//指向o对象
    </script>

借用构造函数继承父类型属性
在这里插入图片描述
借用构造函数继承父类型方法
不能直接赋值：Son.prototype = Father.prototype

应该：Son.prototype = new Father();
同时注意 Son.prototype.constructor = Son;