js:面向对象、原型

最新推荐文章于 2024-02-17 15:31:22 发布

前端小王*

最新推荐文章于 2024-02-17 15:31:22 发布

阅读量81

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48493160/article/details/110421127

版权

js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

面向对象

生成方块案例1

面向对象的第一步：把要写的内容看作一个整体
我们把元素整个的完成结果看作一个整体就是方块。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <button id="stop">停止</button>
    <button id="start">开始</button>
    <button id="cont">继续</button>
    <script>
        // 定义一个构造函数 用于生成方块
        function Text(text) {
            // 定义完构造函数 就要考虑 这个对象应当拥有什么样的属性
            this.dom = document.createElement("div");
            this.width = 20;
            this.height = 20;
            this.left = 0;
            this.top = 0;
            this.text = text;
            // 定义一个方法
            this.setStyle = function () {
                // console.log(this)
                this.dom.style.position = "absolute";
                this.dom.style.left = this.left + "px";
                this.dom.style.top = this.top + 'px';
                this.dom.style.width = this.width + "px";
                this.dom.style.height = this.height + 'px';
                this.dom.style.backgroundColor = "red";
            }
            this.move = function () {
                // 箭头函数
                this.timer = setInterval(() => {
                    this.dom.style.left = this.dom.offsetLeft + 10 + "px";
                }, 200)
            }
            this.upTree = function () {
                document.body.appendChild(this.dom)
            }
        }
        // console.log(t)

        setInterval(function () {
            var t = new Text("T");
            t.setStyle();
            t.upTree();
            t.move();
        }, 400)


        // 当前遇见的问题是： 如果定时器开太多那么将会导致JS的执行效率下降 并且动画不同步

生成方块案例2

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <button id="stop">停止</button>
    <button id="start">开始</button>
    <script>
        var stop = document.getElementById("stop");
        var start = document.getElementById("start");
       
        function Text(text, width, height, left, top) {
            // 定义完构造函数 就要考虑 这个对象应当拥有什么样的属性
            this.dom = document.createElement("div");
            this.width = width;
            this.height = height;
            this.left = left;
            this.top = top;
            this.text = text;
            // 定义一个方法
            this.setStyle = function () {
                // console.log(this)
                this.dom.style.position = "absolute";
                this.dom.style.left = this.left + "px";
                this.dom.style.top = this.top + 'px';
                this.dom.style.width = this.width + "px";
                this.dom.style.height = this.height + 'px';
                this.dom.style.backgroundColor = "red";
            }
            this.move = function () {
                this.dom.style.left = this.dom.offsetLeft + 2 + "px";
            }
            this.upTree = function (parent) {
                parent.appendChild(this.dom)
            }
        }


        var arr = [];
        // console.log(t)

        var i = 0;
        var timer = null;
       
        var t = new Text("T", 20, 40, 50, 100);
        arr.push(t);
        t.setStyle();
        t.upTree(document.body);
        t.move();
        
        var i = 0;
        start.onclick = function () {
            timer = setInterval(function () {
                i++;
                if (i % 50 === 0) {
                    var t = new Text("T", 20, 40, 50, 100);
                    arr.push(t);
                    t.setStyle();
                    t.upTree(document.body);
                    t.move();
                }
                for (let i = 0; i < arr.length; i++) {
                    arr[i].move();
                }
            }, 20)
        }
        stop.onclick = function () {
            clearInterval(timer)
        }
    </script>
</body>

</html>

面向对象是一个写代码的思想。
构造函数是面向对象的基石.(正确的说法应该是类)
构造函数创建出来的对象是具体的对象。也叫做构造函数的实例。 (在现在来说，没有接触class之前我们就把构造函数当作类)

原型

任何的函数(箭头函数除外) 都天生有一个属性 prototype
这个属性就是用来给我们的构造函数使用的.
用于共享构造函数的实例的方法的

前端小王*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js:面向对象、原型

学习js第十六天面向对象生成方块案例1面向对象的第一步：把要写的内容看作一个整体我们把元素整个的完成结果看作一个整体就是方块。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