前言:
而今你们对“js高级”都比较看重,咱们都需要知道一些“js高级”的相关资讯。那么小编也在网摘上收集了一些有关“js高级””的相关内容,希望我们能喜欢,同学们一起来了解一下吧!函数绑定
函数绑定这个是一个非常流行的一个对函数的一种使用技巧,它通过在特定的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+新的方法来实现,这里就不去做那些麻烦的讲解了。
作者:切图老司机
链接:
来源:掘金
标签: #js高级