2017.12.11-学习笔记：js进阶知识点整理

作者: bixin | 来源:发表于2017-12-11 20:33 被阅读365次

前言：古人云，温故而知新，把自己学习js的进阶笔记整理一下，有错误之处还望指出，谢谢。

→点我去看js基础知识点整理

→点我去看jQuery知识点整理

→点我去看dom知识点整理

JavaScript进阶

1.typeof：

1.返回的是一个字符串；
2.只能判断简单数据类型，复杂数据类型用instanceof；
3.是一个关键字，不是一个函数，（）的作用：提升优先级；
4.如果是一个函数，返回的是function，函数在js里是一等公民；
5.如果是null，返回的是object。

2.逻辑运算符：

逻辑中断：
&& : 找假值，从左往右依次判断，如果某个操作数的逻辑是false，中断。
|| : 找真值，从左右往右依次判断，如果某个操作的逻辑是true，中断。
转换成布尔类型是false的几种情况：
null undefined 0 NaN "" false
- 补充：null 和 undefined
  - null 是一个表示“无”的对象，转为数值时为 0；undefined 是一个表示“无”的原始值，转为数值时是NaN
  - 当声明的变量还未被初始化时，变量的默认值为 undefined。null 用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
  - undefined 表示“缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：
    1.变量被声明了，但没有赋值时，就等于 undefined
    2.调用函数时，应该提供的参数没有提供，该参数等于 undefined
    3.对象没有赋值的属性，该属性的值为 undefined
    4.函数没有返回值，默认返回 undefined
  - null 表示“没有对象”，即该处不应该有值。典型用法是：
    1.作为函数的参数，表示该函数的参数不是对象
    2.作为对象原型链的终点
使用场景：

function animate(fn) {
  fn && fn(); //如果传参数函数就执行函数
}
animate();

3.比较运算符：

== 的转换规则：
1. NaN 不等于任何值包括NaN本身
2. null 不等于任何值，除了null 和 undefined
3. undefined不等于任何值，除了undefined本身和null
4. 如果两边有布尔类型，两边都转换成数值类型比较 false:0 true:1
5. 如果两边有数值类型，两边都转换成数值类型。
6. 如果两边没有数字和布尔类型，有字符串，都转换成字符串比较。
7. 如果两边都是对象，比地址。
  Number( [ 空数组 ] )为 0 ；Number( { 空对象 } )为 NAN。

4.严格模式：

开启严格模式：’’use strict’’
1.变量必须声明；
2.禁止this指向window对象；
3.禁用八进制。

5.数据类型：

简单数据类型：值类型，存储的是值本身；
复杂数据类型：引用类型，存储的是对象的地址，复制的地址，对象只有一个，两个变量指向同一个对象。

6.拷贝：

浅拷贝：将对象中所有的属性都依次赋值到新对象里面去。浅拷贝只复制了一层对象的属性
如果对象中的属性还有对象，那浅拷贝只能复制该对象的地址，所以复制后该属性的对象和原属性的对象是同一个。
深拷贝：判断原对象的属性值的数据类型是否为对象typeof obj[k] === 'object'，
利用递归 temp[k] = cloneObj(obj[k]); 实现。

7.对象：无序的键值对的集合。

面向过程：员工，一步一步考虑做事的过程；
面向对象：老板，让谁做什么事。
面向对象是面向过程的封装，而不是替代。
面向对象的三大特性：
- 1.封装：
  函数：封装一段代码。
  对象：把一些属性和函数封装到一个对象了。
- 2.继承：
  拿来主义：一个对象没有这个属性或者方法，另一个对象有个这个属性或者方法，通过某些手段，能够直接用另一个对象的属性和方法。
- 3.[多态]：js中没有，只有强类型语言有。
创建对象的方式：

var obj = new Object();

var obj={}; // 字面量创建；

//工厂函数：每次调用，都会创建出来一个对象。
function createPhone(brand) {
  var obj = {
    brand: brand
  }
  return obj;
}
// 缺点：创建出来的对象全是object类型，无法区分。

