改变this指向---call(),apply(),bind()

最新推荐文章于 2022-04-16 22:05:39 发布
最新推荐文章于 2022-04-16 22:05:39 发布
阅读量72 收藏
点赞数
分类专栏： 前端 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44302255/article/details/120391839
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        var o = {
            name: 'ht'
        }


        // call()
        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        }
        fn.call(o, 1, 2)    //第一个参数为this指向


        //apply()   以数组形式传参
        var arr = [1, 4, 3, 6, 9];
        function fn2(myarr) {
            console.log(this);
            console.log(myarr);
        }
        fn2.apply(o, arr);  //1

        var max = Math.max.apply(Math, arr);
        var min = Math.min.apply(Math, arr);
        console.log(max, min);


        //bind()    
        //不会立即调用，结果返回一个新的函数  
        //通过bind方法返回的函数，不能再通过call/apply/bind改变内部的this指向了
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                setTimeout(function () {
                    this.disabled = true;
                }.bind(this), 3000)
            })
        }

        function fn3(a, b, c, d) {
            console.log(a, b, c, d);
        }

        //如果在绑定时，没有把所有参数都绑定，那么剩下的参数可以在调用时再设置值，绑定了的参数，不能再修改
        var f = fn3.bind(o, 1, 2);
        f();    //1 2 undefined undefined
        f(3, 4)  //1 2 3 4


    </script>
</body>

</html>

