js中call、apply和bind的区别和原理及扩展的高级运用_WEB前端开发

html5不常用标签可以怎么使用？_WEB前端开发

作为一个前端开发，在浏览别人家的页面时总是会习惯性的查看他们页面的源码，发现大多数网站的页面中用到的最多的布局元素无外乎就是div、p、span、ul、dl、ol、li、dt、dd、strong、b，不管是什么样的效果都是由这些元素组成。

前言

在面试的过程中，会有许多新问题出现来让你拓展新的知识，也会发现学习中忽略的点。

在前两天的一次面试中，面试官就问了call、apply和bind的区别。

事实上，我们也应该领悟得到面试官更想问到的东西是什么，也就是拓展出来的东西。

call

call是所有函数都能调用的方法，是Function.prototype里的方法

作用

1. 调用函数

2. 改变this，作为第一个参数

3. 传递参数，第二个参数之后的所有个数的参数

案例

function fn1(){
    console.log(1);
}
function fn2(){
    console.log(2);
}
fn1.call(fn2); //输出 1
fn1.call.call(fn2); //输出 2

解析：

第一行输出，调用了fn1并将this指向fn2

第二行输出，事实上，执行的call()才是关键，这里就涉及了Function.prototype.call()的机制，它只是把.call()之前的代码段当作一个变量，将传递的代码段指向this，则fn1.call指向了fn2，于是就相对于fn2.call()，只是这里传递的this为window

运用

• 继承的方法

    function Father(uname,age){
        this.uname= uname;
        this.age=age;
    }
    Father.prototype={
        constructor:Father,
        sing:function(){
            console.log("唱跳rap");
        }
    }
    function Son(){
        Father.call(this,uname,age)
    }
    Son.prototype=new Father();

apply

apply同样也是所有函数都能调用的方法，是Function.prototype里的方法

作用

1. 调用函数

   css如何实现模糊背景效果_WEB前端开发

   css实现模糊背景效果的方法：在父容器中设置背景，并且使用相对定位。
   

   
   

   而在:after中只需要继承背景，并且设置模糊，绝对定位覆盖父元素即可。
   

   
   

   这样父容器中的子元素就可以不受模糊程度影响。
   

   
   

2. 改变this

3. 传递参数，第二个参数之后的所有数组参数

与call的区别

apply第二个参数是Array，而call是将参数以个数的形式传入

运用

• 运用Math函数获取最大值

    let arr=Array.of(2,42,56,89,1,24,56,22)
    let max=Math.max.apply(Math,arr)
    console.log(max);

bind

bind同样也是所有函数都能调用的方法，是Function.prototype里的方法

作用

1. 改变this

2. 传递参数，第二个参数之后的所有个数参数

3. 返回新函数

与call、apply的区别

与前两者的最大不同就是不会调用函数并且修改后返回新的函数

运用

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(function(){
            this.disabled=false;
        }.bind(this),2000);
    }
}

上面的案例修改了定时器的this，同时不会调用函数。

但事实上如果你用了箭头函数的写法，因箭头函数的this是关乎上下文的this，因此会简单许多，这个案例意在给我们理解bind的用法，那么在下面附上箭头函数的写法

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(()=>{
            this.disabled=false;
        },2000);
    }
}

推荐教程：《JS教程》

以上就是js中call、apply和bind的区别和原理及扩展的高级运用的详细内容，更多请关注ki4网其它相关文章！

了解css中的关键字initial、inherit、unset、revert和all属性_WEB前端开发

在CSS中，有4个关键字理论上可以应用于任何的CSS属性，它们是initial(初始)、inherit(继承)、unset(未设置)、revert(还原)。

而all的取值只能是以上这4个关键字。

本文将介绍initial、inherit、un