[前端学习]JS高级部分学习笔记，第一天

JavaScript回顾：

• 语言的特点：
  • 解释执行。js内核编译为二进制代码，由cpu执行。编译一行，执行一行，如此往复。java和c#这类语言是全部编译完再执行，所以运行速度上js会慢一些
  • 灵活。正因为解释执行的原因，所以js具有动态特性，可以随意给对象增加属性和方法
  • 头等函数。在js中函数的地位最高
  • 执行环境。如果在浏览器端，宿主环境是浏览器，非浏览器端宿主则是node等一些内核工具
• 组成的各部分回顾：
  • ECMAScript - 语法规范
    • 变量、数据类型、类型转换、操作符
    • 流程控制语句：判断、循环语句
    • 数组、函数、作用域、预解析
    • 对象、属性、方法、简单类型和复杂类型的区别
    • 内置对象：Math、Date、Array，基本包装类型String、Number、Boolean
  • Web APIs
    • BOM
      • onload页面加载事件，window顶级对象
      • 定时器
      • location、history
    • DOM
      • 获取页面元素，注册事件
      • 属性操作，样式操作
      • 节点属性，节点层级
      • 动态创建元素
      • 事件：注册事件的方式、事件的三个阶段、事件对象

面向对象

对象的介绍

• 万物皆可为对象
• 两个层次理解对象：
  • 事物的抽象化。人、书、电脑、汽车、网页、甚至链接都可以抽象为对象。就是说只要是现实中存在的事物，皆可抽象为对象
  • 容器。ECMAScript中把对象定义为一个无序的属性集合，属性可以是对象、变量（属性）、函数（方法）。属性对该对象静态性的描述，而方法就是该对象的动态行为
• 例子：比如把人抽象化为对象，它的名字、年龄、性别、爱好、国籍等等，诸如此类静态性的描述就是人的属性。吃饭、睡觉、走路、运动、玩游戏等等动态行为就是人的方法。
• 注意：js中任何对象都是基于一个引用类型（复杂类型）来创建的。这些类型既可以是已经内置好的对象（Math、Array等），也可以自由定义（构造函数等）

面向对象介绍：

• 面向对象（OOP）是一种编程思想，将现实中复杂关系抽象化为一个个对象，每个对象就是一个功能，对象间分工明确，通过调用对象的来配合实现功能
• 因此面向对象具有灵活、代码复用性高、高度模块化的特点，容易维护和开发，特别适合多人合作项目
• 面向对象与面向过程的区别：
  • 面向过程是将功能一步一步分析好，然后按照顺序依次用代码实现，面面俱到、步步紧跟；
  • 面向对象就是找到需要功能对应的对象，并调用；
  • 面向对象将执行者变为指挥者；
  • 面向对象并不是替代面向过程，而是将其高度模块封装化
• 面向对象的特性：
  • 封装性
  • 继承性
  • 多态性（因为js中多态性体现不多，也可以理解为抽象性）
• 面向对象开发的基础思路：
  • 面向过程开发时，拿到一个需求，直接分析功能写就行了。但面向对象不同，拿到一个需求，先分析它需要哪些功能，将这些功能都抽象化为对象，然后通过构造函数（ES6中新增类）创建对象的模板，然后实例化对象并调用

创建对象方式回顾：

• 调用系统内置函数object创建，var obj = new Object();这时创建出来的是一个空对象，然后利用js语言的动态性，依次创建属性和方法（obj.name = 'xxx'）
• 字面量创建对象，var obj = {};，与上一种方法几乎相同，不通过内置函数，通过字面量{}来创建
• 工厂函数模式，简单来说就是将整个创建对象的过程代码封装为函数，最后返回这个对象。这种方式没有构造函数好，不多作介绍
• 构造函数模式，使用构造函数来创建对象，js会自动为你在内存中创建对象并将引用地址返回。所以书写时，比工厂函数省事，直接通过伪变量this（在构造函数中this指向当前调用该函数实例化的那个对象）来添加对象的属性和方法。创建对象时调用自定义的构造函数即可var obj = new Obj(‘参数1’，‘参数2’....);
• 构造函数一些注意的点：
  • 构造函数命名时，首字母必须大写以便于区分（类同理）；判断对象是否是通过某个构造函数实例出来的，使用console.log( obj instanceof Obj );返回true和false
  • 静态成员和实例成员：实例成员是指通过伪变量this创建的属性方法，因为指向对象所以这些成员实际是给对象创建的，对象实例化后可以直接调用；静态成员是值构造函数自己创建的属性和方法，只有该构造函数可以调用，实例对象不能调用

构造函数原型

