js高级笔记

最新推荐文章于 2022-11-25 12:15:05 发布
最新推荐文章于 2022-11-25 12:15:05 发布
阅读量153 收藏
点赞数
分类专栏： js复习

学习笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .dv {
            width: 400px;
            height: 400px;
            background: pink;
        }

        .map {
            width: 800px;
            height: 600px;
            background: #ccc;
            position: relative;
        }
    </style>
</head>
<body>

<div class="map"></div>

<input type="button" value="改变" id="btn"/>

<div class="dv" id="dv"></div>

<script>
    //        三种创建对象方式
    //字面量方式
    var per = {
        name: 'liu',
        sex: '男',
        age: '18',
        eat: function () {
            console.log('吃饭啊');
        }
    }

    //调用系统方式生成
    var persen = new Object()
    persen.name = 'liuliang'
    persen.age = '18'
    persen.sex = '女'
    persen.eat = function () {
        console.log('我要吃饭啦~~ ');
    }

    //自定义常见对象方式
    function Person(name, sex, age) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.eat = function () {
            console.log('我爱吃饭饭');
        };
    }

    //        工厂模式创建对象
    function createObject(name, sex, age) {
        var obj = new Object();
        obj.name = name;
        obj.sex = sex;
        obj.age = age;
        obj.eat = function () {
            console.log('吃饭吃饭~~')
        }
        return obj;
    }

    function CreateObject(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.eat = function () {
            console.log('吃吃吃~~~')
        }
    }

    //体会面向对象思想  案例  点击按钮改变div大小背景
    function ChangeStyle(btnObj, dvObj, json) {
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
    }

    ChangeStyle.prototype.init = function () {
        var that = this;
        this.btnObj.onclick = function () {
            for (var key in that.json) {
                that.dvObj.style[key] = that.json[key];
            }
        }
    }

    var json = {
        'width': '600px',
        'height': '600px',
        'background': 'green'
    };
    var change = new ChangeStyle(document.getElementById('btn'), document.getElementById("dv"), json);
    change.init();

    //利用原型共享数据
    function Student(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Student.prototype.eat = function () {
        console.log('吃饭');
    }
    Student.prototype.study = function () {
        console.log('做饭');
    }

    //    var stu = new Student('刘宣亮', '20', '男');
    //    console.dir(stu);
    //    console.dir(Student);

    //原型的简单语法
    function People(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    People.prototype = {
        constructor: People,
        height: '80',
        width: '100',
        eat: function () {
            console.log('我要吃饭啊~~')
        },
        study: function () {
            console.log('我要学士')
        }
    };

    //    var ple = new People('段飞', 20, '男')
    //    ple.eat();
    //    ple.study();
    //    console.dir(People)
    //    console.dir(ple)

    //原型中的方法是可以相互访问的
    function Animal(name, age) {
        this.name = name;
        this.age = age;
    }

    //原型中添加方法
    Animal.prototype.eat = function () {
        console.log('我在吃饭');
        this.play();
    }
    Animal.prototype.play = function () {
        console.log('我在玩耍');
        this.sleep();
    }
    Animal.prototype.sleep = function () {
        console.log('我在睡觉')
    }

        //var dog = new Animal('龙', '18')
        //dog.eat();

        //贪吃蛇 地图  和食物
        //产生随机数对象
    (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.color = color;
            this.x = 0;
            this.y = 0;
            this.element = document.createElement('div');
        }

        //初始化小方块的显示的效果及位置---显示地图上
        Food.prototype.init = function (map) {
            var div = this.element;

            div.style.position = 'absolute';
            div.style.width = this.width + 'px';
            div.style.height = this.height + 'px';
            div.style.backgroundColor = this.color;
            //小方块添加到map地图中
            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, 'red');
        fd.init(map)

    }(window));

</script>
</body>
</html>

 

