JavaScript高级与面向对象

对象：任何事物都可以看作是对象。

1、面向对象与面向过程的概念

• 面向过程：凡是自己亲力亲为，自己按部就班的解决现有问题。
• 面向对象：自己充当一个指挥者的角色，指挥更加专业的对象帮我解决问题。
• 联系：面向对象仍然离不开面向过程，可以认为它是对面向过程更高一层的封装。

2、创建对象的方式

• 字面量形式

  var p = {};
  p.name = '中国人';
  p.age = '500';

• 构造函数形式 ==> 复用性更强

  function Person(name, age) {
      this.name = name;
      this.age = age;
  }
  var p = new Person('中国人', 500);
  var p2 = new Person('中国人2', 500);

3、构造函数

• 概念

如果一个函数配合new关键字创建对象，那么这个函数也叫构造函数

1. 构造函数与普通函数本质上是一样的
2. 编写构造函数时，首字母通常会大写，但不是必须的(类似变量驼峰命名法)

• 返回值特点

1. 如果构造函数没有return语句，那么new它，得到一个新实例
2. 如果构造函数return了一些基本类型数据，那么new它，得到一个新实例
3. 如果构造函数return了一个对象，那么new它，得到return的对象

4、类与实例的概念

• 类

类是对一些具有相同特征与特性事物的抽象描述

1. 比如动物类的定义是比较抽象的，它抽取了动物与动物之间的相同特征。
2. 同样植物类、哺乳动物类、人类的定义也都是比较抽象的，也是提取他们的共同特征而形成的定义，这就是类。
3. 在js中，可以把构造函数看作是类

• 实例

实实在在的具体事物就是某个类的实例。

1. 比如我家的旺财，是狗类的实例
2. 我的弟弟妹妹，是人类的实例
3. 在js中，通过构造函数创建的对象就是实例

联系：如果把类看作是模子，实例则是模子印出来的东西。

• 对象类型

对象的类型就是其构造函数的名字

1. 比如数组是Array类型的对象，日期是Date类型的对象
2. Array和Date就是其构造函数的名字
3. 那么通过Person创建一个实例，那么这个实例就是Person类型的对象。

5、 原型

• 原型是一个对象，它的属性可以供其他对象共享
  1. js中有很多原型对象，基本每个对象都有属于自己的原型
  2. 原型对象的存在可以大大的节省内存开销

• 原型的使用

1. 每个构造函数都有一个prototype属性，可以给其赋值
2. 然后通过构造函数创建的实例就可以共享其属性与方法

6、面向对象与面向过程优缺点

• 面向对象

缺点

1. 通常比面向过程消耗内存，因为有很多实例要存储
2. 前期开发比较缓慢，但是复用性强，后期开发与维护进度会逐渐加快

优点

1. 变量的管理比较清晰，可读性较高
2. 因为代码与对象间的职责比较清晰，所以后期可维护性和可扩展性也比较高
3. 复用性更强

• 面向过程

缺点

1. 变量混乱，可读性较差
2. 通常有新需求出现，代码改动比较大，所以可维护性和可扩展性比较差

优点：开发迅速，只要能解决当前问题即可

7、面向对象3大特征

1. 封装性：对象可以把很多属性与方法集中在一起管理，就是js的封装性。
2. 继承性：对象可以使用其原型对象的属性与方法，就是js的继承性。
3. 多态性：js没有多态。如果非要说，那么对象形态、继承关系可以随时被改变，可以认为是js的多态性。

8、 面向对象的书写过程

1. 根据需求提取解决该问题所需的对象
   • 比如我要逛街，需要一个导购，需要一个保镖，需要一个女朋友
2. 编写每一个对象所对应的构造函数
   • 构造函数可以重复性创建实例，因为我可能需要多个保镖 function Person() {}
3. 抽取对象所需的属性
   • 就是该对象应该拥有的特征，比如人有名称、年龄、性别、四肢、双眼。 function Person(name) { this.name = name; }
4. 抽取对象所需的方法
   • 就是该对象应该拥有的特性，比如人会学习创造，狗会看门逗你笑 Person.prototype.study = function(){};
