锡山草木间

面向对象——步入JavaScript高级阶段的敲门砖

前言
一、认识对象
- - 1.什么是对象
  - 2.对象的方法
  - 3.对象的遍历
  - 4.对象的深浅克隆
二、认识函数上下文
- - 1.函数的上下文规则 ★
  - 2.call和apply ★
三、构造函数
- - 1.用new操作符调用函数
  - 2.类与实例
  - 3.构造函数和'类"
四、原型和原型链
- - 1.prototype和原型链查找 ★
  - 2.在prototype上添加方法
  - 3.原型链的终点
  - 4.继承 ★
五、上升到面向对象
- - 1.红绿灯小案例
  - 2.炫彩小球小案例
六、JS的内置对象
- - 1.包装类
  - 2.Math对象 ★
  - 3.Date对象 ★
七、继承与内置构造函数[拓展]

前言

在计算机编程中，对象是一种非常重要的概念。它可以帮助我们更好地组织和管理数据，使代码更加模块化和可复用。对象可以存储多个键值对，每个键值对表示一个属性，属性可以是基本类型的值或者其他对象。通过对象，我们可以定义和调用方法，对属性进行操作或者实现特定的功能。

面向对象编程的思想强调通过对象和类来组织和管理代码，使其更加易于理解和维护。实际上，将问题和解决方案分解为对象是一种非常自然和直观的方式，也是实现代码复用和模块化的关键。

在接下来的学习中，我们将更加深入地认识和掌握这些概念，并通过小案例来实践和巩固所学的知识。让我们一起展开学习之旅吧！

一、认识对象

1.什么是对象

概念: 对象(object)是“键值对”的集合，表示属性和值的映射关系
语法: k和v之间用冒号分隔，每组k:v之间用逗号分隔，最后一个k:v对后可以不书写逗号
- 如果对象的属性键名不符合JS标识符命名规范，则这个键名必须用引号包裹
- 如: 'favorite-book':'舒克和贝塔'属性名中有短横，不符合]S标识符命名规范，属性名必须用引号包裹

对象属性的访问

可以用“点语法”访问对象中指定键的值

xiaoming.name;//小明
xiaoming.age;//12
xiaoming.hobbys;//['足球'，游泳'，'编程]

如果属性名不符合]S标识符命名规范，则必须用方括号的写
法来访问
```
xiaoming['favorite-book'];//舒克和贝塔
```

如果属性名以变量形式存储，则必须使用方括号形式

var obj = {
	a:1,
	b:2,
	C:3
};
//属性名用变量存储
var key ='b';
console.log(obj.key); //undefined
console.log(obj[key]);//2

属性的更改

直接使用赋值运算符重新对某属性赋值即可更改属性

var obj ={
	a:10
}
obj.a = 30;  //将obj里a的值改成了30
ob].a++;    // a = 31

属性的创建
- 如果对象本身没有某个属性值，则用点语法赋值时，这个属性会被创建出来
```
var obj ={
	a:10
};
obj.b = 40;  //在obj对象中创建了b:40这个键值对
```
属性的删除
- 如果要删除某个对象的属性，需要使用delete操作符
```
var obj = {
	a:1,
	b:2
};
delete obj.a;
```

2.对象的方法

如果某个属性值是函数,则它也被称为对象的"方法"

varxiaoming = {
	sayHello:function(){     //sayHello方法
	 	console.log('你好,我是小明,今年12岁,我是个男生');
	 	}
}

用点方法调用函数xiaoming.sayHello();
方法也是函数,只不过方法是对象的"函数属性",它需要用对象打点调用

3.对象的遍历

用 for … in … 循环,可以遍历对象的每个键

4.对象的深浅克隆

对象是引用类型值时
- 不能使用 var obj1 = obj2这样的语法克隆一个对象
- 使用== 或===进行对象的的比较时,比较的是它们是否为内存中的同一个对象,而不是比较值是否相同
浅克隆
- 使用for…in….循环即可实现对象的浅克隆

深克隆 ★

