call、apply、bind方法的作用

最新推荐文章于 2022-12-20 20:43:30 发布
最新推荐文章于 2022-12-20 20:43:30 发布
阅读量70 收藏
点赞数
分类专栏： JavaScript实践
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45346719/article/details/117307651
版权

call、apply、bind方法的作用

call()
改变函数内部this指向

var o={
     name:'andy'
}

function fn(a,b){
      console.log(this);
      console.log(a+b);
};
fn.call(o,1,2);
调用函数，将this指向o
1、2为传递的实参


call可以实现继承
function father(uname,age,sex){
    this.uname = uname;
    this.age = age;
    this.sex = sex;
}

function son(uname,age,sex){
    调用father函数，并将father里面的this修改为this里面的this
    father.call(this,uname,age,sex);
}
var s = new son('王',18,'男');
console.log(s);

apply()
1.调用函数
2.改变函数内部this指向

var o={
     name:'andy'
}

function fn(arr){
      console.log(this);
      console.log(arr);//'pink'
};
fn.apply(o,['pink']);
调用函数，将this指向o
接受数组形式的参数

例子：

Math.max.apply(Math, [1,2,3]); // 也会返回 3
或者
var arr = [1,22,54,18,7];
Math.max.apply(Math, arr);

bind()
改变函数内部this指向，但是不会调用函数
返回原函数改变this后的新函数

var o={
     name:'andy'
}

function fn(a,b){
      console.log(this);
      console.log(a+b);
};
var f=fn.bind(o,1,2);
f();
因为不调用函数，所以将返回的拷贝给一个新函数f

案例：点击按钮禁用，3秒后解禁

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 3. bind()  绑定 捆绑的意思
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);
        };
        var f = fn.bind(o, 1, 2);
        f();
        // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
        // 2. 返回的是原函数改变this之后产生的新函数
        // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
        // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                this.disabled = true;// 这个this 指向的是 btns 这个按钮
                setTimeout(function() {
                    this.disabled = false;// 此时定时器函数里面的this 指向的是bind中的this
                }.bind(this), 2000);// 这个this 指向的是btns 这个对象,因为bind在定时函数外面，在btns函数里面
            }
        }
    </script>
</body>

        // var btn1 = document.querySelector('button');
        // btn1.onclick = function() {
        //     this.disabled = true; // 这个this 指向的是 btn 这个按钮
        //     // var that = this;
        //     setTimeout(function() {
        //         // that.disabled = false; // 定时器函数里面的this 指向的是window
        //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn
        //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象
        // }

         以前用的是这种方法，
        //     // var that = this;
        //         // that.disabled = false; // 定时器函数里面的this 指向的是window