5. 根据写好的构造函数创建实例，调用属性方法解决实际需求
   • 就是调度实例干事 var p = new Person(); p.study();

9、 原型其他

• 谁有prototype与proto

1. 每个函数都有prototype属性
2. 每个对象都有proto属性
3. 函数比较特殊，即是函数又是对象，所以prototype与proto都有

• prototype与proto联系

1. 通过构造函数创建的实例
2. 当前构造函数的prototype属性指向谁，实例的proto属性就指向谁

• 如何得到一个对象继承的原型

1. 通过proto属性（但是它是非标准属性，不建议开发中使用）
2. 通过constructor属性得到对象的构造函数，再访问其prototype得到原型

• 创建对象时内在的4个步骤

1. 创建一个新实例(本质上就是开辟了一块内存空间)
2. 设置新对象的原型执行构造函数，执行时设置其this指向新实例
   • 给新实例设置proto属性值
   • 这个值与构造函数的prototype属性有关
   • 赋值过程相当于这样：新实例.proto = 构造函数.prototype
3. 返回新实例的地址

• 对象的属性访问规则

1. 优先从自身查找
2. 找不到就去原型找
3. 还找不到继续去原型的原型找
4. 直到终点，终点也没有返回undefined

• 对象的属性赋值

1. 给一个对象的属性赋值
2. 如果之前没有该属性那么就是新增，有就是修改
3. 对象的属性赋值只影响自己，不会对其他对象和原型对象造成影响

10、原型常见书写方式

• 默认原型

  function P() {}
  P.prototype.fun = function(){};
  var p = new P();

• 置换原型

  function P() {}
  P.prototype = {
      constructor: P,
      fun: function(){}
  };
  var p = new P();

• extend复制扩展

  function P() {}
  extend(P.prototype, {}, {
      fun: function(){}
  }, {
      fun2: function(){}
  });
  var p = new P();

• Object.create

  var proObj = {
      fun: function(){}
  };
  var p = Object.create(proObj);

• 实现属性复制函数封装

  function extend() {
      var target = arguments[0];
      for(var i = 1, len = arguments.length; i < len; i++) {
          for(var key in arguments[i]) {
              target[key] = arguments[i][key];
          }
      }
      return target;
  }

• 类成员与实例成员

1. 类成员(静态成员)：添加给类自己的属性与方法
2. 实例成员
   • 添加给实例自己的属性与方法
   • 原型上供实例使用的属性与方法

11、原型链

• 概念：一个对象继承的所有由proto属性串联在一起的对象，称为该对象的原型链。

• 对象原型链的研究方案

1. 先通过proto得到对象的原型
2. 然后访问这个原型的constructor属性，确定该原型的身份
3. 然后继续按照上诉两个步骤，往上研究原型，最终就得到了对象的原型链。

• 规律与常见对象原型链结构

1. 原型链的终点统一是Object.prototype
2. 对象的原型和该对象的类型有关
   1. 比如Person的实例，原型是Person.prototype
   2. 比如Animal的实例，原型是Animal.prototype
   3. []的原型链结构 [] ==> Array.prototype ==> Object.prototype ==> null
   4. {}的原型链结构 {} ==> Object.prototype ==> null
   5. /abc/的原型链结构 /abc/ ==> RegExp.prototype ==> Object.prototype ==> null
   6. Person的原型链结构 Person ==> Function.prototype ==> Object.prototype ==> null
   7. Function的原型链结构 Function ==> Function.prototype ==> Object.prototype ==> null
   8. Object的原型链结构 Object ==> Function.prototype ==> Object.prototype ==> null
3. 构造函数默认的prototype，它统一都继承Object.prototype
   • 比如Person.prototype，原型是Object.prototype
   • 比如Animal.prototype，原型是Object.prototype
4. 通过这个规则，可以自由猜想出任意一个实例所有的原型
   • 比如Book的实例，其原型结构为： Book实例 ==> Book.protoype ==> Object.prototype ==> null