香菜xc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
改变this指向的call，apply，bind方法
diji9092的博客
07-12 130
var a = { user:"bgg", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢？如果我们直接执行a.fn()是可以的。 但是有时候我们不得...
改变this指向的三种方法，call()、apply()、bind()
leondong_56828的博客
09-16 195
改变this指向的三种方法，call()、apply()、bind()及各自的用法和应用场景 <script> //1 call()方法 const obj={ name:'张三', age:18 } function fn(a,b){ console.log("call方法de this指向",this);//Object console.log(a+b);//9 } fn.call(obj,3,6)//调用函数并改变th
Js-this指向问题、call()、apply()、bind()改变this指向
三季雨
07-22 608
0-零 - this几种指向 在全局中this：指向window。 对象方法中this：this指向该对象本身。 回调函数中this：指向window。 事件回调中this：指向e.currentTarget，给谁添加的事件监听就指向那个元素。 箭头函数中this：指向箭头函数外层的this。 类中this：指向实例化对象，哪个对象调用这个方法、this就指向哪个对象；静态方法和静态属性中：this指向这个类。 call()、apply()、bind()中：将函数中this的指
关于改变this指向的三种方式：call、apply、bind
weixin_47783830的博客
03-29 207
在写程序过程中，我们经常性的需要去改变函数的this指向问题，为此，js有专门提供的几个方法：call、apply、bind 他们都是因改变this指向而存在，但既然存在这么多种，一定有本质的区别，下面我们用代码来详细说明（实践是检验真理的唯一标准）： 创建一个简单的函数： 上面函数 fn 执行，打印结果如图 接下来，我们使用call,apply,bind方法去改变this能否成功 从上面可以看出apply方法报错，bind没执行，只有call执行成功。这是因为写法不同，我们按照官方提供的方法正确操作：
js中修改this指向的方法（call，apply，bind）
weixin_30700977的博客
09-03 230
前言：call、apply和bind都是为了改变某个函数运行时的this指向的，对于前端人员来说，关于this的掌握程度，直接决定了前端水平的高低。下面我们就来简单浅显易懂的来看一下es5中常用的三种修改this指向的方法。 1.call()方法 function test(m,n){ console.log(this.abc); } test();//这里打印的是unde...
JS中改变this指向的方法(call和apply、bind)
10-22
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生...但是总有一个原则，那就是this指的是调用函数的那个对象，通过本文给大家介绍JS中改变this指向的方法(call和apply、bind)，需要的朋友参考下
详解JS中的this、apply、call、bind(经典面试题)
10-19
JS中的this、apply、call、bind是一道经典面试题，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。下面就跟随脚本之家小编一起学习this、apply、call、bind的知识吧
this指向 箭头函数中的this call、apply和bind方法的用法以及区别
01-08
thisthis 指向看看箭头函数的案例call、apply和bind方法的用法以及区别来几个面试题试试 this 指向 1.普通函数的this：指向它的调用者，如果没有调用者则默认指向window. 2.箭头函数的this: 指向箭头函数定义时所处...
前端大厂最新面试题-bind_call_apply.docx
最新发布
06-06
_bind、call、apply 是 JavaScript 中的三个函数方法，用于改变函数的执行上下文，即改变函数中的 this 指向。下面我们将详细讲解这三个方法的使用和区别。 作用 _bind、call、apply 三者都是改变函数执行时的上...
js中this的改变指向的方法：call和apply、bind
岁月Ben的博客
08-10 546
在javascript中this是一个特殊的关键词，在不同的场合中this的值也在发生着变化，但是this都是指的是函数调用的对象，就是指函数的调用对象，但是为了实现某种功能，也对改变this的指向提供了一些函数： 1.call在继承的时候使用 例如： function Parent(age){ this.name=['mike','jack','smith']; this.age=
this指向及改变this指向的方法（call、apply、bind）
weixin_46449470的博客
07-04 273
this指向及改变this指向的方法 任何函数都有属于自己的this 函数的调用方式决定了this的指向 一、this指向window 1）、普通函数（声明式函数）调用，此时this指向window 2）、 箭头函数没有自己的this，它的this指向上下文中的this(即所处环境的this) 3）、赋值式函数调用，此时this指向window 4）、定时器函数，指向window //普通函数（声明式函数） function fn(){ console.log(this);//指向window }
call，apply，bind改变this指向
Little_ChenH的博客
03-08 484
推荐非常浅显易懂的一片文章，搭配代码实例，易于理解！this与call… 首先我们先要明确一点： this 永远指向最后调用它的那个对象！！！ 然后我们在看看这三种方法的异同： 1. call()主动执行，第一个参数为this要指向的对象，函数执行需要的实参依次写在后面。 2. apply()主动执行，第一个参数为this要指向的对象，第二参数为一个数组(类数组)，数组里包含所有实参...
仅限参考-改变this指向 call apply bind
前端菜鸟
02-13 183
var a = { user:"小明", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined var a = { user:"小明", fn:function(){ console.log(this.user); } ...
js改变this指向的方法：call apply bind
苦笔的博客
05-27 2233
在函数中使用this function foo(c, d) { return this.a + this.b + c + d } global.a = 3 global.b = 4 // foo执行时，this没有明确的指向，默认指向全局对象global // nodejs中是global，browser中是window foo(3, 4) // 14 ...
JS基础练习题及答案（五）
Hi_Eleven的博客
08-07 6408
一、单选题（共30题，每题2分） 1.闭包的好处说法不对的 A 缓存变量 B 防止命名冲突 C 可能造成内存泄露 D 减少内存使用率 正确答案: D 解析: 无 2.不属于同源策略限制条件的 A 端口 B 协议 C 域名 D 网址 正确答案: D 解析: 3.ES5中不能实现继承的关键字 A prototype B call C apply D extends 正确答案: D 解析: 无 4.alert(username);var username=“leson”;结果为 A undefined B les
js中改变this指向的三个常用方法bind,call和apply
sally_MF的博客
01-18 7699
一.bind:说起bind,很多人都会想起jquery中的bind绑定方法，给元素绑定事件，今天所讲的bind则是js的原生方法---可改变this的指向,下面我们来看演示：var name = 'sally'; function sayName(){ return this.name; } function sayName2(){ return this.name } var
JavaScript基础练习题（四）
热门推荐
qqatt的博客
02-21 2万+
一、单选题（共30题，每题2分） 得分：2.0分 1. 同步和异步执行分别表示什么含义 A 同步是按顺序依次执行；异步是同时分开一起执行 B 同步是同时分开一起执行；异步是按顺序依次执行 C 同步是按一致的速度执行；异步是按不同的速度执行 D 同步是按相同的步骤执行；异步按不同的步骤执行 正确答案: A 解析: 同步是依次执行，异步是同时执行 得分：2.0分 2. JS内置的Math类中，向上取整...
jQuery
寻常的博客
09-08 5080
一、使用 下载jquery.min.js 文件，下载地址https://jquery.com/download/ 引入该js文件 <script src="./jquery.min.js"></script> 二、入口函数 //常用入口函数 $(function () { }) $(document).ready(function(){ }) 三、js对象和jQuery对象之间的相互转换 //...
请求拦截、响应拦截和请求处理
寻常的博客
04-16 4168
1、创建axios实例 const http = axios.create({ // baseURL: 'http://localhost:8085/', timeout: 1000 * 30, // 请求超时 withCredentials: true, // true：在跨域请求时，会携带用户凭证 false：在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie headers: { 'Content-Type': 'application/j
call bind apply 讲一下这三个改变this指向的问题
03-09
call、bind、apply 都是 JavaScript 中用于改变函数执行时 this 指向的方法。 call 和 apply 的作用是一样的，都是改变函数执行时的 this 指向，只是传参的方式不同。call 的参数是一个一个传递的，而 apply 的参数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值