16种JavaScript设计模式

简介 设计模式的定义是:在面向对象软件设计过程中针对特定问题的优雅而简洁的解决方案。 就好比在足球比赛中我们把“边后卫快速突破后向球门方向传出高球,中路队员接应头球攻门”这种战术称作“下底传中”一样是针对一些常见问题设计的解决方案。 相信大家在程序开发中都会碰到类似的情况:感觉自己的代码写的不优雅,但不知道从如何下手去优化,虽然暂时解决了问题,但是却留下了很大的风险,一旦遇上了一些诡异的bug或者新的需求变动,就会发现自己都已经理不清代码逻辑了根本无从下手。通过学习设计模式可以帮助我们开拓思路,用更好的结构调整代码。 在学习设计模式之前有几个基础概念需要了解:

  1. this指向
  2. 闭包
  3. 高阶函数
  4. 原型,原型链

(关于这几个知识点网上已近有很多教程提及了。以下是我个人的一些总结希望用简短的语言帮助你更好的理解他们)

基础知识 this指向 总结:“函数中的this基本都指向函数的调用者”

// 示例一

function demo1() {

console.log(this)

}

// 示例二

var demo2 = {

log() {

    console.log(this)

}

}

// 示例三

var demo3= {

log() {

    setTimeout(function print(){ // 给一个函数名方便理解

        console.log(this)

    },1000)

}

}

demo1() // window;

demo2.log() // {log: f};

demo3.log() // window; demo1(): 可以理解成window.demo1() 所以调用者是window, this =window demo2.log(): log方法的调用者是demo2 所以this=demo2 demo3.log(): 本示例中print方法作为参数传给了setTimeout方法, 所以在调用demo3.log()时并未执行该方法,而是在1s的延时之后执行了print这是调用者又变成了window 所以this=window 既然有一般情况,那肯定也存在几种特殊的情况: // 第一种:new (作为构造函数调用) function Demo() {

this.a = 1;

console.log(this)

}

new Demo() // {a: 1}

// 第二种:apply、call

function log() {

console.log(this, arguments)

}

var target = {a: 1}

log.apply(target, [1,2,3]) // {a:1} [1,2,3]

log.call(target, 1, 2, 3) // {a:1} [1,2,3]

// 第三种:bind、箭头函数

log.bind(target)

log(1, 2, 3) // {a:1} [1,2,3]

// 使用之前的demo3做示例

var demo3= {

log() {

    setTimeout((function print() {

        console.log(this)

    }).bind(this), 1000)

    // 等同于 setTimeout(() => console.log(this), 1000)

}

}

demo3.log() // {log: f} 使用new关键字调用函数时会先声明一个新的对象然后将函数中的this指这个新的对象,所以例子中可以理解成先执行了this ={}然后再执行之后的内容 apply、call是两个常用的改变函数this指向的方法,他们的第一个参数是替换this的对象可以理解成先执行了this =target,区别在于第二个参数。apply的第二个参数是一个数组这个数组会拆一个个参数传入函数([1,2,3]会变成log(1,2,3)),而call会将第二个及之后的参数作为函数的参数传入函数 bind和箭头函数其实是一种方式(箭头函数其实是一种语法糖简化了bind写法), 由于现在箭头函数用的比较多所以放在一起说下。 bind方法的作用是绑定函数的作用域但是不会立即执行这个函数,这也更符我们的使用场景。我们改写了demo3的实现,在声明print方法的同时使用bin方法绑定了this。当我们调用demo3.log时,这时this指向调用者demo3,所bind中的this就是demo3,即使延时了1s执行this指向也不会因为调用者的改而改变 闭包 总结:“函数的内部变量被其内部函数暴露给外部对象使用”,在本质上,包就是将函数内部和函数外部连接起来的一座桥梁

作用:1. 持久保存变量 2. 隔离作用域

作者:嘿哟写bug呢 链接:https://www.jianshu.com/p/455c0e34a3c0 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

0评论