和数组的类型相似,对象的深克隆需要使用递归

   var obj1 = {
      a:1,
      b:2,
      c:[33,44,{
        m:55,
        n:66,
        p:[77,88]
      }]
    };
    // 定义一个深克隆函数
    function  deepClone(o){
      // 判断o是对象还是数组,必须先判断是不是数组,因为数组的类型也是对象
      if(Array.isArray(o)){
          //数组
        var result = [];
        for(var i=0;i < o.length;i++){
          result.push(deepClone(o[i]));
        }
      }else if(typeof o == 'object'){
          // 对象
        var result = {};
        for (var k in o){
          result[k] = deepClone(o[k])
        }
      }else{
          //基本类型值
        var result = o;
      }
      return result;
    }
    var obj2 = deepClone(obj1);
    console.log(obj2);
    
    // 测试一下
    console.log(obj1 === obj2); //false
    
    obj1.c.push(99);
    console.log(obj2);  //obj2是不变的,因为没有'藕断丝连'的现象

二、认识函数上下文

函数的上下文（this关键字)由调用方式决定; 同一个函数，用不同的形式调用它，则函数的上下文不同
```
var xiaoming = {
	nickname:小明，
	age:12,
	sayHello = function (){
		console..log('我是'+this.nickname+',我'+this.age+'岁了)；
	}
};
```
- 情形1：对象打点调用函数，函数中的this指代这个打点的对象
```
xiaoming.sayHello();
```
- 情形2：圆括号直接调用函数，函数中的this指代window对象
```
var sayHello = xiaoming.sayHello;
sayHello();
```
function是“运行时上下文"策略
函数如果不调用，则不能确定函数的上下文

1.函数的上下文规则 ★

规则①
- 对象打点调用它的方法函数，则函数的上下文是这个打点的对象
- 对象.方法();
规则②
- 圆括号直接调用函数，则函数的上下文是window对象
- 函数();
规则③
- 数组(类数组对象)枚举出函数进行调用，上下文是这个数组（类数组对象）
  - 什么是类数组对象：所有键名为自然数序列（从0开始），且有length属性的对象
  - arguments对象是最常见的类数组对象，它是函数的实参列表
- 数组[下标]();
规则④
- IIFE中的函数，上下文是window对象
```
(function(){

})();
```
规则⑤
- 定时器、延时器调用函数，上下文是window对象
- setInterval(函数，时间)；
- setTimeout(函数，时间)；
规则⑥
- 事件处理函数的上下文是绑定事件的DOM元素
```
DOM元素.onclick=function(){
}
```

2.call和apply ★

call和apply能指定函数的上下文
函数.ca11(上下文)； 要用逗号罗列参数
函数.apply(上下文)； 要把参数写到数组中

三、构造函数

1.用new操作符调用函数

进行“四步走”
- 1)函数体内会自动创建出一个空白对象
- 2)函数的上下文(this)会指向这个对象
- 3)函数体内的语句会执行
- 4)函数会自动返回上下文对象，即使函数没有return语句

2.类与实例

3.构造函数和’类"

Java、C++等是"面向对象”(object-oriented)语言
JavaScript是"基于对象”（object-based)语言
JavaScript中的构造函数可以类比于OO语言中的"类”，写法的确类似，但和真正OO语言还是有本质不同

四、原型和原型链

1.prototype和原型链查找 ★

任何函数都有prototype属性,prototype是"原型"的意思
prototype属性值是个对象,它默认拥有constructor属性指回函数
普通函数来说的prototype属性没有任何用处，而构造函数的prototype属性非常有用
- 构造函数的prototype属性是它的实例的原型
```
        console.log(xiaoming.__proto__ === People.prototype); //true 
```
原型链查找
- JavaScript规定：实例可以打点访问它的原型的属性和方法
hasOwnProperty()方法
- 可以检查对象是否真正“自己拥有"某属性或者方法
in运算符
- 只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法

2.在prototype上添加方法

把方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费
解决办法: 把方法添加到prototype上

3.原型链的终点

万物原型链的终点——Object.prototype

代码示例

  function People(){

  }
  var xiaoming = new People();
  console.log(xiaoming.__proto__.__proto__ === Object.prototype);	//true
  console.log(Object.prototype.__proto__);							 //null

  console.log(Object.prototype.hasOwnProperty('hasOwnProperty'));	 //true

