js高级(一)

最新推荐文章于 2024-10-01 20:12:28 发布

WA终结者

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量352

点赞数

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

本文链接：https://blog.csdn.net/qq_53107845/article/details/122364501

版权

web前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

这篇博客探讨了面向过程和面向对象的思想在编程中的应用。通过实例展示了如何使用JavaScript实现点击按钮改变元素颜色，并通过创建对象实例和原型方法实现数据共享。此外，还涉及到了如何为内置对象添加方法，以及如何随机生成位置并在网页上显示小方块。博客深入浅出地讲解了局部变量、全局变量、随机数生成以及对象之间的交互和数据管理。

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

1.体会面向过程和对象的思想

1.体会面向过程

改变某一元素,操作的是对象的属性

2.面对对象的思想

(操作谁?按钮\div\换颜色)

用创造实例化对象的方式控制对象属性

<body>
    <button id="btn">显示</button>
    <div id="box"></div>

    <button id="btn1">显示</button>
    <div id="box1"></div>

    <script>
        // 需求：点击换颜色
        // 1.体会面向过程
        // document.getElementById("btn").onclick = function() {
        //     document.getElementById("box").style.backgroundColor = "lightblue";
        // }
        // 2.面向对象的思想
        // 操作谁，按钮、div、换颜色
        function Style(btnId, boxId, color) {
            this.btnId = document.getElementById(btnId);
            this.boxId = document.getElementById(boxId);
            this.color = color;
        }
        // 在原型中添加方法---共享数据、节省空间
        Style.prototype.init = function() {
            console.log(this);// 指向的实例对象
            // 当函数发生嵌套的时候，this的指向会发生改变
            // 解决：使用变量存储
            var that = this;
            console.log(this.btnId);
            // 点击按钮切换颜色
            this.btnId.onclick = function() {
                // console.log(this.btnId);// undefined，this指向有问题
                that.boxId.style.backgroundColor = that.color;
            }
        }

        // 实例化对象
        var changeColor1 = new Style("btn", "box", "lightgreen");
        var changeColor2 = new Style("btn1", "box1", "yellow");

        changeColor1.init();
        changeColor2.init();
    </script>
</body>

需要共享的数据写在原型(prototype)上

//原型上的数据可以相互访问 -->在一个原型函数里可以访问另一个原型函数

function Students(name, score) {
    this.name = name;
    this.score = score;
}
//简单的原型写法
Students.prototype = {
    //需要手动添加构造器
     constructor: Students,
     sex: "男",
     eat: function() {
         console.log("代码没敲完，就喝西北风吧");
    }
}

var stu1 = new Students("川哥", "59分");
stu1.eat();
console.dir(stu1);

console.dir(); // 打印对象的结构

constructor 构造器

**当寻找对象的属性的时候,是先在实例对象里找,找不到的话再在prototype里找

为内置对象添加方法

//需求:在字符串中有一个倒叙字符串的方法
var string = new String();
String.prototype.daoStr = function() {
    var ss = "";
    for(var i = this.length - 1; i >= 0; i--) {
        ss += this[i];
    }
    return ss;
}

局部变量变成全局变量：把局部变量暴露给window

(function () {
    var num = 10;
    window.number = num;
})();

console.log(window.number);
console.log(number);// window可以省略不写

产生随机数

        // 通过函数自调用 + 自定义构造函数产生随机数
        (function() {
            // 创建产生随机数的构造函数
            function Random() {}
            // 在原型上面添加方法--->目的：生成随机数
            Random.prototype.init = function(min, max) {
                // 区间：0-4的整数
                // return Math.floor(Math.random() * 5);
                return Math.floor(Math.random() * (max - min + 1) + min);
            }
            // 将对象暴露给window
            window.ran = new Random();
        })();
        console.log(ran.init(10, 50));

随机产生小方块

<!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>
    <style>
        #map {
            width: 800px;
            height: 600px;
            background-color: lightgreen;
            margin: 50px auto;
            /* 小方块要脱标 */
            position: relative;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        // 1.产生随机数的对象
        (function() {
            function Random() {}
            Random.prototype.getRandom = function(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            }
            window.random = new Random();
        })();

        // 2.产生小方块的对象
        (function() {
            var map = document.getElementById("map");
            // 小方块的构造函数
            function Food(width, height, color, x, y) {
                this.width = width || 20;
                this.height = height || 20;
                this.color = color || "pink";
                // 需要随机产生的left和top值
                this.x = x || 0;
                this.y = y || 0;
                // 创建小方块（食物）
                this.element = document.createElement("div");
            }
            // 初始化小方块显示的位置
            Food.prototype.init = function() {
                // ① 设置小方块的样式
                var div = this.element;
                div.style.width = this.width + "px";
                div.style.height = this.height + "px";
                div.style.backgroundColor = this.color;
                div.style.position = "absolute";
                // ② 把小方块添加到map中
                map.appendChild(div);
                // ③ 位置随机
                this.render();
            }
            // 添加位置随机的方法
            Food.prototype.render = function() {
                this.x = random.getRandom(0, map.offsetWidth / this.width) * this.width;
                this.y = random.getRandom(0, map.offsetHeight / this.height) * this.height;
                // 设置小方块的left和top值
                this.element.style.left = this.x + "px";
                this.element.style.top = this.y + "px";
            }

            window.food = new Food();
        })();

        food.init();
    </script>
</body>
</html>