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

最新推荐文章于 2021-06-18 14:02:45 发布

推开世界的门

最新推荐文章于 2021-06-18 14:02:45 发布

阅读量163

点赞数 1

分类专栏：前端学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_38845858/article/details/88693140

版权

前端学习笔记专栏收录该内容

45 篇文章 5 订阅

订阅专栏

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顶级对象来转换。

推开世界的门

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端全栈学习第十五天-js高级-第一天

1：三种创建对象的方式2：原型引入3：如何把局部变量变成全局变量4：随机产生小方块1：三种方式创建的字面量的方式var per1 = { name: "哈哈", age: 12, eat: function () { console.log("大家好"); }};per1.eat();自定义构造函数注意点：自定义构造函...
复制链接

扫一扫