数组的原型链

 var arr = [22,33,4,555];

  console.log(arr.__proto__ === Array.prototype);            //true
  console.log(arr.__proto__ .__proto__=== Object.prototype); //true
  console.log(Array.prototype.hasOwnProperty('push'));        //true

4.继承 ★

继承描述了两个类之间的"is a kind of"关系，比如学生“是一种”人，所以人类和学生类之间就构成继承关系
People是"父类”（或"超类”、"基类”）；Student是“子类”（或“派生类”）
子类丰富了父类，让类描述得更具体、更细化
举例

通过原型链实现继承
- 让子类构造函数的prototype指向父类的一个实例: Student.prototype = new People();

		 //父类:人类
		  function People(name,age,sex){
		    this.name = name;
		    this.age = age;
		    this.sex = sex;
		  }
		  People.prototype.sayHello = function (){
		    console.log('你好,我是'+this.name +'我今年'+this.age+'岁了');
		  }
		  People.prototype.sleep = function (){
		    console.log(this.nam+'开始睡觉,zzzz');
		  }
		// 子类:学生
		  function Student(name,age,sex,school,studentNumber){
		    this.name = name;
		    this.age = age;
		    this.sex = sex;
		    this.school = school;
		    this.studentNumber = studentNumber;
		  }
		  //关键语句,实现继承
		  Student.prototype = new People();
		  Student.prototype.study = function (){
		    console.log(this.name + '正在学习');
		  }
		  Student.prototype.exam = function (){
		    console.log(this.name+'正在考试,加油!');
		  }
		
		  //实例化
		  var hanmeimei = new Student('韩梅梅',12,'女','CSDN大学',123456);
		  hanmeimei.study();
		  hanmeimei.sayHello();

五、上升到面向对象

面向对象的本质: 定义不同的类,让类的实例工作
面向对象的优点: 程序编写更清晰、代码结构更严密、使代码更健壮更利于维护
面向对象经常会用到的场合: 需要封装和复用性的场合(组件思维)

1.红绿灯小案例

使用面向对象编程,就能以"组件化"的思维解决大量红绿灯相互冲突的问题
面向对象编程,最重要的就是编写类
TrafficLight类
- 属性: 自己的当前颜色color、自己的DOM元素dom
- 方法: 初始化init()、切换颜色changeColor()、绑定事件bindEvent()

代码示例:

 #box img{
            width: 80px ;
        }

<div id="box" >div>

//定义红绿灯类,构造函数
        function TrafficLight(){
            //颜色属性,一开始都是红色
            //红色1,黄色2,绿色3
            this.color = 1;
            //调用自己的初始化方法
            this.init();
            //绑定监听
            this.bindEvent();
        }
        //初始化方法
        TrafficLight.prototype.init = function (){
            // alert('我是init方法');
            //创建自己的DOM
            this.dom = document.createElement('img');
            this.dom.src = this.color+'.jpg';
            box.appendChild(this.dom);
        }
        // 绑定监听
        TrafficLight.prototype.bindEvent = function (){
            //备份上下文,这里的this指的是JS实例
            var self = this;
            //当自己的dom被点击时
            this.dom.onclick = function (){
                // 当被点击时,调用自己的changeColor方法
                self.changeColor();
            };
        }
        // 改变颜色
        TrafficLight.prototype.changeColor = function (){
            // 改变自己的color属性,从而有一种"自治"的感觉,自己管理自己不干扰别的红绿灯
            this.color++;
            if(this.color == 4){
                this.color = 1;
            }
            // 光color属性变化没用,还要更改自己的dom中src属性,才能更换图片
            this.dom.src = this.color+'.jpg';
        };



        // 得到盒子
        var box = document.getElementById('box');

        // 实例化100个
        var count = 100;

        // 当count-- 为0的时候,判断为false,跳出循环
        while(count--){
            new TrafficLight();
        }

2.炫彩小球小案例

Boll类的属性
Boll类的方法
- init()初始化方法
- update()更新方法
实现多个小球的动画
- 把每个小球实例放到同一个数组中
  - [{小球实例},{小球实例},{小球实例},{小球实例}]
- 只需要使用一个定时器,在每一帧遍历每个小球,调用它们的update方法