构造函数 + 原型 = 组合式继承

最新推荐文章于 2024-10-03 12:37:09 发布

weixin_49696014

最新推荐文章于 2024-10-03 12:37:09 发布

阅读量202

点赞数

文章标签：原型模式 javascript 前端

本文链接：https://blog.csdn.net/weixin_49696014/article/details/121767540

版权

这篇博客介绍了JavaScript中面向对象编程的概念，包括构造函数和原型的使用。它详细阐述了如何通过构造函数实现对象的继承，特别是组合式继承的方式。示例代码展示了如何创建父类Father和子类Son，并实现了属性和方法的继承。文章还演示了如何调用父构造函数的方法并添加子类特有的方法。

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

<!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>
        // 在es6之前,面向对象的编程，要用到构造函数,构造函数与new关键字搭配使用才又意义
        // 构造函数的继承，要用到 构造函数和构造函数的原型，又叫组合式继承
        // 父构造函数

        // 共有的属性定义到构造函数内
        function Father(name,age){
            this.name = name
            this.age = age
        }
        // 共有的方法，定义到构造函数的原型上
        Father.prototype = {
            // 用这种对象的方式给原型复制的话，必须手动的将constructor这个属性值，设置为当前的构造函数
            // 因为这种赋值方式，会覆盖掉原来的原型对象
            constructor:Father,
            money(){
                console.log(100)
            }
        }
        
        // 定义一个子类
        function Son(name,age){
            // 继承Father构造函数的属性
            // 调用父构造函数，并且要用call将father构造函数的this指向指向当前的构造函数
            Father.call(this,name,age)
        }
        
        // 如果要继承父构造函数的方法
        // 那么就将夫构造函数的实例对象指向子构造函数的原型对象
        Son.prototype = new Father()
        // 不要忘记，再将子构造函数的原型对象中的constructor再指回Son
        Son.prototype.constructor = Son
        Son.prototype.sax = () => {
            console.log('我是子构造函数的方法')
        }
        let ldh = new Father('刘德华',18)
        console.log(ldh)
        let son = new Son('我的',20)
        console.log(son)
        son.money()
    </script>
</body>
</html>