call、apply、bind的区别?如何实现一个bind?

什么情况需要改变this指向

下例,正常情況 say方法输出martin 但是我们把 say 放在setTimeout 方法中,在定时器中是作为回调函数来执行的,因此回到主栈执 行时是在全局执行上下文的环境中执行的,这时候this指向 window,所以输出Lucy 我们实际需要的是,this指向 obj对象,这时候就需要该改变 this指向了

javascript 复制代码
var name = "lucy";
var obj = {
    name: "martin",
    say: function () {
        console.log(this.name);
    }
};

obj.say(); // martin this指向obj

setTimeout(obj.say,0); // lucy this指向window

// 改变this指向
setTimeout(obj.say.bind(obj),0); //martin this指向obj

共同点

  • 都是显式改变this的方法
  • 第一个参数都是this的指向
  • 第一个参数是null或者undefined时,默认指向window(浏览器)

区别

  • call 方法接收两个参数,第一个参数是this的值,第二个参数是传递给函数的参数,以逗号分隔,参数一次性传入。改变this指向后原函数会立即执行,此方法只临时改变this指向一次
  • apply 方法也接收两个参数,第一个参数是this的值(为null或者undefined时,默认指向window(浏览器)),第二个参数一个数组或类数组对象,改变this指向后原函数会立即执行,此方法只临时改变this指向一次
  • bind 方法创建一个新的函数,当这个新函数被调用时,bind的第一个参数将作为它运行时的this,参数可分多次传入。改变this指向不会立即执行,而是返回一个永久改变this指向的函数
scss 复制代码
function fn(...args){ 
    console.log(this,args); 
} 

let obj = { myname:"xxx" } 

// apply 
fn.apply(obj,[1,2]); 

// call 
fn.call(obj, 1,2); 

// bind
const bindFn = fn.bind(obj); 
// bind不会理解执行需要执行一次 
bindFn(1,2) // this指向obj 

fn() // this指向window

实现一个bind

  1. 修改this指向
  2. 动态传递参数
  3. 兼容new关键字
javascript 复制代码
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));
    }
}
相关推荐
左耳咚1 天前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu1 天前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After1 天前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
用户47949283569151 天前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在1 天前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好11 天前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
明仔的阳光午后1 天前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人1 天前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
San301 天前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze2 天前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js