前端全栈学习第十五天-js高级-第一天

迷南。 2021-09-18 13:36 341阅读 0赞

1：三种创建对象的方式

2：原型引入

3：如何把局部变量变成全局变量

4：随机产生小方块

1：三种方式创建的
    字面量的方式
    var per1 = {
        name: "哈哈",
        age: 12,
        eat: function () {
            console.log("大家好");
        }
    };
    per1.eat();
    
    自定义构造函数
    注意点：自定义构造函数的作用就是来创建对象
    创建对象，并且实例化一个对象，对属性进行初始化
    1：开辟新的存储空间
    2：把this设置为当前对象
    3：设置属性和方法的值
    4：把this对象返回
    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.eat = function () {
            console.log("吃饭饭");
        }
    }
    var per = new Person("小明", 18, "男");
    per.eat();
    console.log(per.name);
    
    系统的构造函数
    var per2 = new Object();
    per2.name = "哈哈";
    per2.age = 12;
    per2.eat = function () {
        console.log("吃去吧");
    }
    
    工厂模式和自定义构造函数
    function createObject(name, age) {
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.say = function () {
            console.log("哈哈");
        }
        return obj;
    }
    var pre1 = createObject("小明", 12);
    console.log(pre1.name);
    相同点：都是函数，都可以传参
    不通点：工厂模式首字母小写，有new，有返回值，new之后的对象是当前对象
    直接调用函数创建对象
    自定义构造函数
    没有new，没有返回值，this是当前对象，通过new来创建对象
    构造函数和实例对象之间的关系
    实例对象是通过构造函数来创建的，创建的过程叫实例化
    如何判断对象是不是这个数据类型
    1)通过构造器的方式，实例对象.构造器 ==构造函数名字
    2)对象 instanceof 构造函数名字
    2：原型的引入
    当你写了一个构造函数，想要实例化对象。每次实例化对象，就开辟一个新的空间这是在所难免的，但是当调用相同的方法的时候，两个方法的指向也不一样，这就很难受。这个时候，就引入了原型：共享数据，节省内存空间
    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex; 
    }
    Person.prototype.play = function () {
        console.log("玩去吧")
    }
    var per = new Person("小明", 18, "男");
    var per1 = new Person("小红", 18, "男");
    console.log(per.play == per1.play);
    实例对象里面有构造函数的属性和方法，构造函数没有自己的属性和方法，因为没有赋值
    但是写在原型里面的方法，实例对象.__proto__ ==构造函数.prototype
    实例对象中有个属性，叫__proto__,也是对象，叫原型。浏览器使用
    构造函数中有个属性，叫prototy,也是对象，叫原型，程序员使用
    简单的原型写法
    注意：需要手动修改构造器的指向
        //    原型对象
        Person.prototype = {
    //        手动修改构造器的指向
            constrostor: Person,
            height: "188",
            weight: "155",
            eat: function () {
                console.log("每天吃100个屎")
            }
        }
        //    实例化对象,并初始化
        var per = new Person("小明", 15, "男");
    
    实例对象使用的方法和属性，会进行层层搜索，先在实例对象中查找，找到直接使用，找不到，到实例对象__proto__指向的原型对象prototy中找，找到则使用，找不到，则报错
    
    3：局部变量变成随机变量
    (function (win) {
        var num = 10; //局部变量
        win.number = num; //js是一门动态类型的语言，对象没有的属性，点完就有了
    })(window)
    console.log(number);
    //把局部变量给window下面的一个属性就行
    页面加载完毕，这个自调用函数(一次性)代码就执行完了
    产生随机数对象
     //把随机数对象暴露给window成为全局对象
        (function (window) {
    //    构造函数
            function Random() {
    
            }
    
    //    原型
            Random.prototype.getRandom = function (min, max) {
                return Math.floor(Math.random() * (max - min) + max)
            }
            window.Random = Random; //将random暴露给全局对象window
    //        也可以这样
    //        window.Random  =new Random(); 将实例化对象暴露给window
        })(window);
        //    console.log(Random.getRandom()) //直接用实例化对象来调用方法
        var ran = new Random();
        console.log(ran.getRandom(0, 5));
    
    4：产生随机小方块
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <style>
            .map {
                width: 800px;
                height: 600px;
                background-color: #CCC;
                position: relative;
            }
        </style>
    </head>
    <body>
    <div class="map"></div>
    <script src="../common.js"></script>
    <script>
        //产生随机数对象的
        (function (window) {
            function Random() {
            }
    
            Random.prototype.getRandom = function (min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            };
            //把局部对象暴露给window顶级对象,就成了全局的对象
            window.Random = new Random();
        })(window);//自调用构造函数的方式,分号一定要加上
    
    
        //产生小方块对象
        (function (window) {
            //console.log(Random.getRandom(0,5));
            //选择器的方式来获取元素对象
            var map = document.querySelector(".map");
    
            //食物的构造函数
            function Food(width, height, color) {
                this.width = width || 20;//默认的小方块的宽
                this.height = height || 20;//默认的小方块的高
                //横坐标,纵坐标
                this.x = 0;//横坐标随机产生的
                this.y = 0;//纵坐标随机产生的
                this.color = color;//小方块的背景颜色
                this.element = document.createElement("div");//小方块的元素
            }
    
            //初始化小方块的显示的效果及位置---显示地图上
            Food.prototype.init = function (map) {
                //设置小方块的样式
                var div = this.element;
                div.style.position = "absolute";//脱离文档流
                div.style.width = this.width + "px";
                div.style.height = this.height + "px";
                div.style.backgroundColor = this.color;
                //把小方块加到map地图中
                map.appendChild(div);
                this.render(map);
            };
            //产生随机位置
            Food.prototype.render = function (map) {
                //随机产生横纵坐标
                var x = Random.getRandom(0, map.offsetWidth / this.width) * this.width;
                var y = Random.getRandom(0, map.offsetHeight / this.height) * this.height;
                this.x = x;
                this.y = y;
                var div = this.element;
                div.style.left = this.x + "px";
                div.style.top = this.y + "px";
            };
            //实例化对象
            var fd = new Food(20, 20, "green");
            fd.init(map);
            console.log(fd.x + "====" + fd.y);
    
    
        })(window);
    </script>
    </body>
    </html>

总结：1：创建对象的三种方式

字面量的方式创建对象

自定义构造函数创建对象

系统构造函数创建对象

自定义构造函数 和工厂模式的区别

new 和返回值的区别

原型的引入：共享数据，节省内存

全局变量和局部变量通过window顶级对象来转换。