JS膏集01

时间：2022-08-29 18:56:21

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 的方式来创建对象

JS膏集01

上为工厂模式下为自定义构造函数模式

5、构造函数和实例对象之间的关系

自定义构造函数–实例化对象

构造函数–创建对象

实例对象是通过构造函数来创建的

//显示对象的结构

console.dir(per);

console.dir(Person);//有构造函数

console.log(per.constructor==Person);//true

JS膏集01

6、原型

1）构造函数创建对象存在的问题

JS膏集01

对象内包含相同的方法时，非常占用空间。

用原型根本解决该问题：数据共享，节省内存空间

通过原型来添加方法

function Person(name,age){

this.name="cc";

this.age=12;

};

Person.prototype.eat=function(){

};

图解：

JS膏集01

//案例：利用原型修改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>

JS膏集01

它们都是原型对象

实例对象中的_proto_属性和其构造函数中的prototype属性是一个东西

JS膏集01

JS膏集01

2）构造函数和实例对象之间的关系

通过构造函数是实例化对象，并初始化

构造函数，原型对象，实例对象之间的关系

3)使用原型共享数据

不需要共享的数据写在构造函数中，需要共享的数据写在原型中

JS膏集01

7、简单的原型语法

变量名.prototype={

//必须手动修改构造器的指向

constructor:上面的变量名,

属性1:"…",

属性2:"…",

方法1:function(){…

}

}；

8、原型对象中添加方法

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

9、

JS膏集01

10、为系统内置对象的原型对象中添加方法

很多实例对象调用的方法在实例对象中都没有，都是在其所在的构造函数中的原型存在的。

为内置对象中的原型对象添加方法是允许的。相当于改变了系统的源码

11、局部变量变成全局变量

JS膏集01

页面加载后，自调用函数的代码就执行完了。前一个括号传形参，后一个括号传实参。

图解：

JS膏集01

如何把局部变量变成全局变量？

把局部变量这一属性给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&period;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&period;js abaike图片批量下载Node&period;js爬虫1&period;01版

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

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

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

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

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

随机推荐

  1. 纯CSS照片墙

    css中transform参考CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate 效果图:

  2. FPGA学习笔记之格雷码、边沿检测、门控时钟

    一.格雷码 格雷码的优点主要是进位时只有一位跳变,误码率低. 1.二进制转格雷码 我们观察下表: 二进制码 格雷码 00 00 01 01 10 11 11 10 二进制码表示为B[],格雷码表示为G ...

  3. 绑定本地Service并与之通信-----之一

    import android.app.Service;import android.content.Intent;import android.os.Binder;import android.os. ...

  4. hdu 1329 Hanoi Tower Troubles Again&excl;

    找规律的题目an=an-1+(i+i%2)/2*2; ;}

  5. &lbrack;ffmpeg 扩展第三方库编译系列&rsqb; 关于libopenjpeg mingw32编译问题

    在mingw32如果想编译libopenjpeg 会比较麻烦 会出现undefined reference to `_imp__opj_destroy_cstr_info@4' 等错误 因此编译时候需 ...

  6. Web App、Hybrid App与Native App

    在这个App的时代,转战了前端,一直接触的都是pc, 离out不远了. 那么接下来,app是我接下来半年的重点,为什么是半年,因为时间不多了. 因为是前端,那么我的重心肯定是 Web App, Hyb ...

  7. 【AtCoder】【思维】【置换】Rabbit Exercise

    题意: 有n只兔子,i号兔子开始的时候在a[i]号位置.每一轮操作都将若干只兔子依次进行操作: 加入操作的是b[i]号兔子,就将b[i]号兔子移动到关于b[i]-1号兔子现在所在的位置对称的地方,或者 ...

  8. hdoj：2061

    #include <iostream> #include <string> using namespace std; int main() { int n,k; double ...

  9. systemctl用法及其语法

    1.确定是否安装systemd及其版本 # systemctl –version 2.确定systemd和systemctl的二进制文件和库文件的安装位置 # whereis systemd # wh ...

  10. Linux中日期的加减运算

    Linux中日期的加减运算 目录 在显示方面 在设定时间方面 时间的加减 正文 date命令本身提供了日期的加减运算. date 可以用来显示或设定系统的日期与时间. 回到顶部 在显示方面 使用者可以 ...

相关文章