面向对象

1、面向对象（OOP | OO）

对象：黑盒子{ Math（abs random ceil floor）、Date、Object(对象,没有功能,是所有js对象的父级)}
盖楼房：调用具有某些功能的人来实现某些功能。
对象是一个整体，对外提供一些功能和属性。使用对象时只关注对象的提供的功能，不关注对象的内部实现。
优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
缺点：性能比面向过程低

2、面向过程

过程：过程就是面向函数式编程（function）。
优点：性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源; 比如单片机、嵌入式开发、 Linux/Unix等一般采用面向过程开发，性能是最重要的因素。
缺点：没有面向对象易维护、易复用、易扩展

3、面向对象的特点：（封装，继承，抽象（多态））

抽象：就是建模，抓住核心问题。
封装：
- 使用者：不必考虑内部实现，只考虑内部提供的功能。
- 创建者：考虑好对外提供的功能，实现内部的代码。
继承：
- 从已有的对象上继承出新的对象，新对象具有了老对象的一些功能和特性。
- 多重继承：
  沙发汽车（带轮子的沙发）
  盒子汽车（集装箱货车）
- 多态：龙生九子
- 属性的继承使用 call（this）
  eg:




    
    Document

4、对象的组成

属性：属于对象的变量
方法：属于对象的函数
eg:




    
    Document

5、this 函数的调用者就是this（每一个函数都具有自己的调用对象）

事件：触发事件的对象

div.onclick = function(){
    alert(this);
};

6、new : 一个函数( 创建对象实例)。

new的深入操作：
- 创建一个空对象，作为将要返回的对象实例。
- 将这个空对象的原型，指向构造函数的prototype属性。
- 将这个空对象赋值给函数内部的this关键字。
- 开始执行构造函数内部的代码。
- 将对象实例返回。
  eg:




    
    Document

防止漏掉new造成错误：
- 在构造函数内部使用严格模式。
- 使用instanceof在内部判断。判断是否为当前对象的实例。
- 使用new.target 在内部判断，new.target指向自己的构造函数。
  eg:

7、构造函数里面的return语句：

任何一个函数都可以使用new。返回值都是一个对象。如果这个函数是一个构造函数的话，返回的是这个函数的实例。如果函数是一个普通函数，那么返回的是一个空的对象。
如果return的是普通数据类型。那么相当于没写。
如果返回的是this，那么返回的与本身返回的是一样的。
如果构造函数中具有return语句，并且return返回的是一个对象，那么构造函数产生的对象就是返回的这个对象。而不是构造函数的本身实例。
eg:

8、Object对象，是所有JS对象的基础。Object 的原型指向null。一切对象的基础是null，null也叫空。

eg:




    
    Document

9、Object.create()有的时候我们拿不到对象的构造函数。可以根据这个对象的某一个实例去创建一个对象。

eg:

10、对于对象来说，每一个属性都有四个描述。

value 值
enumerable 枚举、遍历（for in）
configurable 修改
writable 删除
后面三个默认值都是true
eg:

enumerable:

11、JavaScript的面向对象是基于constructor（构造函数）与prototype（原型链）的。

构造函数：constructor
- 构造函数就是一个函数。和普通函数有一些区别。
- 函数的内部使用this的关键字。
- 首字母是大写的。
- 使用的时候要用new操作符创建实例对象。
原型（prototype）：一个函数可以看成一个类，原型是所有类都有的一个属性，原型的作用就是给这个类的每一个对象都添加一个统一的方法。（统一的给多个对象添加属性或者方法）
- 产生原理：
  - JavaScript 通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。
  - 通过构造函数为实例对象定义属性，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性，从而造成对系统资源的浪费。
  - JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。
  - JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。这个对象就是函数的原型。
- 类：模板（人类）在JS中一般称为对象
- 对象：创建出来的具体的实例（张三）在JS中一般称为对象实例
  eg1:

eg2:




    
    Document

原型也是一个对象（原型对象），里面是所有加在对象原型上的方法以及属性。
eg:




    
    Document

原型链：JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。那么，Object.prototype对象有没有它的原型呢？回答是Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。
(构造函数创建实例对象，构造函数具有原型，实例对象也具有原型。实例对象的原型指向构造函数的原型。）
图解

image.png
- constructor：构造器。默认指向prototype对象所在的构造函数。
- proto：每一个实例对象都具有的私有属性。指向自己的原型。
  eg:

12、 getPrototypeOf 获取obj对象实例的原型

格式：Object.getPrototypeOf(obj)
eg:

13、isPrototypeOf 判断该对象是否为参数对象的原型

格式：Object.prototype.isPrototypeOf()
eg:

14、设置一个对象的prototype对象，返回参数对象本身

eg:

15、getOwnPropertyNames 成员是参数对象本身的所有属性的键名，不包含继承的属性键名。hasOwnProperty 用于判断某个属性定义在对象自身，还是定义在原型链上。

格式：
Object.getOwnPropertyNames()
Object.prototype.hasOwnProperty()
eg:

16、私有属性

eg:

17、命名空间

eg:

18、json：（字符串）数据传输格式

json 对象：json字符串解析出来的对象，或者就是个对象。但是这个对象有限制。键必须是双引号包起来。值必须是简单类型或者数组。
eg:




    
    Document

19、闭包：

函数的作用域是定义的地方，而不是函数调用的地方。
eg:




    
    Document

20、js的数据类型分为简单类型与复杂类型（引用类型）

这两种数据类型保存数据的形式是不同的。
简单类型：
数字
字符串
布尔值
undefined
null
引用类型：
数组
对象
图解：

image.png

eg:




    
    Document

21、instanceof 判断某一个实例对象是否是某一个对象的实例。

格式：obj instanceof Object
任何实例都是Object的实例
eg:




    
    Document

22、案例

选项卡

数组赋值




    
    Document

有范围的拖拽封装

function Drag(id){
    this.d = document.getElementById(id);
    //初始化
    this.x = 0;
    this.y = 0;
    let obj = this;
    this.d.onmousedown= function(ev){
        var ev = ev || event;
        obj.mousedown(ev)
    };
}
Drag.prototype.mousedown = function(ev){
    //计算鼠标相对div的距离
    this.x = ev.clientX - this.d.offsetLeft ;
    this.y = ev.clientY - this.d.offsetTop;
    let obj = this;
    document.onmousemove = function(ev){
        var ev = ev || event;
        obj.mousemove(ev)
    }
    document.onmouseup = this.mouseup;
}
Drag.prototype.mousemove = function(ev){
    this.d.style.left = ev.clientX - this.x + 'px';
    this.d.style.top = ev.clientY - this.y+'px';
};
Drag.prototype.mouseup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
}

有范围的拖拽




    
    Document