javaScript

Posted 2020-12-10 杨景贵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript相关的知识，希望对你有一定的参考价值。

javascript 高级

简述
从 MVC 到 MVVM
再从面向对象编程到原型、作用域链、闭包、递归、DOM 和 BOM
MVC & MVVM & oop & prototype & scope chain & closure & recursion & DOM & BOM

MVC

一种编程的‘架构模式’
表现与数据分离
Modle : 数据层
View : 表现层
Controller : 控制层
通过控制层将数据层与表现层揉合在一起展示给用户
也是一种模块化的思想
一个形象的比喻：加工厂
- 原料：Modle 层
- 模具：View 层
- 机床：Controller 层
缺点
- 增加了结构的复杂性
- 不适合小型项目的开发
- 运行效率低

MVVM

典型的代表：AngularJS
核心：不用再关注数据如何呈现在给用户，由框架更新 Module 和 View
ng 也提供了自定义的 ViewModel：directive(指令)

oop

在 JavaScript 中已经存在了对象的概念即： Object
在 JS 中的对象是无序属性的集合
可以通过字面量（直接量）或构造函数来定义
实现了代码的复用
而面向对象编程就是一种思想
即：把事物抽象成为一个个对象
再用代码来描述这些对象的特征、行为
例如：每个商品都抽象为一个对象
价格、数量、描述…
在面向对象的三大特征
- 封装
- 继承 (prototype)
- 多态
  - 在 JS 中多态这个特征就不能看成是方法的重载了
  - 只能理解为不同对象有这相同的方法
在 ES6 中引入了 class 的概念
class 关键字不过是提供了一种基于原型和构造函数的面向对象的继承方式的语法糖(syntactic sugar)
- class ：类
- constructor ：类构造器
- static ：类的静态方法
- extends ：继承父类
- super ：调用父对象上的函数

prototype 是实现面向对象继承的机制

/* 经典的继承模型 */
function create(obj){
    function F(){}
    F.prototype = obj;
    return new F;
}

prototype

prototype 是实现面向对象编程中继承的一种机制
最终达到代码的复用以及高效的编程
减少内存空间，内存空间的共享
站在不同的角度原型又有不同的解释
- 站在构造函数的角度 prototype 是构造函数的原型属性
- 站在对象的角度 prototype 是构造函数实例化出来的那个对象的原型对象
- 实际上指的都是同一个对象（原型）
具体讲一下原型
- 我们定义了一个字符串可以直接调用 charAt() indexOf() replace() toString() slice() substr() subString() concat()...
- 我们也没有给这个字符串添加这些方法，那它为什么就可以直接使用呢，这就是继承 String 的原型
- 继承不是单一的，一个对象可以继承自上一层的，也可以继承上上一层的
- 即：一个对象可以继承该对象的原型链上的所有成员
原型链
- 每个对象都有一个原型对象，而该对象的原型对象也有原型对象
- 于是就形成了一条最终指向 null 的原型链
- 原型链也是为了原型的有序查找
- 也体现了继承的层级关系
- 所有的函数都继承自 Function.prototype
- 所有的对象都继承自 Object.prototype
- 函数 Function 也是对象
- 而对象 Object 也是 Function 创建出来的实例
比较有意思的关系：先有鸡，还是先有蛋
- 所有的构造函数都是由 Function 创建的，即：Function 创建了 Object
- 所有的函数又是对象
- Function.prototype 相当于是 Function 的基因
- Object.prototype 相当于是 Object 的基因
- Function 创建了 Object
- 而 Function.prototype 又继承自 Object.prototype
对象属性的访问规则
- 首先在该对象中去查找是否存在该属性
- 如果不存在就去该对象的原型对象中去查找
- 如果还是存在就到原型链中去查找
- 最终找到原型链的末端 null
- 还是没有的话直接 undefined

scope chain

作用域
- 在每一门语言中作用域都是一比较重要的概念，它决定了变量的有权访问
- 块级作用域
  - 通过代码块 { } 来限定作用范围
- 词法作用域
  - 在变量定义的时候就已经决定了其作用范围，与代码的执行无关
  - 用函数来划分作用范围
  - 在函数内部可以访问函数外部的变量
- 当然通过自执行函数可以模拟块级作用域
作用域链
- 有联系的作用域之间就形成了一个链式结构
- 作用域链：保证变量的有序访问
变量的查找规则
- 首先在当前链中查找
- 如果没有到上一级链中去查找
- 如果还是没有就到上一级的上一级去查找
- 就这样一直查找下去，直到找到 0 级
- 如果还是没有则抛出异常

closure

闭包的基本结构：嵌套的函数
沙箱模式
闭包就是函数外部可以访问函数内部定义的变量
闭包的作用：
- 跨链访问
- 数据的私有化
- 缓存数据

实例：点击不同的按钮显示不同的图片

var btns = document.getElementsByTagName(‘li‘);
var img = document.getElementById(‘img‘);
var len = btns.length;
var imgs = [‘1‘, ‘2‘, ‘3‘, ‘4‘, ‘5‘];
for(var i = 0; i < len; i++){
  btns[i].onclick = (function(index){
    return function(){
      // console.log(index);
      for(var j = 0; j < len; j++){
        btns[j].className = ‘‘;
      }
      img.src = ‘imgs/‘ + imgs[index] + ‘.jpg‘;
      this.className = ‘current‘;
    }
  })(i);
}

recursion

递归：将问题归结为已经解决的问题
什么时候递归
什么时候跳出

求 n! 函数

/* 递归 */
function fn(n){
    if(n < 0) return ;
    if(n === 1) return 1;
    return fn(n - 1) * n;
}

/* 递归 + 闭包 */
var fn = (function(){
    var temp = [];
    return function(n){
        var res = temp[n];
        if(n < 0) return ;
        if(res){
            return res;
        }else {
            n === 1 ? res = 1 : res = arguments.callee(n - 1) * n;
            temp[n] = res;
            return res;
        }
    };
    })();

DOM 的深遍历

function getChild(dom, arr){
    var doms = dom.children;
    for(var i = 0; i < doms.length; i++){
        if(doms[i].children){
            arguments.callee(doms[i], arr);
        }
        arr.push(doms[i]);
    }
}