前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >this指向

this指向

作者头像
梨涡浅笑
修改2020-10-27 17:18:18
1.1K0
修改2020-10-27 17:18:18
举报
文章被收录于专栏:全栈自学笔记

1.this

1.1函数内部的this指向

这些 this 的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同

一般指向我们的调用者.

1.2改变函数内部 this 指向

JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题,常用的有 bind()、 call()、apply() 三种方法。

1.2.1 call方法

call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向

应用场景: 经常做继承.

代码语言:javascript
复制
 // 1. call() 
        var o = {
            uname:'andy'
        }
        function fn(a,b) {
            console.log(this);
            console.log(a + b);
        }
        fn.call(o,1,2);
        // call第一个可以调用函数第二个可以改变函数内的this 指向
        // call的主要作用可以实现继承
        function Father(uname,age,sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }
        function Son(uname,age,sex) {
            Father.call(this,uname,age,sex);
        }
        var ldh = new Son('刘德华',18,'男');
        console.log(ldh);

以上代码运行结果为:

thisArg:在 fun 函数运行时指定的 this 值

 1. arg1,arg2:传递的其他参数  2.返回值就是函数的返回值,因为它就是调用函数  3.因此当我们想改变 this 指向,同时想调用这个函数的时候,可以使用 call,比如继承

1.2.2 apply方法

apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的 this 指向。

应用场景: 经常跟数组有关系

代码语言:javascript
复制
  <script>
        // JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题,常用的有 bind()、 call()、apply() 三种方法。
        // 1. apply()  应用 运用的意思
        var o = {
            uname:'andy'
        }
        function fn(arr) {
            console.log(this);
            console.log(arr);
        }
        fn.apply(o,['red']);
        // 1.也是调用函数第二个可以改变函数内部的this指向
        // 2.但是他的参数必须是数组(伪数组)
        // 3. apply的主要应用比如说我们可以利用apply 借助于数学内置对象求最大值
        // Math.max();
        var arr = [1,33,22,54,78];
       var max = Math.max.apply(Math,arr);
       var min = Math.min.apply(Math,arr);
       console.log(max,min);
​
​
    </script>

运行结果:

1. thisArg:在fun函数运行时指定的 this 值

2.argsArray:传递的值,必须包含在数组里面

 3.返回值就是函数的返回值,因为它就是调用函数  4.因此 apply 主要跟数组有关系,比如使用 Math.max() 求数组的最大值

1.2.3 bind方法

bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数

如果只是想改变 this 指向,并且不想调用这个函数的时候,可以使用bind

应用场景:不调用函数,但是还想改变this指向

代码语言:javascript
复制
 <button>按钮</button>
    <script>
        // bind() 绑定 捆绑的意思
        var o = {
            uname:'andy'
        };
        function fn(a,b) {
            console.log(this);
            console.log(a + b);
        }
        var f = fn.bind(o,1,2);
        f();
         // console.log(arr);
        // 1.不会调用原来的函数可以改变原来函数内部的this 指向
        // 2.返回的是原函数改变this之后产生的新函数
        // 3.如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
        //4.我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
        var btn = document.querySelector('button');
        btn.addEventListener('click',function() {
            this.disabled = true; //这个this指向的是 btn这个按钮
            setTimeout(function(){
                // that.disabled = false; //定时器函数里面的this指向的是window
                this.disabled = false;  //此时定时器函数里面的this指向的是btn
            }.bind(this),3000) //这个this指向的是btn这个对象
        }) 
    </script>

运行结果

1.2.4 call、apply、bind三者的异同
  • 共同点 : 都可以改变this指向
  • 不同点:
    • call 和 apply 会调用函数, 并且改变函数内部this指向.
    • call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
    • bind 不会调用函数, 可以改变函数内部this指向.
  • 应用场景
    1. call 经常做继承.
    2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
    3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-10-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.this
    • 1.1函数内部的this指向
      • 1.2改变函数内部 this 指向
        • 1.2.1 call方法
        • 1.2.2 apply方法
        • 1.2.3 bind方法
        • 1.2.4 call、apply、bind三者的异同
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档