认识对象

1)认识对象

image.png

对象的语法

image.png

属性是否加引号

image.png

属性的访问

image.png
image.png

image.png

属性的更改

image.png

属性的创建

image.png

属性的删除

image.png

2)对象的方法

image.png

方法的调用

image.png

方法和函数

image.png

3)对象的遍历

image.png

for…in…循环

image.png

4)对象的深浅克隆

复习基本类型值和引用类型值

image.png

对象是引用类型值

image.png

  1. //例1
  2. var obj1 = {
  3.   a: 1,
  4.   b: 2,
  5.   c: 3
  6. };
  7. var obj2 = {
  8.   a: 1,
  9.   b: 2,
  10.   c: 3
  11. };
  12. console.log(obj1 == obj2);
  13. console.log(obj1 === obj2);
  14. //例2
  15. var obj3={
  16.   a:10,
  17. };
  18. var obj4 =obj3;
  19. obj3.a++;
  20.         console.log(obj4.a);

对象的浅克隆

image.png

  1.       var obj1 = {
  2.             a: 1,
  3.             b: 2,
  4.             c: [11, 233, 4]
  5.         };
  6.         var obj2 = {};
  7.         for (var k in obj1) {
  8.             //每遍历一个k属性，就给obj2也添加一个同名的k属性
  9.             //值和的obj1的k属性值相同
  10.             obj2[k] = obj1[k]
  11.         };
  12.         console.log(obj2);
  13.         //为什么叫浅克隆呢？比如c属性的值是引用类型值，那么本质上obj1和obj2的c属性是内存中的同一个数组，并没有被克隆分开
  14.         obj1.c.push(99);
  15.         console.log(obj2);
  16.         console.log(obj1.c == obj2.c);

对象的深克隆

image.png

  1.         var obj1 = {
  2.             a: 1,
  3.             b: 2,
  4.             c: [11, 233, {
  5.                 m: 55,
  6.                 n: 66,
  7.                 p: [77, 88]
  8.             }]
  9.         };
  10.         function deepClone(o) {
  11.             //要判断o是对象还是数组
  12.             if (Array.isArray(o)) {
  13.                 //数组
  14.                 var result = [];
  15.                 for (var i = 0; i < o.length; i++) {
  16.                     result.push(deepClone(o[i]));
  17.                 }
  18.             } else if (typeof o == 'object') {
  19.                 //对象
  20.                 var result = [];
  21.                 for (var k in o) {
  22.                     result[k] = deepClone(o[k]);
  23.                 }
  24.             } else {
  25.                 //基本类型值
  26.                 var result = o;
  27.             }
  28.             return result;
  29.         }
  30.         var obj2=deepClone(obj1);
  31.         console.log(obj2);
  32.         console.log(obj1.c==obj2.c);

认识函数的上下文

image.png

函数的上下文

image.png

函数的this

image.png
image.png

函数的上下文由调用方式决定

image.png

  1.         var obj = {
  2.             a: 1,
  3.             b: 2,
  4.             fu: function () {
  5.                 console.log(this.a + this.b);
  6.                 console.log(this===window);
  7.                 console.log(this===window);
  8.             }
  9.         }
  10.        var fu= obj.fu;
  11.        fu();

1)上下文规则1

image.png

2)上下文规则2

image.png
image.png

3)上下文规则3

image.png
image.png

类数组对象

image.png
image.png

4)上下文规则4

image.png
image.png

5)上下文规则5

image.png

image.png

6)上下文规则6

image.png

案例1

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 200px;
  12.             height: 200px;
  13.             float: left;
  14.             border: 1px solid #000;
  15.             margin-right: 10px;
  16.             background-color: #fff;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div id="box1"></div>
  23.     <div id="box2"></div>
  24.     <div id="box3"></div>
  25.     <script>
  26.         function setColorToRed(o) {
  27.             this.style.backgroundColor = 'red';
  28.         }
  30.         var box1 = document.getElementById('box1');
  31.         var box2 = document.getElementById('box2');
  32.         var box3 = document.getElementById('box3');
  34.         box1.onclick = setColorToRed;
  35.         box2.onclick = setColorToRed;
  36.         box3.onclick = setColorToRed;
  38.     </script>
  41. </body>
  43. </html>

案例2

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         div {
  11.             width: 200px;
  12.             height: 200px;
  13.             float: left;
  14.             border: 1px solid #000;
  15.             margin-right: 10px;
  16.             background-color: #fff;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div id="box1"></div>
  23.     <div id="box2"></div>
  24.     <div id="box3"></div>
  25.     <script>
  26.         function setColorToRed(o) {
  27.             //备份上下文
  28.             var self=this;
  29.             setTimeout(function(){
  30.                 self.style.backgroundColor = 'red';
  31.             },2000)         
  32.         }
  34.         var box1 = document.getElementById('box1');
  35.         var box2 = document.getElementById('box2');
  36.         var box3 = document.getElementById('box3');
  38.         box1.onclick = setColorToRed;
  39.         box2.onclick = setColorToRed;
  40.         box3.onclick = setColorToRed;
  42.     </script>
  45. </body>
  47. </html>

7)call和apply

