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>

JS膏集01的更多相关文章

  1. JS膏集05

    JS膏集05 1.复习 闭包内的函数也可以使用参数 闭包的建议写法 ) 2.浅拷贝 相当于把一个对象中的所有的内容复制一份给另一个对象.直接复制. 或者说,就是把一个对象的地址给了另一个对象,它们指向 ...

  2. JS膏集04

    JS膏集04 1.apply和call方法 可以改变this的指向,可以用于函数的调用 apply和call方法中如果没有传入参数,或者传入null,那么调用该方法的函数中的this就是window ...

  3. JS膏集03

    JS膏集03 1.复习 原型: * 在构造函数中有一个属性:prototype,是原型,也是一个对象,程序员使用的 * 在实例对象中有一个属性:__proto__,是原型,也是一个对象,浏览器使用的, ...

  4. JS膏集02

    JS膏集02 1.复习 函数也是对象 2.贪食蛇案例 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  6. JS自学笔记01

    JS自学笔记01 1.开发工具 webstorm 2.js(javascript) 是一门脚本.解释性.动态类型.基于对象的语言 含三个部分: ECMAScript标准–java基本语法 DOM(Do ...

  7. Node.js abaike图片批量下载Node.js爬虫1.01版

    //====================================================== // abaike图片批量下载Node.js爬虫1.01 // 1.01 修正了输出目 ...

  8. 【干货分享】前端面试知识点锦集01（HTML篇）——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

  9. 使用PM2将Node.js的集群变得更加容易

    介绍 众所周知,Node.js运行在Chrome的JavaScript运行时平台上,我们把该平台优雅地称之为V8引擎.不论是V8引擎,还是之后的Node.js,都是以单线程的方式运行的,因此,在多核心 ...

随机推荐

  1. noip2012

    题解: 闲着无聊做了一遍noip2012 我觉得出题出的好奇怪啊... 为什么两道倍增两道二分答案??? 两天第一题: 第一天第一题傻逼普及组题没什么好说的了 第二天第一题你会扩欧就秒了 两天第二题: ...

  2. python全栈开发day77-博客主页

    1.文章分类 2.标签 3.归档 1) MySQL的日期格式化函数 DATE_FORMAT(字段名,格式) 2) Django ORM中如何执行SQL原生语句 (1) models.Article.o ...

  3. spark操作kudu之DML操作

    Kudu支持许多DML类型的操作,其中一些操作包含在Spark on Kudu集成 包括: INSERT - 将DataFrame的行插入Kudu表.请注意,虽然API完全支持INSERT,但不鼓励在 ...

  4. html5的audio实现高仿微信语音播放效果Demo

    HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  5. web项目部署以及放到ROOT目录下

    最近度过了一个国庆长假,好几天都没有写博客了! 发布这篇案例也是希望能帮助到像我一样的菜鸟o(*￣︶￣*)o,百度上面的资料都不怎么全.也没有人说明注意事项.总是这篇说一点.那个人也说补一点,最后自己 ...

  6. day 67 orm初识 {code_first/db_first}

    1,我们是先创建一个django项目,要同时把app带上, 然后再django项目里面把settings部分设置好,按照我们一开始创建django项目的时候设置的那些,csrf以及templates还 ...

  7. html-定位

    概述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. 关于go get安装git golang项目时报错的处理办法

    关于go get安装git golang项目时报错的处理办法 使用go get安装github上的项目时一般来说,不可避免会出错.各种错误的处理办法: 必须条件: 1.安装git并配置环境变量.下载地 ...

  9. PostgreSQL 在Ubuntu下如何修改postgres默认密码

    Step1: 切换用户为postgres sudo su postgres Step2: 用postgres连接postgreSQL psql -U postgres Step3: 修改postgre ...

  10. Vue-Router 学习笔记

    1:当router-link组件默认渲染成一个a标签,通过to属性指定目标地址,当对应的路由匹配成功,会自动给激活的标签设置class属性值 API 1:to:表示目标路由的链接,当被点击时,内部会立 ...