JavaScript - js进阶 - ES5原型继承及创建元素

最新推荐文章于 2022-12-19 23:11:43 发布

Henry_ww

最新推荐文章于 2022-12-19 23:11:43 发布

阅读量121

点赞数

分类专栏： JavaScript 文章标签： javascript 面试 html5

本文链接：https://blog.csdn.net/Henry_ID/article/details/119972633

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

本文探讨了ES5中的原型继承机制，通过示例展示了如何使用构造函数和原型链实现类的继承。同时，还介绍了创建元素的JS实现，包括创建`div`和`img`元素，并实现了元素的添加到页面的功能。通过`CreateElement`和`CreateImg`构造函数，实现了元素的初始化和继承关系。

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

ES5原型继承

<!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>原型继承</title>
    </head>
    <body></body>
    <script>
        // 制作一个ES6的继承(ES5要做的跟ES6一样)

        // 先有父类
        class Father {}
        class Son extends Father {}

        const s = new Son();
        console.log(s);

        // 按照原型的三角关系: 证明相关内容

        // 1. 对象s的原型对象: s.__proto__ == Son.prototype
        console.log(s.__proto__ === Son.prototype); // true

        // 2. Son和Father的关系: Son.prototype.__proto__ === Father.prototype
        console.log(Son.prototype.__proto__ === Father.prototype); // true

        // 3. Son和Father的关系: 不走母系
        console.log(Son.__proto__ === Father); // true

        // ES6的继承关系
        // 1. 原型对象 继承 原型对象  子类.prototype.__proto__ == 父类.prototype
        // 2. 子类 继承 父类         子类.__proto__ == 父类

        // ES5继承实现: 与ES6实现一样( 面试之前: 百度一下, JS原型继承方式: 6种)

        // 父构造函数
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        // 提供功能能力: 挂载原型方法
        Person.prototype.say = function () {
            console.log(this.name + "正在说话");
        };

        // 子构造函数
        function Student(name, age, stuno) {
            // name和age: Person已经可以实现初始化: 只要借调即可
            Person.call(this, name, age);

            // 自己初始化别的东西
            this.stuno = stuno;
        }

        // 到此为止
        // Student原型对象的上级: Student.prototype.__proto__ === Object.prototype
        // Student自己的上级: Student.__proto__ === Function.prototype
        // Student与Person没有半毛钱关系
        console.log(new Student("张三", 19, "0001"));

        // 如何实现继承? 修改上级: 函数自己的上级  和 原型对象的上级
        Student.prototype.__proto__ = Person.prototype;
        Student.__proto__ = Person;
        console.log(new Student("李四", 20, "0002"));
    </script>
</html>

ES5原型继承 - 元素创建

<!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>ES5原型继承-元素创建</title>
        <style>
            .element {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                border: 10px solid #00ffff;

                text-align: center;
                font-size: 30px;
                line-height: 200px;

                overflow: hidden;
                float: left;
            }
        </style>
        <script src="./js/ES5 - CreateElement.js"></script>
    </head>
    <body></body>
    <script>
        // 1. 实例化对象
        const div = new CreateElement("div", "element", "做人,开心就好");

        div.appendTo("body");

        // 2. 图片怎么办? 需要src
        const img = new CreateImg("images/帅哥.png", "element");
        img.appendTo("body");
    </script>
</html>

js文件 - ES5 - CreateElement.js

/**
 * 1. 先写一个构造函数: CreateElement
 * 2. 考虑: 数据是否需要初始化, 如果有: 加参数
 * 3. 其他功能: 放原型对象上, 一个需求一个方法
 * */
function CreateElement(tag, className, txt) {
    // 数据依然保存到this中
    this.ele = document.createElement(tag);
    this.ele.className = className;
    this.ele.innerHTML = txt;
}

// 挂载原型方法
CreateElement.prototype.appendTo = function (selector) {
    // 找到父元素
    let parent = document.querySelector(selector);
    parent.appendChild(this.ele);
};

/**
 * 1. 创建一个构造函数:CreateImg
 * 2. 初始化: 加参数
 * 3. 实现继承
 * */
function CreateImg(src, className) {
    // 创建元素: CreateElement已经做好,借调
    CreateElement.call(this, "img", className, "");

    // 补充属性:src
    // console.log(this)
    this.ele.src = src;
}

// 实现继承: 原型对象的上级  构造函数的上级(加不加都不影响代码: 没有静态的东西)
CreateImg.prototype.__proto__ = CreateElement.prototype;
CreateImg.__proto__ = CreateElement;

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - js进阶 - ES5原型继承及创建元素

ES5原型继承<!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
复制链接

扫一扫