image.png
image.png

  1. function sum() {
  2.             console.log(this.c + this.m + this.e);
  3.         };
  4.         var xiaoming = {
  5.             c: 100,
  6.             m: 90,
  7.             e: 70,
  8.         }
  9.         sum.apply(xiaoming);
  10.         sum.call(xiaoming);

call和apply的区别

image.png

到底是call还是apply？

image.png

构造函数

1)用new调用函数的四步走

image.png

用new操作符调用函数

image.png

四步走详解

image.png

第一步

image.png

第二步

image.png

第三步

image.png

第四步

image.png

2)构造函数

什么是构造函数

image.png
image.png
image.png

构造函数名称首字母约定大写

image.png

构造函数中的this不是函数本身

image.png

尝试为对象添加方法

image.png

3)类和实例

类好比是“蓝图

image.png

实例是具体的对象

image.png

构造函数和“类”

image.png
image.png

原型和原型链

1)prototype和原型链查找

什么是prototype

image.png
image.png
image.png

构造函数的prototype是实例的原型

image.png

原型链查找

image.png
image.png
image.png
原型链的遮蔽
image.png

hasOwnProperty

image.png

in

image.png

2)在prototype上添加方法

之前，我们将方法写到了对象身上

image.png
image.png
image.png

方法要写到prototype上

image.png

  1.         function People(name, age, sex) {
  2.             this.name = name;
  3.             this.age = age;
  4.             this.sex = sex;
  5.         }
  6.         People.prototype.sayHello = function () {
  7.             console.log('我是' + this.name + '我今年' + this.age + '了');
  8.         };
  9.         People.prototype.growup = function () {
  10.             this.age++;
  11.         }
  13.         var xiaoming = new People('小明', 12, '男');
  14.         var xiaohong = new People('小红', 11, '女');
  16.         console.log(xiaohong.sayHello === xiaoming.sayHello);
  18.         xiaoming.sayHello();
  19.         xiaohong.sayHello();
  20.         xiaoming.growup();
  21.         xiaoming.growup();
  22.         xiaoming.growup();
  23.         xiaoming.growup();
  24.         xiaoming.growup();
  25.         xiaoming.sayHello();

3)原型链的终点

image.png

关于数组的原型链

image.png

4)继承

两个无关的类

image.png

People类和Student类的关系

image.png

继承

image.png

更多的继承关系举例

image.png

JavaScript中如何实现继承

image.png

通过原型链实现继承

image.png

上升到面向对象

image.png

1)上升到面向对象小案例1

小案例

image.png
image.png

TrafficLight类

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         #box img {
  11.             width: 80px;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <div id="box"></div>
  18.     <script>
  19.         //定义红绿灯类
  20.         function Trafficlight() {
  21.             //颜色属性，一开始都是红色
  22.             //红色1、黄色2，绿色3
  23.             this.color = 1;
  24.             //调用自己的初始化方法
  25.             this.init();
  26.             //绑定监听
  27.             this.bindEvant();
  28.         };
  29.         //初始化方法
  30.         Trafficlight.prototype.init = function () {
  31.             //创建自己的dom
  32.             this.dom = document.createElement('img');
  33.             //设置src属性
  34.             this.dom.src = 'images/' + this.color + '.jpg';
  35.             box.appendChild(this.dom);
  36.         };
  37.         //绑定监听
  38.         Trafficlight.prototype.bindEvant = function () {
  39.             //备份上下文,这里的this是js的实例
  40.             var self = this;
  41.             //当自己的的dom被点击的时候
  42.             this.dom.onclick = function () {
  43.                 //当被点击的时候，调用自己的changeColor方法
  44.                 self.changeColor();
  45.             };
  46.         }
  47.         //改变颜色
  48.         Trafficlight.prototype.changeColor = function () {
  49.             //改变自己的coloe属性，自己管理自己
  50.             this.color++;
  51.             if (this.color == 4) {
  52.                 this.color = 1;
  53.             };
  54.             //
  55.             this.dom.src = 'images/' + this.color + '.jpg';
  56.         }
  57.         //得到盒子
  58.         var box = document.getElementById('box');
  60.         //实例化100个
  61.         var count = 10;
  62.         while (count--) {
  63.            var s= new Trafficlight();
  64.            console.log(s);
  65.         }
  67.     </script>
  69. </body>
  71. </html>

2)上升到面向对象小案例2

Ball类的属性

image.png

Ball类的方法

image.png