aaron9185
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS高级笔记
10-28
JS高级笔记，学习js的朋友可以参考下。
JavaScript高级
weixin_44319497的博客
11-14 95
DOM简单学习：为了满足案例要求 * 功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象 * 操作Element对象： 1. 修改属性值： 1. 明确获取的对象是哪一个？ 2. 查看API文档，找其中有哪些属性可以设置 2. 修改标签体内容： * 属性：inne...
JavaScript高级 笔记
踩的坑越多，经验越多
09-16 2966
JavaScript高级 学习笔记总结
js高级学习笔记
最新发布
yifan6688的博客
11-25 210
1、全局作用域作用域链 嵌套关系的作用域串联起来形成了作用域链 相同作用域链中按着从小到大的规则查找变量 子作用域能够访问父作用域，父级作用域无法访问子级作用域（就近原则）2、 闭包3、变量提升变量提升是 JavaScript 中比较“奇怪”的现象，它允许在变量声明之前即被访问4、动态参数arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参5、剩余参数借助 ... 获取的剩余实参6、箭头函数7、解构赋值8、构造函数。
js高级学习笔记(详细)
aniudunaichiji的博客
05-16 639
1.基础总结深入 1.数据类型 1.ES6中有8种数据类型： 基本数据类型： String：任意字符串 Number：任意的数字 boolean：true/false bigInt undefined：undefined null：null Symbol 引用数据类型： Object 普通对象，数组，正则，日期，Math数学函数等都属于Object； 2.判断 typeof：返回数据类型的字符串表达，首字母都是小写 可以判断：undefined,数值,字符串,布尔值,symbol（基本数据类型不
javascript高级 笔记
03-06
这份"javascript高级 笔记"涵盖了从JavaScript基础进阶到高级特性的深入理解，旨在帮助那些已经掌握了JavaScript基础知识的学习者进一步提升技能。 一、JavaScript高级特性 在JavaScript高级阶段，你会接触到许多...
JavaScript高级笔记.md
05-31
JS高级笔记
javascript高级学习笔记整理
12-04
本文将深入探讨JavaScript的一些高级特性，包括面向对象的实现、数据类型以及复杂类型。 首先，我们来看JavaScript中的面向对象实现。在提供的代码示例中，`Person` 和 `Student` 是两个示例函数，它们作为构造函数...
js js高级笔记
PrimaryColor
07-30 259
js高级 js变量提升和函数提升(预解析) 如果通过var声明变量: 如果一个声明的变量在函数体内，那么它的作用域就是函数内部。如果是在全局环境下声明的，那么它的作用域就是全局 ES6之前没有块级作用域，只有函数作用域和全局作用域，ES6中提供了块级作用域 函数内部的变量会被提升到函数的头部，函数在解析执行的时候，先进行变量声明处理，然后在运行函数内部的代码 函数内部如果没有变量声明，那么该变量就是全局变量(如果函数内部没有var，该变量就是全局变量) 变量和赋值语句一起书写，在js引擎解析时，会将其
JavaScript 高级笔记
qq_43645678的博客
10-07 659
JavaScript高级笔记
JS高级学习笔记
qq_56088882的博客
08-23 176
JS高级学习笔记。
js高级笔记-1
Mllmlu的博客
04-09 119
js的组成 1.DOM-----操作标签 2.BOM-----操作浏览器 3.ECMAScript-----语法类：函数，对象… *js不是面向对象，基于对象 函数的作用 具有封装性 基本对象的创建 var student={ name:'王大陆', age:25, eat:function(){ console.log('晚上吃点什么'); } } console.log(student); student.eat(); 工厂的方式创建对象 // 工厂的方式创建对象-----相当于是用函数封
js 高级笔记 （函数高级）
努力的博客
12-03 720
文章目录原型原型1. 函数的prototype属性2. 给原型对象添加属性（一般都是方法） 原型 原型 1. 函数的prototype属性 每个函数都有一个prototype属性，他默认指向一个Object空对象（即称为：原型对象） 原型对象中有一个属性constructor，它指向函数对象 2. 给原型对象添加属性（一般都是方法） 作用L函数的所有实例对象自动拥有原型中的属性（方法） ...
JavaScript高级学习笔记（总结）
weixin_43294092的博客
04-16 1446
JavaScript简称:JS ​ * JS分三个部分: ​ * 1 ECMAScript标准—基础的语法 ​ * 2 DOM Document Object Model 文档对象模型 ​ * 3 BOM Browser Object Model 浏览器对象模型 ​ * 什么是JS? ​ * 是一门脚本语言 ​ * 是一门解释性语言 ​ * 是一门...
JavaScript高级程序设计核心笔记-ECMAScript与DOM解析
"《JavaScript高级程序设计》笔记涵盖了JavaScript的基础到高级概念，包括其历史、实现方式、在HTML中的使用，以及基本语法、数据类型、操作符、语句和最佳实践。JavaScript起源于Netscape公司的开发，由ECMAScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值