12、运算符与方法

• in -- 运算符

1. 作用：判断能否使用某个属性（包含继承的属性）
2. 语法：属性名 in 对象
3. 返回值：boolean

• hasOwnProperty -- 方法

1. 作用：判断一个属性是不是自己的（不包含继承的属性）
2. 语法：对象.hasOwnProperty(属性名)
3. 返回值：boolean

• 关于for in遍历的补充：for in可以遍历对象继承的属性，不过一些内置的属性是不可遍历的。

• delete -- 运算符

1. 作用：删除对象的属性
2. 语法：delete 对象.属性名 || delete 对象[属性名]
3. 返回值：boolean

• instanceof -- 运算符

1. 作用：判断一个对象的原型链中是否含有某个构造函数的prototype
2. 语法：对象 instanceof 构造函数
3. 返回值：boolean

• Function -- 内置构造函数

1. 作用：创建函数实例
2. 语法：new Function(形参1，形参2，...，代码体)
3. 返回值：新创建的函数实例
4. 特点：能够把字符串当做js脚本执行

• eval -- 内置的全局函数

1. 作用：执行字符串代码
2. 语法：eval(字符串代码)

13、 函数四种调用模式

谨记：函数调用时，内部的this的值和这个函数定义无关，和运行(调用)有关。

• 函数调用模式 ==> 函数名() || 自调

这种方式调用，函数运行时内部的this指向全局对象window。

• 方法调用模式 ==> 对象.方法名() || 对象['方法名'] || 祖对象.父对象.子对象.方法名()

这种方式调用，函数运行时内部的this指向宿主对象。 (dom中事件绑定的函数，就是这种调用方式，所以this指向对应的dom对象)

• 构造函数调用模式 ==> new 构造函数() || new 对象.构造函数()

这种方式调用，函数运行时内部的this指向新创建的实例对象。

• 上下文调用模式(间接调用模式)

1. 函数名.call(this, arg1, arg2);
2. 函数名.apply(this, [arg1, arg2]); 这种方式调用，函数运行时内部的this指向call或apply传入的第一个参数； 如果没有传第一个参数，或者第一个参数为null、undefined，那么this统一指向window。

14、 作用域

概念：变量的有效范围。

• 全局变量

1. 在全局都有效的变量。
2. 定义方式：函数外定义。
3. 生命周期：从定义开始，到页面被卸载结束。

• 局部变量

1. 只在局部有效的变量。
2. 定义方式：函数内定义。
3. 生命周期：一般情况下，是从定义开始，到函数执行完毕结束。

• 函数作用域

1. 只有函数才可以产生新的作用域
2. 只有函数可以限定变量的有效范围

• 块级作用域 ==> js没有

1. 凡是代码块就可以产生新的作用域
2. 凡是代码块就可以限定变量的有效范围

• 词法作用域(静态作用域)

　　说的是变量的查找规则，特点是变量查找与函数定义有关，与调用无关

1. 先在当前作用域查找
2. 找不到就去定义该函数的作用域找
3. 一直找到全局作用域为止，全局也没有则报错

• 作用域的产生：函数可以被多次重复调用，调用一次就会产生一个新的作用域。

• 作用域链

1. 函数在定义的时候，将来它执行时的上级作用域就被确定好了，上级作用域可能还有上级，函数所有的上级作用域称之为作用域链。
2. 一个函数作用域可以访问的所有上级作用域，称为它的作用域链。

• 垃圾回收机制原则

1. 一个对象没有被其他变量或者属性引用，那么就会被释放。　同时还要保证该对象能够被使用，对于那些无法使用，又存在循环引用的对象，也会被释放。
2. 一个局部变量没有被其他函数引用，那么就会被释放。

• 注意：有一个容易搞混，又没有什么联系的知识点，这里强调一下

• 函数内的this，与函数的定义无关，与调用有关。

function fn() {
    console.log(a); // 报错，自己找不到，去定义fn的全局找，所以这里和fn的定义有关，与fn的调用无关。
}
(function() {
    var a = 10;
    fn();
})();

