javaScript中的高级技巧

函数绑定

函数绑定这个是一个很是流行的一个对函数的一种使用技巧，它经过在特定的this环境下去指定参数的形式，去调用一个函数，这就称做是函数绑定。

在咱们用的最广泛的一个地方，就是在React使用面向对象编程的时候，绑定一个点击事件的状况，就是属于函数绑定的范畴。

函数绑定有什么做用呢，一样的咱们以一个点击事件做为例子

<button id = 'dd' name='anta'>点击点击点击</button>

 const test = {
       name: 'nike',
       click: function(){console.log(this.name) 
 }}
 const bb = document.getElementById('dd')  
 bb.addEventListener('click', test.click)  //anta
复制代码

预期的话，咱们是要打印出来nike的，可是实际上由于javaScript里面的this指向不是在定义的时候指向的，而是调用的时候才有具体的只想，因此这里的click函数里面，this的指向其实是指向了button，因此打印出来的this.name是anta，因此打印出来的也是anta。

那么要解决这种问题，就须要用到函数绑定了

const bb = document.getElementById('dd')  
bb.addEventListener('click', function(event){test.click(event)})  //nike
复制代码

在React里面咱们通常上来讲是使用bind（）这个方法来绑定函数this的指向也是能够的。

const bb = document.getElementById('dd')
bb.addEventListener('click', test.click.bind(test)) //nike
复制代码

函数柯里化

函数柯里化的意思，其实简单点来讲的话，就是使用一个闭包去返回一个函数，它跟函数绑定的原理是同样的，惟一的区别就是返回的函数里面还须要设置一些参数。

用一个比较通俗一点例子来讲明

function test1(num1, num2) { 
     return num1 + num2
}
function test2(num3) {  
    return test1(1, num3)
}
console.log(test2(2))  //3
复制代码

虽然这个不是函数柯里化，可是意思就是那个意思。

那么，咱们要怎么去建立一个柯里化的一个函数呢，下面有一个比较通用的一个方法来帮助咱们建立一个柯里化函数。

function test1(fn) { 
     const arg = Array.prototype.slice.call(arguments, 1)  
    return function () {    
    const innerAge = Array.prototype.slice.call(arguments)    
    const str = innerAge.concat(arg)    
    return fn.apply(null, str)  
    }
}
复制代码

它的意思也比较简单，经过调用Array对象的slice方法，而后经过call将这个方法只想arguments，同时传入一个1，也就是从第一位开始截取。

这里的arguments是一个类数组，表示的意思就是函数传进来的全部值的一个数组集合体。

而后你二个arguments对应的就是test1内部的function的传值，接着上下两个数组拼接起来，最后经过apply传递给fn去使用，这个fn就是指代外部传进来的执行函数。

例如能够这样去使用这个柯里化函数：

function add(num1, num2) {  
    return num1 + num2
}
const data = test1(add, 5, 6)alert(data())  //11
复制代码

柯里化函数能够帮助咱们完成一些相对复杂的函数的建立，可是使用的时候仍是须要谨慎使用，由于存在闭包的关系，会对性能有必定的损耗。

防止篡改对象

由于javaScript是一门弱类型语言，也就意味着对象的篡改不像其它语言同样有大量的限制，因此为了防止对象被篡改，这里介绍三种方法。

锁定对象

锁定对象，或者能够说是不可扩展的对象。

咱们知道，咱们是能够随时对一个对象进行扩容的，而没有太多的限制。

const test = {  name: 'nike',}
test.book = 'haha';
alert(test.book) //haha
复制代码

可是若是把这个对象变成了不可扩展的，那么就能够避免这种事情发生。

方法是——Object.preventExtensions

它的使用效果就会把一个对象给变成不可扩展的状态，例如

const test = {  name: 'nike',}
Object.preventExtensions(test)
test.age =18alert(test.age) //undefined
复制代码

密封对象

上面介绍的方法，虽然可让对象变成不可扩展的状态，可是这时候的对象仍是能够删除，这时候要想把这个对象变成既不能够扩展，也不能够删除的，要怎么操做呢。

这时候就能够借用这个方法——Object.seal（）

这个方法的使用也跟上面的方法同样。

const test = {  name: 'nike',}
Object.seal(test)delete 
test.namealert(test.name) // nike
复制代码

冰冻对象

若是说一个对象既不能够扩展了，也不能够删除了，那么还能够干吗呢。

没错，就是修改，经过seal（）这个方法的对象，它里面的属性依然是能够外部直接修改的，那么，要想让一个对象属性变成既不能够被删除，也不能够扩展，同时还不能被修改，有没有什么办法呢，答案固然是有的。

那就是冰冻对象——Object.freeze（）

经过Object.freeze包裹后的对象，就会变成完全的冰冻住，不能对它作任何的改动了。

注意一点

以上的方法，在对对象使用了以后，好比使用了Object.freeze（） 而后依然去修改这个对象，在普通模式下，会返回一个undefinded，可是在严格模式下，是会报错的，这里是一个须要注意的地方。

最后

一些高级技巧里面还有一些相似安全做用域这些，后面均可以经过ES6+新的方法来实现，这里就不去作那些麻烦的讲解了。

这篇博客也是我学习的一个记录，若是以为对你有所帮助的话，点个赞呀！！