JavaScript高级——01

目录

1.构造函数和实例对象之间的关系

2.原型的引入

3.通过简单例子体会面向过程和面向对象的编程思想

4.构造函数、实例对象、原型对象三者之间的关系

5.利用原型共享数据

6.原型中的方法

7.实例对象使用属性和方法的层层搜索

8.为内置对象添加原型方法

9.把局部变量变成全局变量

9.1 产生随机数对象

9.2 随机小方块

---

动态页面:（这两种都是）
1.页面由html+css+Js组成
2.向服务器发送请求，服务器那边没有页面，是动态生成，返回给客户端的

1.构造函数和实例对象之间的关系

判断这个变量(对象)是不是某个构造函数的实例：

1.  通过构造器的方式判断：实例对象.构造器==构造函数名字

以下三句等价：

console.log(per.constructor===Person);【因为__proto__不是标准属性，所以可以省略】

console.log(per.__proto__.constructor===Person);

console.log(per.__proto__.constructor===Person.prototype.constructor);

2.通过instanceof判断： 实例对象 instanceof 构造函数名字（尽量用这种方式）

console.log(per instanceof Person);

2.原型的引入

本身在构造函数中定义的属性和方法，当实例化对象的时候，实例对象中的属性和方法都是在自己的空间中存在的，如果是多个

对象，这些属性和方法都会在单独的空间中存在，浪费内存空间。

所以引入原型，通过原型来添加方法，解决数据共享，节省内存空间（原型的作用之一）

原因：理解构造函数、实例对象、原型对象三者之间的关系

3.通过简单例子体会面向过程和面向对象的编程思想

面向对象的编程思想：根据需求，抽象出相关的对象，总结对象的特征和行为，把特征变成属性，行为变成方法；然后定义构造

函数，实例化对象，通过对象调用属性和方法，完成相应的需求。

4.构造函数、实例对象、原型对象三者之间的关系

实例对象中有"__proto__"这个属性，叫原型，也是一个对象，这个属性是给浏览器使用，不是标准的属性：__proto__(有的浏览器支持，有的不支持，ie8就不支持)，可以叫原型对象

构造函数中有"prototype"这个属性，叫原型，也是一个对象，这个属性是给程序员使用，是标准的属性：prototype，可以叫原型对象

实例对象的__proto__和构造函数的prototype相等//true

又因为实例对象是通过构造函数来创建的，构造函数中有原型对象prototype

所以实例对象的__proto__指向了构造函数的原型对象prototype

原型就是属性，而这个属性也是一个对象

正常的写法：实例对象.__proto__才能访问到构造函数中的prototype中的属性或者方法，但__proto__不是标准的属性

所以： per.__proto__.eat();直接用 per.eat();即可

1. 构造函数的prototype属性所指向的对象将其称为原型
2. 原型对象中,有一个constructor属性又指回其构造函数本身
3. 实例对象的原型对象(__proto__)指向的是其构造函数的原型对象
4. 在原型中添加的方法，是可以被实例对象直接访问的，原型里面的所有属性和方法会连接到其对应的构造函数的实例上（原因：3）

参考链接：深入理解Javascript中的原型、原型链、继承

5.利用原型共享数据

6.原型中的方法

7.实例对象使用属性和方法的层层搜索

8.为内置对象添加原型方法

通过原型为内置对象添加原型的属性或者方法，原因：

系统的内置对象的属性和方法可能不满足现在需求，所以，可以通过原型的方式加入属性或者方法，为了方便开发

9.把局部变量变成全局变量

9.1 产生随机数对象

9.2 随机小方块

<div class="map"></div>
<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 () {
        //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;//(map宽/小方块宽)*小方块宽
            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);
    })();
</script>