JS膏集01
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的更多相关文章
- JS膏集05
JS膏集05 1.复习 闭包内的函数也可以使用参数 闭包的建议写法 ) 2.浅拷贝 相当于把一个对象中的所有的内容复制一份给另一个对象.直接复制. 或者说,就是把一个对象的地址给了另一个对象,它们指向 ...
- JS膏集04
JS膏集04 1.apply和call方法 可以改变this的指向,可以用于函数的调用 apply和call方法中如果没有传入参数,或者传入null,那么调用该方法的函数中的this就是window ...
- JS膏集03
JS膏集03 1.复习 原型: * 在构造函数中有一个属性:prototype,是原型,也是一个对象,程序员使用的 * 在实例对象中有一个属性:__proto__,是原型,也是一个对象,浏览器使用的, ...
- JS膏集02
JS膏集02 1.复习 函数也是对象 2.贪食蛇案例 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 封装常用的js（Base.js）——【01】理解库，获取节点，连缀，
封装常用的js(Base.js)——[01]理解库,获取节点,连缀, youjobit07 2014-10-10 15:32:59 前言: 现如今有太多优秀的开源javascript库, ...
- JS自学笔记01
JS自学笔记01 1.开发工具 webstorm 2.js(javascript) 是一门脚本.解释性.动态类型.基于对象的语言 含三个部分: ECMAScript标准–java基本语法 DOM(Do ...
- Node.js abaike图片批量下载Node.js爬虫1.01版
//====================================================== // abaike图片批量下载Node.js爬虫1.01 // 1.01 修正了输出目 ...
- 【干货分享】前端面试知识点锦集01（HTML篇）——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...
- 使用PM2将Node.js的集群变得更加容易
介绍 众所周知,Node.js运行在Chrome的JavaScript运行时平台上,我们把该平台优雅地称之为V8引擎.不论是V8引擎,还是之后的Node.js,都是以单线程的方式运行的,因此,在多核心 ...
随机推荐
- HTML LIST 输入框自动查询追加框,自动过滤 HTML5
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp&q ...
- js中时间大小的比较
今天在前台做到一个需要比较两个日期大小的地方,乍一看,发现一个比较奇怪地地方: var t1 = new Date(2018,1,1), t2 = new Date(2018,1,1); consol ...
- Python_函数_参数
def 是函数的关键字,Python解释器一旦执行到def,默认不执行 def li(): n = 8 n +=1 print(n) li() li2 = li li2() 结果: 9 9 ret ...
- 使用java操作kudu
使用maven导入kudu <dependency> <groupId>org.apache.kudu</groupId> <artifactId>ku ...
- Date类的使用
[构造方法] 1)Date():无参构造 [代码] Date date = new Date(); System.out.println(date); 2)Date(long time):带参构造 [ ...
- 通过mysql-proxy映射外网访问内网数据库
配置教程: 转自:http://www.centoscn.com/mysql/2015/0107/4437.html centos安装mysql-proxy mysql-proxy的用处就不再说了 m ...
- ActiveMQ挂了，重启一直无法将所有实例启起来的问题
背景 2017年3月29日 下午2-3点时分,工单模块无法访问.跟踪日志发现,ActiveMQ连接不上导致整个工单模块瘫痪: 首先判断可能是系统需要然后尝试重启工单模块,重新启动工单模块,结果:重启 ...
- Noj - 在线强化训练1
1445 A 求n个整数的和 1564 B 判断一个数是否是完全数 1011 C 判素数(Prime number) 1566 D 输入一组整数,找出最小值 1200 E 判断三角 ...
- logback实践笔记
前言 每次看公司配置好的logback文件的时候,都不知道什么意思.导致有的时候,一些项目发到测试环境的时候,有的项目没有打印日志,自己都不知道哪里有问题.所以自己新建一个springboot项目 ...
- 上海市2019年公务员录用考试第一轮首批面试名单(B类)
上海市2019年公务员录用考试第一轮首批面试名单(B类) 2019-03-12 设置字体:大 中 小 职位序号 注册编号 职位序号 注册编号 职位序号 注册编号 职位序号 注册编号 1910565 5 ...