JavaScript 案例一 --bind，call，apply

目录

bind，call，apply 三者的作用

区别

apply

call

bind

实现

---

bind，call，apply 三者的作用

---

作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向

区别

---

apply

---

1. 接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入
2. 改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

fn.apply(obj,[1,2]); // this会变成传入的obj，传入的参数必须是一个数组；
fn(1,2) // this指向window

当第一个参数为null、undefined的时候，默认指向window

fn.apply(null,[1,2]); // this指向window
fn.apply(undefined,[1,2]); // this指向window

call

---

1. call方法的第一个参数也是this的指向，后面传入的是一个参数列表
2. 改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

fn.call(obj,1,2); // this会变成传入的obj，传入的参数必须是一个数组；
fn(1,2) // this指向window

当第一个参数为null、undefined的时候，默认指向window(在浏览器中)

fn.call(null,[1,2]); // this指向window
fn.call(undefined,[1,2]); // this指向window

bind

---

1. 和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)
2. 改变this指向后不会立即执行，而是返回一个永久改变this指向的函数

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

const bindFn = fn.bind(obj); // this 也会变成传入的obj ，bind不是立即执行需要执行一次
bindFn(1,2) // this指向obj
fn(1,2) // this指向window

实现

---

实现 bind 的步骤，我们可以分解成为三部分

1. 修改this指向
2. 动态传递参数

   // 方式一：只在bind中传递函数参数
   fn.bind(obj,1,2)()
   
   // 方式二：在bind中传递函数参数，也在返回函数中传递参数
   fn.bind(obj,1)(2)
   

3. 兼容new关键字

Function.prototype.myBind = function (context) {
    // 判断调用对象是否为函数
    if (typeof this !== "function") {
        throw new TypeError("Error");
    }

    // 获取参数
    const args = [...arguments].slice(1),
          fn = this;

    return function Fn() {

        // 根据调用方式，传入不同绑定值
        return fn.apply(this instanceof Fn ? 
           new fn(...arguments) : context,    
           args.concat(...arguments)); 
    }
}