• 使用构造函数创建对象时，对象内部的方法只是一个引用地址，实际的方法是在对象外单独开辟一块内存来存放函数。这里就出现一问题。如果创建多个对象，每个对象的方法都会占用部分内存，这样不但内存吃不消，执行效率也会降低
• 解决上述问题的办法就是使用构造函数原型。每个构造函数都默认自动一个对象（称为原型 构造函数.prototype），通过构造函数调用该对象，给其赋值需要的属性或方法，这样问题就解决了。所以实例化的对象，都可以直接访问原型中的对象或者方法，与通过构造函数创建的一样

对象中的非标准属性

• 非标准属性就是存在与对象中，但实际开发中不需要用到的属性
• 对象.__proto__ 该属性实际上是创建该对象构造函数的原型对象的引用地址，对象之所以能直接调用构造函数的原型对象，就是通过该属性
• 对象.constructor注意该属性并不在对象中，是原型对象的非标准属性，只是对象可以直接调用。该属性记录的原型对象所属的构造函数，也就是该对象所属的构造函数

三者之间的关系

• 对象通过构造函数创建，原型对象属于构造函数构造函数.prototype，对象通过__proto__属性指向原型对象，原型对象constructor属性记录构造函数

原型链

• 我们已经知道所有对象都拥有_prototype__属性，那么原型对象的原型对象（暂时命名为o）是什么呢？通过打印可以看到，o是一个普通的对象。而o所属的构造函数是什么呢？再次打印，可以看到依然是一个普通对象(实际就是最初级的js内置构造函数)。那么再次打印o的原型对象，结果是null。这种原型的层级就是原型链，从实例对象往上三层之后，原型对象就为空了
• 原型链的作用。这里涉及到了对象调用属性或方法的规则，依从最近原则。调用时先在构造函数中查找，如果没找到会通过__proto__去原型链中查找，依次往上，到第三层依然没有，则报错。因此只要最初级构造函数中内置了某方法，根据原型链规则所有创建的对象都可以调用

• 需要注意的是：虽然查找属性或者方法会检索原型链，但是给对象设置（赋值）属性或方法的时候，哪怕原型对象中有该属性或方法也不会检索原型链，而是直接在对象内部添加设置的属性或方法，并屏蔽原型对象中的。这样的好处是避免值错误覆盖，因为同一个构造函数创建的对象，共享原型对象

  
  
  三者关系及原型链图

原型对象的使用

• 一般来说不推荐直接通过构造函数调用原型对象，给其添加属性和方法，这样重复书写调用代码会造成代码冗余。最佳的使用方法是：直接将原型对象变成一个新的对象，以键值对的方式来添加。例如：构造函数.prototype = { xxx:xxx, xxx:xxx, xxx:xxx}。
• 注意点：
  • 1.因为将原型对象变成一个新的对象了，会覆盖掉本来的constructor 属性，影响该属性的调用。
    所以正确的写法是：构造函数.prototype = { constructor : 构造函数， xxx:xxx, xxx:xxx, xxx:xxx}由我们自己手动添加这个属性即可
  • 2.因为js是脚本语言，依次往下执行。所以一定要先在原型对象中设置好属性和方法，再使用对象来调用，否则会找不到
  • 3.数组和string除外，因为js规定了它们原型对象中内置的方法不允许修改，所以不能使用这种方法

自调用函数的一些问题

• 为了实现代码功能的模块化，很多时候功能模块会封闭起来，再通过window暴露出来，这样也能避免函数名和变量名的命名冲突
• 但是如果一个文件中有多个自调用函数时，会出现只能调用第一个，后面的报错。原因是很多人书写习惯函数结束后并没有分号表示结束，当js解析时，它会认为后面的自调用函数时第一个函数的调用。所以一般当文件内有多个自调用函数时，在每个自调用函数前加分号，表示语句结束
• 另外一般自调用函数都建议加上window和undefined形参和实参，window的目的是为了在暴露时压缩代码（接收使用时可以用一个字母代替）。undefined是为防止值被修改，因为老浏览器中它是可以被重新赋值的

函数默认的方法

• 实际上函数也是对象，因为函数默认也有属性和方法
  • .bind(需要指向的对象，函数设置的参数)该方法可以修改函数内部this的指向，第一个参数就是想要指向的对象，但是注意它并没有调用函数，而是返回一个函数，并修改新函数的this指向。所以需要一个变量来接收返回值（自调用函数不用，但实质上依然是返回的函数）
  • .call(需要指向的对象，函数设置的参数)该方法和上面的方法，用法完全一致，结果也几乎一致。唯一的区别是它是直接调用函数，并不会返回，相比之下更加方便

对象的继承

• 对象继承并不是对象拷贝，它们由本质的区别。拷贝是直接复制，但继承是类型的继承，从上一个抽象范围更广的构造函数中，继承该类型共有的属性和方法，从而达到代码复用
• js语言中对象继承并没有直接的语法,因此js中对象继承是模拟出来的，但效果是一样的
• 具体继承实现的原理和方法，查看代码，有详细描述
• 一般来说会用到继承的场景都是自己造框架等互相依赖很多的功能，单纯实现页面效果很少用到继承