侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

javascript中apply()、call()、bind()的用法

2024-05-16 星期四 / 0 评论 / 0 点赞 / 95 阅读 / 2616 字

apply、call、bind的作用都相同,都是把函数添加都某个对象上。 首先来看一下apply的用法: <!DOCTYPE html><html lang="en"><head> <meta

apply、call、bind的作用都相同,都是把函数添加都某个对象上。

首先来看一下apply的用法: 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title></head><body>    test</body><script>    function sum(a,b){        return a+b;    }    function callsum1(a,b){        return sum.apply(this,arguments);    }    function callsum2(a,b){        return sum.apply(this,[a,b])    }    console.log(callsum1(10,10));//20    console.log(callsum2(10,10));//20</script></html>

apply和call的区别在于接受参数的不同,只需要根据参数类型来判断使用apply还是call即可。
然后来看一下call的用法:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title></head><body>    test</body><script>    console.log(factorial(5));*/    function sum(a,b){        return a+b;    }    function callsum(a,b){        return sum.call(this,a,b);    }    console.log(callsum(10,10));//20</script></html>

事实上,传递参数并非apply和call真正的用武之地,他们真正强度大的地方在于能够扩充函数赖以运行的作用域。下面来看一个例子:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title></head><body>    test</body><script>    window.color = "red";    var o = {color:"blue"};    function  sayColor(){        console.log(this.color);    }    sayColor();//red    sayColor.call(this);//red    sayColor.call(window);//red    sayColor.call(o);//blue    sayColor.apply(this);//red    sayColor.apply(o);//blue</script></html>

ECMAScript 5 还定义了一个方法:bind()。这个方法创建一个函数的实例,其this会被绑定到传给bind()函数的值。例如:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title></head><body>    test</body><script>    window.color = "red";    var o = {color:"blue"};    function  sayColor(){        console.log(this.color);    }    var objectSayColor = sayColor.bind(o);    objectSayColor();//blue</script></html>

 

广告 广告

评论区