15、闭包

• 概念：在js中访问了自由变量的函数就是闭包

• 自由变量：函数可访问的外部局部变量，称之为该函数的自由变量

• 特点：闭包的自由变量生命周期会被拉长，与闭包的生命周期进行了捆绑

• 计数器案例

  function getCounter() {
      var total = 0;
      return {
          add: function() {
              total++;
          },
          get: function() {
              return total;
          }
      };
  };
  var counter = getCounter();
  counter.add();
  counter.get();
  var counter2 = getCounter();
  counter2.add();
  counter2.get();

• 缓存操作

  var cache = (function() {
      var cache = {};
      return {
          set: function(key, val) {
              cache[key] = val;
          },
          get: function(key) {
              return cache[key];
          }
      };
  }());
  cache.set('张锐', '中国人');
  cache.get('张锐');

• for循环练习

  var arr = ['第一句话', '第二句话', '第三句话'];
  for(var i = 0, len = arr.length; i < len; i++) {
      setTimeout(function(i) {
          return function() {
              console.log(arr[i]);
          }
      }(i), 1000 * i + 1000);
  }

16、 预解析

1. 可以理解为js解析引擎在逐行执行代码前，对一些特殊代码的预先执行。
2. 预解析过后代码才会从上到下逐行执行，但是预解析时已经定义的变量与函数，是不会重复定义的。
3. 预解析的本质就是变量对象初始化。

• 预解析做了两件事情

　　1、变量声明提升：检测到变量声明那就率先进行声明

　　2、函数声明提升：检测到函数声明也率先进行声明

• 变量声明

1. 使用通过var定义的变量，才属于变量声明

   var a; //属于变量声明。
   b = 10;// 不属于变量声明。

2. var关键字可以通过逗号连续声明多个变量

   var a, b, c = 20, d = 30;
   //a,b,c,d全部属于声明。

3. var关键字在声明变量的时候，可以给其赋值，如果赋值表达式中含有一些变量，这些变量不属于变量声明。

   var a = b = 10;
   //其中a属于变量声明，b不属于。

• 函数声明

在js中，函数声明式写法比较单一，好区分。

1. 要么定义在全局
2. 要么定义在另一个函数主体内

• 预解析的特点

1. 在变量声明之前访问它不会报错
2. 在函数声明之前调用它不会报错

• 预解析相关细节

1. js预解析分全局预解析与局部预解析，区别在于局部预解析在函数调用时发生。
2. 变量声明重名 -- 最终只留一个

     console.log(a); // 预解析后值保留一个变量a，值为undefined
     var a = 1;
     var a = 2;

3. 函数声明重名 -- 保留后面的函数

    console.log(test); // 预解析后test为打印2的函数
     function test(){ console.log(1) }
     function test(){ console.log(2) }

4. 变量与函数重名 -- 保留函数

   console.log(test); // 预解析后test值为函数
     var test = 10;
     function test(){}
     var test = 20;

• 函数执行时形参会优先执行

　　　　形参定义与赋值优先于变量与函数声明。

(function(a) {
  console.log(a);  // a函数
  var a = 200;
  function a(){}
  console.log(a);  //
}(100));

• 函数表达式的名称

  // 函数fnName的名字在外面无法访问，但是可以在函数内访问，
      // 相当于自己的一个局部变量，值为自己的引用。
      var fn = function fnName(){
          console.log(fnName);  // 里面可以访问
      };
      console.log(fnName);   // 外面访问报错

17、 函数的四种调用模式

• this的特点

1. 函数中的this，调用方式不同，指向不同
2. this与调用有关，与定义无关

• 1.17.1.1. 函数调用模式

　　　　函数名() || (function(){}()) ==> window

• 方法调用模式

　　　　对象.方法名() || 对象方法名 || 祖对象.父对象.子对象.方法名() ==> 宿主对象

• 构造器调用模式

　　　　new 构造函数() || new 对象.构造函数() ==> new出来的新实例

• 间接调用模式(上下文调用模式)