如何实现多个小球动画

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         body {
  11.             background-color: rgb(10, 9, 9);
  12.         }
  14.         .ball {
  15.             position: absolute;
  16.             border-radius: 50%;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <script>
  23.         //小球类
  24.         function Ball(x, y) {
  25.             //属性x、y表示的是圆心的坐标
  26.             this.x = x;
  27.             this.y = y;
  28.             //半径属性
  29.             this.r = 20;
  30.             //透明度
  31.             this.opacity = 1;
  32.             //小球背景颜色,从颜色数组中随机选择一个颜色
  33.             this.color = colorArr[parseInt(Math.random() * 6)];
  34.             //这个小球的x增量和y的增量,使用do while语句，防止dx和dy都是0
  35.             do {
  36.                 this.dX = parseInt(Math.random() * 20) - 10;
  37.                 this.dY = parseInt(Math.random() * 20) - 10;
  39.             } while (this.dX == 0 && this.dY == 0);
  41.             //初始化方法
  42.             this.init();
  43.             //把自己推入数组，这里的this不是类本身，而是实例
  44.             ballArr.push(this);
  45.         }
  46.         Ball.prototype.init = function () {
  47.             //创建自己的dom
  48.             this.dom = document.createElement('div');
  49.             this.dom.className = 'ball';
  50.             this.dom.style.width = this.r * 2 + 'px';
  51.             this.dom.style.height = this.r * 2 + 'px';
  52.             this.dom.style.left = this.x - this.r + 'px';
  53.             this.dom.style.top = this.y - this.r + 'px';
  54.             this.dom.style.backgroundColor = this.color;
  55.             //上树
  56.             document.body.appendChild(this.dom);
  57.         }
  58.         //更新
  59.         Ball.prototype.update = function () {
  60.             //位置改变
  61.             this.x += this.dX;
  62.             this.y -= this.dY;
  63.             //半径改变
  64.             this.r += 0.2;
  65.             //透明度改变
  66.             this.opacity -= 0.05;
  67.             this.dom.style.width = this.r * 2 + 'px';
  68.             this.dom.style.height = this.r * 2 + 'px';
  69.             this.dom.style.left = this.x - this.r + 'px';
  70.             this.dom.style.top = this.y - this.r + 'px';
  71.             this.dom.style.opacity = this.opacity;
  72.             //当透明度小于0的时候，就需要从数组中删除自己，DOM元素也要删掉自己
  73.             if (this.opacity < 0) {
  74.                 //从数组中删除自己
  75.                 for (var i = 0; i < ballArr.length; i++) {
  76.                     if (ballArr[i] == this) {
  77.                         ballArr.splice(i, 1);
  78.                     }
  79.                 }
  80.                 //还要删除自己的dom
  81.                 document.body.removeChild(this.dom);
  82.             };
  83.         }
  84.         //把所有的小球实例都放在同一个数组
  85.         var ballArr = [];
  86.         //初始颜色数组
  87.         var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666',
  88.             '#CC3399', '#FF6600'];
  89.         new Ball(200, 200);
  90.         //定时器,负责更新所有的小球实例
  91.         setInterval(function () {
  92.             //遍历数组，调用调用的update方法
  93.             for (var i = 0; i < ballArr.length; i++) {
  94.                 ballArr[i].update();
  95.             }
  96.         }, 20)
  97.         //鼠标指针的监听
  98.         document.onmousemove = function (e) {
  99.             //得到鼠标指针的位置
  100.             var x = e.clientX;
  101.             var y = e.clientY;
  102.             new Ball(x, y);
  103.         }
  104.     </script>
  106. </body>
  108. </html>

JS的内置对象

1)包装类

image.png

包装类总结

image.png

2)Math对象

以学过的方法

image.png

四舍五入Math.round()

image.png

四舍五入到小数点后某位

image.png

  1. console.log(Math.round(3.59));
  3. var a=3.7554;
  4. console.log(Math.round(a*100)/100);

Math.max()和Math.min()

image.png

如何利用Math.max()求数组最大值

image.png

  1. console.log(Math.max(1,2,3,4));
  4.         var arr=[2,4,2,4,35,6,356456,24354,25354,4656];
  5.         console.log(Math.max.apply(null,arr));
  6.         //在今后学es6之后，求数组最大值可以
  7.         console.log(Math.max(...arr));

随机数Math.random()

image.png

  1.         console.log(Math.random());
  2.         console.log(Math.random());
  3.         console.log(Math.random());
  5.         //如果要生成[a.b]之间的整数，就要使用公式
  7.         console.log(parseInt(Math.random()*6+3));

3)Date对象

image.pngimage.png

日期对象的常见的方法

image.png

时间戳

image.png
image.png

小案例：倒计时小程序

image.png

  1.     <h1>2022年高考倒计时</h1>
  2.     <h2 id="info"></h2>
  3.     <script>
  4.         var info = document.getElementById('info');
  6.         setInterval(function () {
  7.             //现在的日期
  8.             var nd = new Date();
  9.             //目标的日期，5表示6月
  10.             var td = new Date(2022, 5, 7);
  11.             var s = 9 * 3600 * 1000;
  12.             //毫秒差
  13.             var diff = td - nd + s;
  15.             //把diff换算成天、小时、分钟、秒
  16.             var day = parseInt(diff / (1000 * 60 * 60 * 24));
  17.             var hours = parseInt(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
  18.             var minutes = parseInt(diff % (1000 * 60 * 60) / (1000 * 60));
  19.             var seconds = parseInt(diff % (1000 * 60 * 60) % (1000 * 60) / 1000);
  20.             var se=diff-day*1000*3600*24-hours*3600*1000-minutes*1000*60-seconds*1000;
  22.             info.innerText = day + '天' + hours + '时' + minutes + '分' + seconds + '秒';
  23.         }, 100);
  26.     </script>