/*构造函数：实例化对象
  1. 首字母大写
  2. 作用： 实例化对象(给this添加属性和方法)
  3. 配合new关键字使用，如不配合new，this指向window*/
function Phone(brand) {
  this.brand = brand;
}
// 缺点：内存浪费；改进：用原型'
var hw = new Phone("华为");

new关键字：
1. 在内存开辟一块新的空间，创建一个空的对象
2. 让构造函数的this指向这个新的对象
3. 调用构造函数
4. 返回新对象。

8.prototype:原型对象

1. 所有的函数（构造函数）都会自带一个属性：prototype 这个属性的值是一个对象：原型对象。
2. 通过构造函数实例化的对象可以直接访问prototype属性（原型对象）的属性和方法。
构造函数中相同的属性和方法可以放入其对应的原型对象中。
对象：存储每个不一样值（name, age , gender）
原型：存储所有对象共同的东西（方法）
所有的函数都会有一个属性：prototype 指向其原型对象
所有的对象都会有一个属性：_proto_ 指向当前对象的构造函数的 prototype 属性。
所有的原型对象都会有一个属性：constructor 指向当前构造函数
属性搜索原则：
如果自己有，用自己的，如果没有，找对象._proto_,如果还没有，一直往上找，知道Object.prototype,如果没有，undefined。

9.原型链：

一个对象会有一个原型（对象._proto_）,同时这个原型也是一个对象，这个原型也会有原型，一环扣一环，就形成了一个链式的结构，我们把这个链式结构叫做；原型链。
对象可以使用原型上的东西，也可以使用原型的原型的东西，对象可以使用整个原型链上的东西。

1.var p = new Person();
p-- > Person.prototype-- > Object.prototype-- > null

2.var arr = [];
arr-- > Array.prototype-- > Object.prototype-- > null

3.var date = new Date();
date-- > Date.prototype-- > Object.prototype-- > null

4.var obj = {}
obj-- > Object.prototype-- > null

5. Math对象
Math-- > Object.prototype-- > null

10.Object.prototype的成员：

obj.hasOwnProperty(prop) :判断prop属性是否是obj自己提供
in操作符：如果属性不是自己提供的，是从原型上继承来的，也会返回true
obj.propertyIsEnumerable(prop) : 判断prop是否是自己的属性， prop属性可否遍历
obj1.isPrototypeOf(obj2): 判断obj1是否在obj2原型链上。
toString(): Object.prototype.toString() [object type] 将对象转换成字符串
toLocaleString():跟本地化有关，
valueOf() : 将对象转换成简单类型（数值、布尔）

11.沙箱：匿名函数自调用

优点：不用担心全局变量污染的问题
缺点：完全与外界隔绝
对外暴露变量：传递window作为参数传入，window.变量=变量

12.继承：让一个对象可以使用另一个对象的属性和方法。

混入式继承：(jQuery的extend继承)

var jQuery = {
  extend: function(temp) {
    for (var k in temp) {
      if(temp.hasOwnProperty(k)){
        this[k] = temp[k];
      }
    }
  }
}
var class = {
  addClass:function(){}
}
jQuery.extend(class)

原型式继承：
一个对象可以访问构造函数的原型中的属性和方法，那么如果想要让一个对象增加某些属性和方法，只需要把这些属性和方法放到原型对象中即可。

// 1.直接给原型增加属性和方法

// 2.原型替换(jQuery的原型替换)
jQuery.prototype = {
  constructor: jQuery,
  version: "1.0.0",
  extend: function(temp) {
    for (var k in temp) {
      if(temp.hasOwnProperty(k)){
        this[k] = temp[k];
      }
    }
  }
}


// 3.mixin+原型：不换原型，给原型混入
class = {
  addClass:function(){}
}
jQuery.prototype.extend = function(temp) {
  for (var k in temp) {
    if(temp.hasOwnProperty(k)){
      this[k] = temp[k];
    }
  }
}
jQuery.prototype.extend(class)

经典继承：
ES5提供了一个方法： Object.create(obj);
返回值：一个新的对象
参数：一个对象，这个对象会成为新对象的原型对象