1. call
   • 函数.call(指定的this，实参1，实参2，...)
   • 对象.方法.call(指定的this，实参1，实参2，...)
2. apply
   • 函数.apply(指定的this，[实参1，实参2，...])
   • 函数.apply(指定的this，{0: 实参1， 1：实参2， length: 2})
   • 对象.方法.apply(指定的this，[实参1，实参2，...])
3. 异同
   • call与apply都来自Function.prototype，所以所有的函数都可以使用。
   • 都可以改变函数this的指向
   • 不同之处在于传参的方式上
4. 补充
   • 函数调用call和apply，实际上是间接调用自己
   • 例如fn.call()，表面上看是调用call方法
   • 实际上连fn自己也被调用了，和fn()直接调用的区别是，this变了

• call和apply方法借用的原理

1. 如果一个方法内部操作的是this，那么我们就可以通过call或apply指定该方法this， this改变成谁，那么该方法最终操作的就是谁。
2. 如果一个方法内部没有操作this，那么是无法借用的。

• call和apply常见的使用场景

1.借用数组方法操作伪数组

// 给伪数组添加数据
var obj = {};
Array.protype.push.call(obj, '要添加的第一个值', '要添加的第二个值')

// 通过伪数组获取对应的真数据（获取后原伪数组不会被改变，只是得到了新数组）
var argArr = [].slice.call(arguments);

2、借用Object.prototype.toString获取对象类型

var arr = [];
Object.prototype.toString.call(new Date).slice(8, -1)

3、借用父类构造函数给子类实例添加属性

function Parent(name, age) {
    this.name = name;
    this.age = age;
}
function Son() {
    Parent.apply(this, arguments);
}
var p = new Son('火星人', 999);
// apply拆分数组或伪数组值依次传递给函数
var arr = [1, 10, 20, 40];
Math.max.apply(null, arr)

18、ES5数组新增的3个方法

• forEach

1. 作用：帮我们遍历数组，每遍历到一个值，就会调用一次回调，把这个值与它的下标传递过去
2. 语法：数组.forEach(function(v, i){ console.log('使用forEach帮我们遍历好的值与下标') })
3. 返回值：undefined

• map

1. 作用：可以用来代替forEach，但是map可以接收回调的返回值，最终通过一组数据映射为回调返回的另外一组数据
2. 语法：var mapArr = 数组.map(function(v, i){ return v * v })
3. 返回值：回调所有的返回值组成的新数组

• filter

1. 作用：可以用来代替forEach，但是还可以过滤数组中的值
2. 语法：var filterArr = 数组.filter(function(v, i){ if(v % 2 ==0){ return true; } })
3. 返回值：所有返回回调返回true的对应值组成的新数组

19、 call&apply的补充

1. 如果不传参 ==> this指向window
2. 传null ==> this指向window
3. 传undefined ==> this指向window
4. 传123 ==> this指向123的包装类型对象(Number对象)
5. 传'abc' ==> this指向'abc'的包装类型对象(String对象)
6. 传true ==> this指向true的包装类型对象(Boolean对象)
7. 传对象 ==> this指向传入的对象

20、 严格模式

1. ES5新增的一个特性，使用该特性可以让js以一种新的模式运行js脚本。
2. 该模式下可以强制我们抛弃那些不推荐不友好的写法
3. 该模式下可以让js之前的一些设计不太合理的api表现的合理一些
4. 该模式下可以让js拥有一些新的特性，比如ES6/ES7规范中定义的某些语法，必须在严格模式下才有效

• 严格模式的分类

　　　　全局模式

1. 1. 在全局代码的最上面书写一句话'use strict';
   2. 使用该模式，所有的代码都按照严格模式执行

局部模式

1. 在函数内部的最上面书写一句话'use strict';
2. 使用该模式，只有该函数内的代码才会按照严格模式执行

• 需要记住的几条严格模式规则

1. 定义变量必须使用var
2. 函数调用模式this为undefined
3. 真正实现了call谁this就为谁

其他

1. 不能使用with语句
2. 废除函数.caller与arguments.callee
3. eval拥有了单独的作用域