前端知识小节--js中改变this指向的三种方式

最新推荐文章于 2023-05-04 10:13:41 发布

大大大程序员

最新推荐文章于 2023-05-04 10:13:41 发布

阅读量333

点赞数

分类专栏：校园学习文章标签： js中改变this指向 javascript 前端 call，apply，bind

本文链接：https://blog.csdn.net/weixin_43371610/article/details/85247741

版权

校园学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在写代码完成项目的过程中我们经常会遇到需要改变this指向来实现功能的时候，以下三种方式是常用的改变this指向的方法：

1.call

call中的参数有多个，如：

aa.call(obj,num1,num2);

obj是函数运行的作用域，num1,num2是要给函数传的参数；
以下是call方法的测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function aa(num1,num2) {
        console.log(this,num1,num2);
        console.log(this.name);
    }
    aa(1,2);
    var obj={
        name:'张三'
    }
    aa.call(obj,1,2);

</script>
</body>
</html>

在这里插入图片描述
2.apply
apply中的参数有两个，如：

aa.apply(obj,[num1,num2]);

obj是函数运行的作用域，num1,num2是要给函数传的参数,与call不同apply要以数组的形式穿参。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function aa(num1,num2) {
        console.log(this,num1,num2);
        console.log(this.name);
    }
    aa(1,2);
    var obj={
        name:'张三'
    }
    aa.apply(obj,[3,4])
</script>
</body>
</html>

运行结果如下：
在这里插入图片描述

3.bind

bind拥有多个参数，如：

aa.bind(obj,num1,num2)();

obj是函数运行的作用域，num1,num2是要给函数传的参数,与call不同则是需要在后面加上（）来调用。
以下附上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function aa(num1,num2) {
        console.log(this,num1,num2);
        console.log(this.name);
    }
    aa(1,2);
    var obj={
        name:'张三'
    }
      aa.bind(obj,5,6)();
</script>
</body>
</html>

运行结果如下：

在这里插入图片描述
希望以上内容对大家的学习有所帮助！！！

大大大程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识小节--js中改变this指向的三种方式

在写代码完成项目的过程中我们经常会遇到需要改变this指向来实现功能的时候，以下三种方式是常用的改变this指向的方法：1.callcall中的参数有多个，如：aa.call(obj,num1,num2);obj是函数运行的作用域，num1,num2是要给函数传的参数；以下是call方法的测试：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;...
复制链接

扫一扫