var lw = {
  money: 1000000,
  car: "劳斯莱斯"
}
var newObj = Object.create(lw);

如何安全的扩展内置对象：
需求：要给所有创建的数组增加一个方法，sayHi的方法
注意：永远不要去修改内置对象。

function MyArray() {}
MyArray.prototype = new Array() / [空数组];
MyArray.prototype.push = function() {
  console.log("hehe");
}
var arr = new MyArray();
arr.push();
var arr2 = new Array();
console.log(arr2.push(1, 2, 3));

13.函数进阶

定义函数：
- 1.函数声明：function fn(){}
  函数声明会提升，因此可以先调用，后声明
  函数声明：必须要有名字 ()里面只能出现表达式
  !function( ){ }( );等同于匿名函数自调用
- 2.函数表达式：var fn = function() {}
  函数表达式只会将函数名提升，所以只能在赋值后调用函数。
- 3.构造函数的方式 function是复杂类型
  Object:内置构造函数，用来创建对象的
  Function:内置构造函数，用来创建函数的
  参数： arg1,arg2,arg3.....body
  1. 所有的参数都是字符串
  2. 前面可以指定任何多个形参，最后一个参数是代码体

    var fn1 = new Function("a1", "a2", "alert(a1+a2)");
    fn1(1,2);//3

14.eval的作用：

将一段字符串当成代码来执行。eval("alert(1+2)");
代码编辑器：

button.onclick = function() {
  var content = txt.value;
  eval(content);
}

eval 让一个json字符串转换成js对象。

15.json:

一种通过的数据交换的格式，就是一个字符串，只不过这个字符串有一定的规则。
var json = '{"name": "zs", "age": 18, "sex": "男"}';
把json字符串转换成js对象：
var obj = JSON.parse(json);
参数：json字符串
返回值：js对象
把js对象转换成json字符串：
var json = JSON.stringify(obj);
eval也可以把一个json字符串转换成js对象（少用）
var json = '{"name": "zs", "age": 18, "sex": "男"}';
eval会把字符串当成js代码来解析
var obj = eval("(" + json + ")"); //{}不止有对象的意思，还有代码块的意思

16.this的指向:

函数：当一个函数不是一个对象的属性时，我们称之为函数。
方法：当一个函数被保存为对象的一个属性时，我们称之为方法。
this：
1.函数调用模式：this指向的是window
2.方法调用模式：this指向调用当前方法的对象
3.构造函数调用模式：如果函数是new调用的，此时this被绑定到创建出来的新对象上
4.上下文调用模式：call、apply
- Call：
  可以调用一个函数，并且可以指定这个函数的this指向
  第一个参数可以指定函数内部的this指向
  fn.call(thisArg, arg1, arg2, arg3);==fn(arg1, arg2, arg3)
- Apply:
  apply()方法的作用和 call()方法类似，只有一个区别，就是apply()方法接受的是数组或者伪数组，里面存放了所有的参数列表。而call()方法接受的是若干个参数的列表。
  apply有一个特性：平铺特性， apply会把数组里面的每一项都当成参数。
  fn.apply(thisArg, [arg1, arg2, arg3]);==fn(arg1, arg2, arg3)
5.bind：创建一个新的函数, 可以绑定新的函数的this指向
返回值：新的函数
参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。
var newFn = fn.bind(window);

17.伪数组：

1.伪数组其实就是一个对象，但是跟数组一样，伪数组也会有length属性，也有0,1,2,3等属性。
2.伪数组并没有数组的方法，不能使用push/pop等方法
3.伪数组可以跟数组一样进行遍历，通过下标操作。
4.常见的伪数组：arguments、document.getElementsByTagName的返回值、jQuery对象
5.伪数组借用数组的方法：Array.prototype/ [ ].push.call(arrLike, "赵六");
6.将伪数组转换成真数组：var arr = Array.prototype/ [ ].slice.call(arrLike);或者通过es6let arr = [...arrLike]

18.完整版原型链:

函数是由new Function创建出来的，因此函数也是一个对象，所有的函数都是new Function的实例。

完整版原型链

原型链神图.jpg

总结：
所有函数都是new Function创建出来的，因此所有函数._proto都是Function.prototype
所有对象都是new Object创建出来的，因此所有对象._proto都是Object.prototyp

19.ECMAScript族谱

ECMAScript族谱

Function.prototype成员:
1.arguments：获取函数的实参，被函数内部的arguments替代了。//只能在函数内部用，es6中用rest代替
2.length：获取形参的长度
3.name：获取函数的名字，此属性不允许修改
4.caller:用于获取当前在函数是在哪个函数中调用的，已经被废弃了。
5.constructor：指向当前构造函数，Function
6.call：调用函数，重新指向this
7.apply：调用函数，重新指向this
8.bind：重新指向this，返回一个新的函数，不调用。
arguments使用场景：//只能用于函数内部，相当于函数内部的属性

/*jQuery的css方法
设置单个样式：.css(name, value)
设置多个样式：.css(obj)
获取样式.css(name)*/

function css() {
  if (arguments.length === 2) {
    console.log("要执行设置单个样式的操作");
  }
  if (arguments.length === 1) {
    var temp = arguments[0];
    if (typeof temp === "object") {
      console.log("要执行设置多个样式的操作");
    }
    if (typeof temp === "string") {
      console.log("要执行的是获取样式的操作");
    }
  }
}

function max() {
  return Math.max.apply(Math, arguments);
}
console.log(max(1, 2, 3, 4, 55, 6, 7, 8, 9));// 55

20.字面量和变量

字面量（直接量）：从字面的意思就能看出来类型和值 55 "abc" true [] {}，浏览器能够直接显示字面量。
变量：可以变化的量，必须要先声明，才能使用，如果变量没有声明，浏览器不认识，就会报错。

21.预解析：

1.函数优先，先提升函数,再提升变量
2.如果有同名的变量，会直接忽略
3.如果有同名的函数，会覆盖

22.作用域：

作用域：变量起作用的区域，作用域决定了一个变量该定义在哪里，该如何获取
全局变量：定义在函数外面的变量，全局变量，特点：在任何地方都可以访问
局部变量：定义在函数内部的变量，局部变量，特点：只有在当前函数内部才可以使用
js的作用域： 静态作用域（词法作用域）
查找变量的时候，变量的在函数声明的时候，作用域就已经定下来了。
查找变量的时候，看的是函数的声明，不管哪里调用
如果函数声明是在代码块{}里面的话，函数的名字会提升，但是函数体不提升。
不要在代码块里面声明函数。用函数表达式
全局作用域：只要页面不关闭（卸载），全局作用域会一直存在，全局变量
函数作用域：函数调用时，就会形成一个函数作用域，内部的变量都是局部变量，函数调用结束时，函数作用域就释放了，局部变量就释放。
变量的搜索原则：
从当前作用域向上找，如果一个变量不存在，获取这个变量的值会报错xxx is not defined;，给这个变量设置值，那么设置变量就是隐式全局变量。
函数传形参=函数内部var 形参。
面试题

//作用域面试题1：
var num = 10;
fn1();

function fn1() {
  console.log(num);
  var num = 20;
  console.log(num);
}
console.log(num);

//作用域面试题2：
var num1 = 10;
var num2 = 20;

function fn(num1) {
  num1 = 100;
  num2 = 200;
  num3 = 300;
  console.log(num1); //100
  console.log(num2); //200
  console.log(num3); //300
  var num3;
}
fn();
console.log(num1); //10  100
console.log(num2); //200
console.log(num3); //报错

//作用域面试题3：
fn3();
console.log(c); //9 undefined
console.log(b); //9 
console.log(a); //报错

function fn3() {
  var a = b = c = 9;
  console.log(a); //9
  console.log(b); //9
  console.log(c); //9
}

//作用域面试题4：
var num = 1;

function fn() {
  var num = 100;
  num++;
  console.log(num);
}
fn(); //101
fn(); //101
console.log(num); //1

