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. .NET MVC Filter异常处理

    MVC程序中自带的HandleErrorAttribute,来处理异常,不在显示黄页.前提是在web.config 中 system.web中关闭customerError选项. 但是很多情况下调试异 ...

  2. js 小数相加

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  3. Python的名字绑定

    Python的名字绑定 在Python中,对象是通过名字进行关联和引用的.Python通过名字绑定操作来引入名字. Python中的所谓的代码块就是一段作为执行单元的程序.比如:模块.函数.类定义.在 ...

  4. Think_php入口文件配置

    think_php的入口模式有两种方式 1,一个入口文件对应一个项目应用 2,一个入口文件对应所有项目应用 默认情况,入口文件只需要require thinkphp文件夹就可以.比如thinkphp文 ...

  5. CSS3-给网页添加图片

    给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...

  6. EF 执行顺序--先删除在更新和添加

    public void AcceptAllChanges() { if (this.ObjectStateManager.SomeEntryWithConceptualNullExists()) { ...

  7. malformed or corrupted AST file。。。module file out of date&amp;#39;

    今天打开了曾经用的一个项目,(曾经的程序是对的)弹出了两个红框 malformed or corrupted AST file...module file out of date'. 这种结构. 解决 ...

  8. Bootstrap入门(二十六)JS插件3:滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  9. 6.Git基础-远程仓库的使用

    远程仓库是指托管在因特网或其他网络中的你的项目的版本库.比如你在GitHub中托管的代码库,就是远程仓库. 1.查看远程仓库 --  git remote  git remote 查看已经配置的远程仓 ...

  10. Linux 中Ctrl + s 的作用

    在Linux下使用vim编辑程序时,常常会习惯性的按下Ctrl + s保存文件内容.殊不知,这一按不紧,整个终端再也不响应了. 事实上Ctrl + s在终端下是有特殊用途的,那就是暂停该终端,这个功能 ...