JS膏集01

最新推荐文章于 2023-02-09 14:46:40 发布

adjwefkgpw

最新推荐文章于 2023-02-09 14:46:40 发布

阅读量192

点赞数

分类专栏：前端自学笔记

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

41 篇文章 0 订阅

订阅专栏

JS膏集01

1、动态页面：
向服务器发送请求，服务器那边没有页面，动态生成后，返回给客户端
由html/css/js组成。
js还不是面向对象的语言，是基于对象的语言。js中没有类的概念，js的继承基于原型。
2、三种创建对象的方式
对象特指某个事物，具有属性和方法
特征：属性
行为：方法

1、字面量的方式
var per1={
name:"cc".
age:20,
eat:function(){
...
}
}
2、调用系统的构造函数
var per2=new Object();
per2.name="ccc";
per2.age="12";
per2.eat=function(){
...
};
以上两种方式所创建的对象是无法确定是哪种类型的，Object除外
3、自定义构造函数的方式
function Person(name,age,sex){
this.name=name;
this.age=age;
this.play=function(){
console.log("games");
};
}
var per3=new Person("cc",18);

4、工厂模式和自定义构造函数的区别
共同点：都是对像，都可以传入参数
工厂模式：
函数名首字母小写createObject
函数体内有new
有返回值
new之后的对象是当前的对象
直接调用函数就可以创建对象

自定义构造函数：
函数名首字母是大写
没有new
没有返回值
this是当前对象
通过new 的方式来创建对象
在这里插入图片描述
上为工厂模式下为自定义构造函数模式
5、构造函数和实例对象之间的关系
自定义构造函数–实例化对象
构造函数–创建对象
实例对象是通过构造函数来创建的

//显示对象的结构
console.dir(per);
console.dir(Person);//有构造函数
console.log(per.constructor==Person);//true

在这里插入图片描述

6、原型
1）构造函数创建对象存在的问题
在这里插入图片描述
对象内包含相同的方法时，非常占用空间。
用原型根本解决该问题：数据共享，节省内存空间
通过原型来添加方法

function Person(name,age){
this.name="cc";
this.age=12;
};
Person.prototype.eat=function(){

};

图解：
在这里插入图片描述

//案例：利用原型修改div颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 400px;
            background-color: red;
        }
    </style>

</head>
<body>
<div id="dv">
</div>
<input type="button" id="btn" value="change"/>

<script>
    function ChangeColor(btnId, dvId, color) {
        this.btnObj = document.getElementById(btnId);
        this.dvObj = document.getElementById(dvId);
        this.color = color;
    }

    ChangeColor.prototype.init = function () {
        var that = this;
        this.btnObj.onclick = function (ev) {
            that.dvObj.style.backgroundColor = that.color;
        };
    };
    var cc=new ChangeColor("btn","dv","blue");
    cc.init();
</script>

</body>
</html>

在这里插入图片描述
它们都是原型对象
实例对象中的_proto_属性和其构造函数中的prototype属性是一个东西

2）构造函数和实例对象之间的关系
通过构造函数是实例化对象，并初始化
构造函数，原型对象，实例对象之间的关系

3)使用原型共享数据
不需要共享的数据写在构造函数中，需要共享的数据写在原型中
在这里插入图片描述

7、简单的原型语法
变量名.prototype={
//必须手动修改构造器的指向
constructor:上面的变量名,
属性1:"…",
属性2:"…",
方法1:function(){…
}
}；

8、原型对象中添加方法
实例对象中的方法可以相互调用，原型中的方法可以相互访问

9、
在这里插入图片描述

10、为系统内置对象的原型对象中添加方法
很多实例对象调用的方法在实例对象中都没有，都是在其所在的构造函数中的原型存在的。
为内置对象中的原型对象添加方法是允许的。相当于改变了系统的源码

11、局部变量变成全局变量
在这里插入图片描述
页面加载后，自调用函数的代码就执行完了。前一个括号传形参，后一个括号传实参。
图解：

如何把局部变量变成全局变量？
把局部变量这一属性给window对象即可。

12、产生随机数对象

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    </style>

</head>
<body>


<script>
    // 通过自调用函数产生一个随机数对象，在自调用
    // 函数外面，调用该随机数对象方法产生随机数
    (function (window) {
        //产生随机数的过早函数


    }

    //在原型对象中添加构造方法
    Random.prototype.getRandom = function () {
        return Math.floor(Math.random * () * 5);
    };
    window.random = new Random();
    //或
    window.Random=Random;//把random对象暴露给顶级对象window，外部可以直接使用这个对象
    )

    })
    (window);
    var rm = random;
    console.log(rm.getRandom());
    //或
    var rm=new Random();
    console.log(rm.getRandom());
</script>

</body>
</html>

//案例：在页面中产生随机小方块
<!DOCTYPE html>
<html lang="en">
<head>
    <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.Random = new Random();
    })(window);
    //产生小方块对象
    (function (window) {
        //选择器的方式来获取元素对象
        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;//这个this和上面的this指代的是同一个实例对象
            div.style.position = "absolute";
            div.style.width = this.width + "px";
            div.style.height = this.height + "px";
            div.style.backgroundColor = this.color;
            //把小方块加到地图中
            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);

    })
    (window);
</script>
</body>
</html>

adjwefkgpw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS膏集01

JS膏集011、动态页面：向服务器发送请求，服务器那边没有页面，动态生成后，返回给客户端由html/css/js组成。js还不是面向对象的语言，是基于对象的语言。js中没有类的概念，js的继承基于原型。2、三种创建对象的方式对象特指某个事物，具有属性和方法特征：属性行为：方法1、字面量的方式var per1={name:&quot;cc&quot;.age:20,eat:function()...
复制链接

扫一扫

专栏目录