//作用域面试题5：
var color = "red";

function outer() {
  var anotherColor = "blue";

  function inner() {
    var tmpColor = color;
    color = anotherColor;
    anotherColor = tmpColor;
    console.log(anotherColor);
  }
  inner();
}
outer();
console.log(color); //red blue

//This面试题1：
var obj = {
  sayHi: function() {
    console.log(this);
  }
}
var fn = obj.sayHi;
fn(); //请问打印结果是什么？

//This面试题2：
var fn = function() {
  console.log(this);
}
var obj = {
  sayHi: fn
}

//This面试题3：
var age = 38;
var obj = {
  age: 18,
  getAge: function() {
    console.log(this.age); //???
    function foo() {
      console.log(this.age); //????
    }
    foo();
  }
}
obj.getAge();

23.递归函数：函数内部直接或者间接的调用自己

1. 函数直接或者间接自己调用自己
2. 递归一定要有结束的条件（死递归）
化归思想：

// 1.计算1-n之间所有数的和
function getSum(n) {
  if (n == 1) {
    return 1;
  }
  return getSum(n - 1) + n;
}
console.log(getSum(100));

// 2.计算斐波那契数列
var arr = [];
function fib(n) {
  if (n == 1 || n == 2) {
    return 1;
  }
  return fib(n - 1) + fib(n - 2);
}
console.log(fib(100));

var n1 = 1;
var n2 = 1;
var num = 0;
for (var i = 3; i <= 12; i++) {
  num = n1 + n2;
  n1 = n2;
  n2 = num;
}
console.log(num);

递归实现深拷贝

24.闭包：

为何需要闭包：
在js中，函数会形成函数作用域，在函数内部可以直接访问全局变量，在函数外部却无法访问函数内部的变量；在函数内部有一个函数，那么函数内部的函数是可以访问到外部函数的变量的。闭包就是能够读取到其他函数内部变量的函数。
定义在函数内部的函数，用来连接函数内部与外部的桥梁。
闭包应用：

//1.计数器：
function outer() {
  var count = 0;

  function add() {
    count++;
    console.log("当前count" + count);
  }
  return add;
}
var result = outer();
result();

//2.私有变量的读取和设置：
function outer() {
  var num = 10;

  function set_num(n) {
    num = n;
  }

  function get_num() {
    return num;
  }
  return {
    set_num: set_num,
    get_num: get_num
  }
}
var obj = outer();
obj.set_num(2000);
console.log(obj.get_num());

//3.实现缓存：
//缓存（cache）：数据的缓冲区，当要读取数据时，先从缓冲中获取数据，
                                       //如果找到了，直接获取，
                                       //如果找不到，重新去请求数据。
function outer() {
  //缓存
  var arr = [];
  var fbi = function(n) {
    if (n == 1 || n == 2) {
      return 1;
    }
    if (arr[n]) {
      return arr[n];
    } else {
      var temp = fbi(n - 1) + fbi(n - 2);
      arr[n] = temp; //存入缓存
      return temp;
    }
  }
  return fbi;
}
var fbi = outer();
console.log(fbi(40));

Js垃圾回收机制：

引用记数垃圾收集：如果没有引用指向某个对象（或者是函数作用域），那么这个对象或者函数作用域就会被垃圾回收机制回收。

var o = {
  name:"zs"
}
//对象被o变量引用  ，引用记数1
var obj = o;   //变量被o和obj引用，引用记数2

o = 1;  //o不在引用对象了， 引用记数1
obj = null; //obj不在引用对象了，引用记数0，可以被垃圾回收了。

闭包占用内存释放：

function outer(){
  var count = 0;

  function fn(){
    count++;
    console.log("执行次数"+count);
  }
  return fn;
}

var result = outer();
result();
result = null;//当函数fn没有被变量引用了，那么函数fn就会被回收，
              //函数fn一旦被回收，那么outer调用形成的作用域也就得到了释放。

闭包面试题：

打印当前按钮对应的下标：
第一种：使用let定义变量   es6  let特点：{}也能形成作用域
var btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log(i);
  }
}