花椰菜14528
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
call，apply，bind用法以及常见作用
qq_38492231的博客
11-07 458
1 javascript 中 call，apply，bind用法，作用以及区别 2 call，apply，bind应用在setTimeout函数中 3 for循环嵌套setTimeout，setTimeout中重复执行for的最后一个值及解决方法 1 javascript 中 call，apply，bind用法，作用以及区别 call，apply，bind主要就是改变this的指向，或者说，强行调...
call()、 apply()、 bind() 方法的作用、使用详解以及手写实现它
牛牪犇
08-18 298
我们先举一些简单的例子： 例1: var name = "阿牛",age = '18'; var obj = { name: "臭宝", objAge: this.age, fun: function(){ condole.log(this.name,this.age); } } // 输出 “臭宝” undefined 例2 var faq = "牛牛牛"; fun: function(){ console.log(this.faq); } // 输出 fun() // “牛牛牛
call,apply,bind 方法的作用及区别
domestic_nimal的博客
12-02 629
首先我们要先明白三兄弟的作用 apply, call, bind 都是为了改变函数运行时上下文（this指向）而存在的。 其次我们在来说说三兄弟的区别 相同点： 三兄弟接收到的第一个参数都是要绑定的this要指向的对象 都可以利用后续参数来进行传参 不同点： apply的第二个参数是一个参数输出，call 和 bind 的第二个及之后的参数作为函数实参按顺序传入 bind不会立即调用，其他两...
call,apply,bind的用途
jt18729260336的博客
03-11 293
call和apply的区别 在前端日常工作中，this的指向是一个飘忽不定但是又要掌握的知识。 在ECMAscript3中，给Fucntion.protptype定义了call和apply方法，用来改变this的指向，都接收两个参数，第一个参数都为函数体内this对象的指向，call是从第二个参数开始，每个参数给以此传入，如Fucntion.protptype.call(obj,a,b,c),apply的第二个参数为一个数组或者类数组，apply会将数组或类数组元素作为参数传递给被调用的函数，如Fucn
call、apply和bind的作用以及区别：（参考pink老师讲解）
weixin_54515240的博客
07-18 218
call和apply和bind的笔记
Javascript中call，apply，bind方法的详解与总结
10-20
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧
javascript中call apply 与 bind方法详解
10-22
在JavaScript中，`call`、`apply`和`bind`都是与函数调用相关的三个重要方法，它们都允许我们改变函数内部`this`的指向，从而实现不同对象间的方法复用和灵活控制上下文环境。下面我们将分别详细介绍这三个方法。 1...
原生JS实现 call apply bind
01-08
call apply bind 的 作用 都是用来改变this的指向，在平时工作过程中，除了实现对象的继承，在写一些基础类，或者公用库方法的时候会用到它们，其他时候 call 和 apply 的应用场景并不多。 在React中bind常用来绑定...
javascript中apply/call和bind的使用
10-20
本文主要介绍了javascript中apply/call和bind的使用。具有很好的参考价值，下面跟着小编一起来看下吧
深入理解JavaScript中的call、apply、bind方法的区别
10-22
下面小编就为大家带来一篇深入理解JavaScript中的call、apply、bind方法的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js中 apply，call，bind方法的区别和使用
nicotine12333的博客
03-27 741
用法： B.apply（A，arguments[]）； B.call（A，arg1，arg2）； B.bind（A，arg1，arg2）； 联系： 它们在功能上是没有区别的，都是通过改变this的指向（第一个参数都是this的指向对象），让一个对象（A）调用另一对象（B）的方法。 通过这一特性，可以让一个函数成为任意对象的方法进行调用。 区别： 主要是在于方法的实现形式和参数传递上的不同。 （1）call() 和 apply() 会立即执行并输出函数执行结果，而 bind() 不
call ,apply和bind方法 详解
热门推荐
06-19 3万+
JavaScript 函数call、apply和bind的区别和用法详解
call apply bind的作用和区别
XIAXING123的博客
03-15 2209
1.call apply bind 的作用和区别 作用： 都可以改变函数内部的this指向。 区别点： 1.call和apply会调用函数，并且改变函数内部this指向。 2.call和apply传递的参数不一样，call传递参数arg1,arg2..形式apply必须数组形式[arg] 3.bind不回调用函数，可以改变函数内部this指向。 解析： call方法 改变函数内部this指向 call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的this指向。 写
说一说call apply bind的作用和区别？
qq_50852155的博客
12-20 399
作用：call、apply、bind的作用都是改变函数运行时的this指向； 用法区别：bind和call、apply在使用上有所不同，bind在改变this指向的时候，返回一个改变执行上下文的函数，不会立即执行函数，而是需要调用该函数的时候再调用即可，但是call和apply在改变this指向的同时执行了该函数。
call()、apply()、bind()的作用和区别
前端如逆水行舟...
07-19 1891
call()和apply()的作用和区别,总结在结尾处
call、apply、bind有什么作用
weixin_48896647的博客
01-17 421
call、apply、bind的作用是用来改变this指向性问题的 var obj = { msg:"你过来，看我打不打你！", add:function(first,second){ console.log(this.msg); //你过来，看我打不打你！ console.log(first + second) } } var b = obj.add // b() // this执行window b is not a function b.ca
JS：call、apply、bind的作用和区别
elevenhope的博客
02-10 1839
一、call call、apply、bind都是改变this指向的方法 1.call是函数的方法，可以调用函数 function fun(){ console.log(this); } fun.call(); // Window 2.call的第一个参数可以改变函数中this的指向 function fun1(){ console.log(this.name); } let cat = { name: "喵喵" } fun1.call(cat); // 喵喵 let dog
call/apply/bind作用和区别
SpringRolls的博客
05-19 2625
答案： 他们都可以改变函数的作用域。 call/apply 可以直接执行该函数，而 bind 不会立刻执行 fucntion.bind(thisArg, arg1, arg2, ...) call/apply 作用类似，都可以改变指针和执行函数，区别在于传参不同，call 需要单个传参，apply 通过数组传参 function.call(thisArg, arg1, arg2, ...) function.apply(thisArg, [arg1, arg2, ...]) .
call、apply和bind
yangyalun的博客
09-30 4961
function test(){ console.log(this) } test();//打印window var t=new test()//打印test(){} 首先我们要明白上面这个this指向问题，普通函数调用，this指向window，而通过new来实例化一个构造函数的对象，则this指向函数。 1.call、apply和bind 的相同点和不同点 相同点：ca...
重构call apply bind方法
最新发布
01-12
以下是重构call、apply、bind方法的示例： 1. 重构call方法： ```javascript Function.prototype.myCall = function(context, ...args) { context = context || window; const fn = Symbol(); context[fn] = this; const result = context[fn](...args); delete context[fn]; return result; }; // 示例 function greet(name) { console.log(`Hello, ${name}!`); } const person = { name: 'Alice' }; greet.myCall(person, 'Bob'); // 输出：Hello, Bob! ``` 2. 重构apply方法： ```javascript Function.prototype.myApply = function(context, args) { context = context || window; const fn = Symbol(); context[fn] = this; const result = context[fn](...args); delete context[fn]; return result; }; // 示例 function greet(name) { console.log(`Hello, ${name}!`); } const person = { name: 'Alice' }; greet.myApply(person, ['Bob']); // 输出：Hello, Bob! ``` 3. 重构bind方法： ```javascript Function.prototype.myBind = function(context, ...args) { const fn = this; return function(...innerArgs) { return fn.apply(context, [...args, ...innerArgs]); }; }; // 示例 function greet(name) { console.log(`Hello, ${name}!`); } const person = { name: 'Alice' }; const greetPerson = greet.myBind(person); greetPerson('Bob'); // 输出：Hello, Bob! ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值