js相关


为什么使用es6的class类

OOP 即 面向对象编程 (Object Oriented Programming)
ES6 开始引入class的概念。实际上,JavaScript 中class的本质也是基于原型prototype的实现方式作了进一步的封装,其本质还是函数function。虽说如此,class和function还是有不同之处。
优点
使用class实现功能完全不用关心原型链和this会带来什么问题。this就是实例本身,可以专注的在内部进行维护开发,只用暴露方法给外部使用即可。
当一个功能足够单纯就完全可以用函数来实现,函数的通用性更强。因为就一个功能。class就好比,一个功能的集合,在里面可以对函数调用,可以使用this对内部状态和数据进行操作。

js-DOM事件流

事件发生时,会在元素节点之间按照特定的顺序传播,这个传播过程既‘DOM事件流’

  • 事件传播三个阶段
    w3c将 事件传播 分成3个阶段:
    捕获:从最外层祖先元素向目标元素进行捕获此时不会触发事件
    目标:事件捕获到目标元素,捕获结束,开始在目标元素上触发事件
    冒泡:事件从目标元素向他的祖先传递,依次触发祖先元素身上的事件
  • 事件捕获
    从外向里,一般情况下不会使用捕获阶段执行事件
addEventListener(‘click’,function(){
}, true)

第三个参数默认false 冒泡阶段

  • 事件冒泡(事件默认是冒泡阶段)
    事件默认是冒泡阶段
  • 事件委托概念
    利用事件冒泡机制实现事件委托,提供代码执行性能

数据类型&隐式转换

  • js数据类型分为基础类型和引用类型
    原始类型(基本类型):undefined、null、boolean、number、string
    引用类型(复杂类型):object

  • typeof 检测数据类型

    typeof(null) // object  为什么不是null   js历史遗留的一个bug
    typeof([]) // object
    typeof({}) // object
    typeof(function(){}) // function
    typeof(Array) // function  为什么不是object
    //js在设计时在引用类型内部方法[[call]] 方法, typeof 检测引用类型时看引用类型上有没有 [[call]] 方法,有返回 function, 没有返回 object
  • instanceof
    A 对象是否是 B 对象实例化后的对象

    console.log([] instanceof Array) // true
    console.log({} instanceof Object) // true
    console.log([] instanceof Object) // true   为什么?
    // 因为 instanceof 是顺着原型链去检测的
  • 除了typeof方法,检测数据类型方法

    Object.prototype.toString.call('1')
    console.log(Object.prototype.toString.call('1')) // string
    console.log(Object.prototype.toString.call([])) // Array
  • 特殊类型的隐式转换
    5种: NaN、0、undefined、null、”” => false / true
    栗子:

      if(val){ // 如果val 为以上5种时隐式转换为 false
    
      }else{
    
      }
      // 应该改为:
      if(!val){
    
      }else{
    
      }

开发中一些概念

  • 重载和多态?
    重载的概念: 在程序中可以定义相同的名字,不同参数形式的不同函数。调用函数时,自动识别不同参数对应的函数,实现了相同函数名,不同的函数调用。
    js本身是没有重载的,但是可以通过arguments实现函数重载。根据参数不同返回不同结果,执行不同逻辑。很多框架底层源码就是这样实现重载的。
    多态:同一个东西在不同情况下的表现不同状态。

js进阶概念

  • 深、浅拷贝有那些方式?
    概念: 假设B复制了A,当修改A时,看B是否发生变化,如果变化则是浅拷贝;如果B不变则是深拷贝。
    浅拷贝常用:
    for in 遍历 for in 目标对象取出key 创建新对象
    Object.creat() 会复制到proto原型上
    深拷贝常用:
    JSON.parse(JSON.stringify(obj))
  • 什么是闭包?
    函数和其周围的状态的引用捆绑在一起形成闭包
    可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域的成员。
    闭包的本质:
    函数在执行的时候会被放到一个执行栈上,当函数执行完毕后会从执行栈上移除。但是堆上的作用域成员因为被外部引用不能释放,因此内部函数依然可以访问外部函数的成员。
    闭包的好处是:延长了外部函数他内部变量的作用范围。
  • 什么的高阶函数?
    可以把函数当作参数传递给另外一个函数
    可以把函数当作另一个函数的返回结果
    常用高阶函数:
    ForEach、map、filter、some、reduce、stor、
  • 什么是纯函数?
    相同的输入永远会得到相同的输出,而且没有任何可观察的副作用

slice:返回数组中的指定部分,不会改变原数组 —纯函数
Splice: 对数组进行操作返回该数组,会改变原数组 —非纯函数

  • 什么是函数柯里化?
    当一个函数有多个参数时,先传递一部分参数调用他(这部分参数以后永远不变)
    然后返回一个新的函数接收剩余的参数,返回结果。
    总结:
    1、柯里化可以让我们给一个函数传递较少参数得到一个已经记住了某些固定参数的新函数
    2、这是一种对函数参数的缓存
    3、让函数变的更灵活,让函数的粒度更小
    4、可以把多元函数转化为一元函数,可以组合使用函数产生强大的功能
  • 什么是函数组合?
    如果一个函数要经过多个函的处理才能得到最终值,这个时候可以把中间过程的函数合并成一个函数。这些中间函数会相应得到中间结果这些结果我们不需要关注。函数组合默认是从右到左执行的。

文章作者: 尖椒土豆sss
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 尖椒土豆sss !
 上一篇
js常用方法 js常用方法
记录 js 常用方法js 类型判断 Object.prototype.toString // 以下是11种: var number = 1; // [object Number] var string = "123"; // [objec
2021-04-01 尖椒土豆sss
下一篇 
vue2源码探秘 vue2源码探秘
vue2.0 实现原理探秘vue底层渲染过程大致可以分成4个阶段: template 模板解析后生成AST语法树模板解析:通过正则等方式提取出 <template></template> 模板里的标签元素、属性、变量
2021-02-25
  目录
L
O
A
D
I
N
G