JavaScript中bind、apply、call的理解

最新推荐文章于 2024-08-28 14:58:40 发布

谭梦寻

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量1.1k

点赞数 20

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/GLimerence/article/details/140686122

版权

bind、apply、call是什么？

bind、apply、call是Function原型的方法，而在js中所有的函数都是Function的实例，所以，有所有函数都可以使用这三个方法。

bind、apply、call有什么作用？

改变this指向，这是它们的共同作用，如下所示：

function fn() {
    console.log(this, 111)
}
let obj = {
    name: '谭梦寻'
}
fn() // 输出的是window全局对象
fn.call(obj) // 输出:{ name: '谭梦寻' } 111

bind、apply、call三者的区别

bind的特点：

不会调用原来的函数可以改变原来函数内部的this 指向
返回的是原函数改变this之后产生的新函数
如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind

bind的场景理解：牛客网专项真题：二次封装函数_牛客题霸_牛客网

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        /* 填写样式 */
    </style>
</head>

<body>
    <!-- 填写标签 -->

    <script type="text/javascript">
        // 填写JavaScript
        function partialUsingArguments(fn) {
            //null就是this,默认就是window
            return result = fn.bind(null, ...[...arguments].slice(1))
        }
    </script>
</body>

</html>

这里为什么用bind呢？因为bind的作用是只改变函数的指向，而不调用该函数，很多小伙伴可能会直接使用 return result = fn(参数);这样的话，就会调用了这个函数，达不到题目要求的效果。

call的特点：

call()方法接受的语法和作用与apply()方法类似，只有一个区别就是call()接受的是一个参数列表，而apply()方法接受的是一个包含多个参数的数组或伪数组。
call()、apply()和bind的区别就是它们会调用函数
call 的主要作用可以实现继承

call的场景：

只改变this并调用函数和继承：

var o = {
    name: '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 son = new Son('刘德华', 18, '男');
console.log(son);//Son { uname: '刘德华', age: 18, sex: '男' }

apply的特点：

使用 apply，我们可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。
apply 与 call() 非常相似，不同之处在于提供参数的方式。apply 使用参数数组或者伪数组，而不是一组参数列表。
apply 可以使用数组字面量（array literal），如 fun.apply(this, [‘eat’, ‘bananas’])，或数组对象，如 fun.apply(this, new Array(‘eat’, ‘bananas’))。

apply的主要应用场景：

利用 apply 借助于数学内置对象求数组最大值：

var arr = [1, 66, 3, 99, 4];
var arr1 = ['red', 'pink'];
// var max = Math.max.apply(null, arr);
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);

拓展：

函数上下文：函数的this指向。

// 将函数 fn 的执行上下文改为 obj 对象 
//函数上下文指的是this指向 即将fn函数this指向obj对象
function speak(fn, obj) {
   return fn.apply(obj)
}
/*
下面两个也都可以实现

function speak(fn, obj) {
   return fn.call(obj)
}
function speak(fn, obj) {
   return fn.bind(obj)()
}
*/