第二种： 使用属性存储下标
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].index = i;
  btns[i].onclick = function () {
    console.log(this.index);
  }
}

第三种： 使用forEach遍历
var btns = document.querySelectorAll("button");
btns.forEach(function (e, i) {
  //e:是每一个元素   i:每一个下标
  btns[i].onclick = function () {
    console.log(i);
  }
});

第四种：闭包解决
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  (function (num) {
    btns[num].onclick = function () {
      console.log(num);
    }
  })(i);//调用btns.length-1次匿名函数，每次调用都产生相应的函数作用域，
        //在每个相应的函数作用域中给注册事件赋值一个函数
}

第五种：
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function (num) {
    function fn() {
      console.log(num);
    }
    return fn;
  })(i);//给btn注册btns.length-1次事件赋值，每次注册调用匿名函数产生相应的函数作用域
}


使用setTimeout  每秒钟打印一个数字  0， 1， 2，3，4，5，6，7，8，9
第一种：let
for(let i = 0; i < 10; i++){
  setTimeout(function () {
    console.log(i);
  }, i * 1000 )
}

第二种:闭包
  for(var i = 0; i < 10; i++){
    (function (num) {
      setTimeout(function () {
        console.log(num);
      }, num * 1000)
    })(i);
  }

第三种:闭包
for(var i = 0; i < 10; i++){
  var fn = (function (i) {
    return function(){
      console.log(i);
    }
  })(i);
  setTimeout(fn, i * 1000);
}

25.正则表达式：js中常用于表单验证。

创建：
1.构造函数的方式：var regExp = new RegExp(/\d/);
2.正则字面量：var regExp = /\d/;
3.正则的使用：/\d/.test("aaa1");
普通字符：abc
元字符：具有特殊意义的字符
\d: 数字
\D: 非数字
\w: 单词字符 a-zA-Z0-9_
\W: 非单词字符
\s: 不可见字符空格 \t \n
\S: 可见字符
. : 任意字符 (\n)
\.: 匹配.
|: 或优先级最低
(): 优先级最高的
[]: 一个字符的位置，里面是可以出现的字符
[^] :^表示非
^表示开始
$表示结束
^$ 表示精确的匹配
*表示出现0次或者0次以上
+ 表示 1次或者1次以上
?表示 0 次或者 1次
{n,m} 出现n次到m次 * {0,} + {1,} {0,1}
{n,} 出现n次或者n次以上
{n} 出现n次
常见验证：
var phoneReg = /^0\d{2,3}-\d{7,8}$/;
var qqReg = /^[1-9]\d{4,11}$/;
var mobileReg = /^1[345789]\d{9}$/;
var nameReg = /^[\u4e00-\u9fa5]{2,4}$/;
var emailReg = /^\w+@\w+(.\w+)+$/;

正则的参数： /\d/g :global 全局的 i: ignore:忽略大小写
字符串替换：

题1：var str = "   123AD  asadf   asadfasf  adf  ";
①.把所有 ad 换成 xx
str = str.replace(/ad/g, "xx");

②.把ad /AD /aD /Ad  都换成xx
str = str.replace(/ad/gi, "xx");

③.把str中所有的空格去掉
str = str.replace(/\s/g, "");

题2：var str = "abc,efg,123,abc,123,a";
所有的逗号替换成 !
str = str.replace(/,/g, "!");

题3：var jsonStr = '[{"name":"张三",score:8},{"name":"张三",score:90},{"name":"张三",score:81}]';
把所有成绩都修改成100分
jsonStr = jsonStr.replace(/\d{1,2}/g, "100");

字符串传匹配，匹配所有分数
var reg = /\d{1,2}/g;
var arr = jsonStr.match(reg);
console.log(arr);

题4：var str = "大家好，我是xxx,我的手机号码是18511112222,我前女友的手机号码是13222221111,我的现女友的手机号码15555555555";

var reg = /1[345789]\d{9}/g;
var arr = str.match(reg);
console.log(arr);