手写apply、call、bind

news/2024/7/9 7:49:59

apply

作用:改变this执行,函数立即执行,参数以数组传递

思路:

        1、在this新指向的对象上,增加一个函数等于待执行函数

        2、去参数

        3、执行函数

        4、删除增加的函数,返回结果

    // apply
    function applyTest() {
        var person = {
            fullName: function (city, country) {
                return this.firstName + " " + this.lastName + "," + city + "," + country;
            }
        }
        var person1 = {
            firstName: "Bill",
            lastName: "Gates"
        }
        console.log(person.fullName.myApply(person1, ["Oslo", "Norway"]));
    }

    // 手写applyTest (参数以数组形式在第二个参数传递, 立即执行)
    Function.prototype.myApply = function (context) {
        if (typeof this !== 'function') {
            conole.error('this is not a function');
        }
        let result = null;
        context = context || window;
        context.fn = this; // 将函数绑定到当前上下文中
        result = context.fn(...arguments[1]); //取得第二个参数(数组)并展开传给函数 
        delete context.fn; // 删除新增的函数
        return result;
    }

call

作用:改变this执行,函数立即执行,参数依次传递

思路:

        1、在this新指向的对象上,增加一个函数等于待执行函数

        2、取参数

        3、执行函数

        4、删除增加的函数,返回结果

    // call
    function callTest() {
        var person = {
            fullName: function (city, country) {
                return this.firstName + " " + this.lastName + "," + city + "," + country;
            }
        }
        var person1 = {
            firstName: "Bill",
            lastName: "Gates"
        }
        console.log(person.fullName.myCall(person1, "Oslo", "Norway"));
    }

    // 手写call (参数依次展开, 立即执行)
    Function.prototype.myCall = function(context) {
        if (typeof this !== 'function') {
            console.error('this is not a function');
        }
        context = context || window;
        let result = null;
        context.fn = this; // 将函数绑定到当前上下文中
        result = context.fn(...[...arguments].slice(1)); //取得第除第一个参数之外的参数并展开传给函数 
        delete context.fn;  // 删除新增的函数
        return result;
    }

bind

作用:改变this执行,返回一个函数,参数依次传递

思路:

        1、指定一个函数等于当前函数

        2、返回一个新函数

        3、函数中使用apply立即执行函数

    function bindTest() {
        var person = {
            fullName: function (city, country) {
                return this.firstName + " " + this.lastName + "," + city + "," + country;
            }
        }
        var person1 = {
            firstName: "Bill",
            lastName: "Gates"
        }
        console.log(person.fullName.myBind(person1, "Oslo", "Norway")());
    }    
    // 手写bind (参数依次展开,不立即执行)
    Function.prototype.myBind = function(context) {
        if (typeof this !== 'function') {
            console.error('this is not a function');
        }
        let args = [...arguments].slice(1),
        fn = this;

        return function Fn() {
            return fn.apply(
                this instanceof Fn ? this : context, // 因为返回的函数,防止new执行,所以判断一下,如果是new出来的执行this环境下的,如果不是就是新上下文环境下的
                args.concat(...arguments)
            )
        }

    }


http://lihuaxi.xjx100.cn/news/1183081.html

相关文章

操作系统期末复习——课时十内存管理(一)

1、内存管理的基本原理和要求 1)内存管理的定义 操作系统对内存的划分和动态分配就是内存管理的概念。 2)内存管理的功能 (1)内存空间的分配和回收:由操作系统完成对主存的分配和回收,对编程人员透明。 &…

话费充值API接口的公司有哪些

市场上做话费接口充值的公司很多,而且这些公司基本都能提供一个这样对接的接口。可以在网上搜索提供API接口的公司进行比较一下,接口内容都是大同小异,区别就是能提供的话费充值货源是否可靠。 在公司经营稳定,话费充值资源真实&a…

QString 用法

left filename.left(n);取filename左边size - n长度的数据; QString filename; //“movie.png” filenamefilename.left(filename.size() -4); //“movie” chop filename.chop(n);从字符串filename尾部删除 n 个字符 QString filenam…

Linux fork—进程控制

程序和进程 程序:是指编译好的二进制文件,在磁盘上,不占用系统资源(cpu、内存、打开的文件、设备、锁…)。进程:是一个抽象的概念,与操作系统原理联系紧密,进程是活跃的程序,占用系统资源&…

自制Arduino 风格开发板 - HK32F030MF4P6 紧凑开发板

模仿Arduino Nano 做一个HK32F030M 的紧凑开发板,排针间距和Arduino Nano 相同,整体尺寸略小,适合插在面包板上。兼容HK32F030MF4P6 和0301M,板载CH340N 串口和DS1307 时钟模块。开源工程地址:HK32F030MF4P6 紧凑开发板…

Springboot中使用mysql存储过程

Springboot中使用mysql存储过程 存储过程简介简介存储过程优点存储过程缺点 创建存储过程创建语法举例 Springboot中使用存储过程xml文件中Mapper文件中 存储过程简介 简介 MySQL 5.0 版本开始支持存储过程。 存储过程(Stored Procedure)是一种在数据…

CMakeLists.txt 文件详解

目录 CMakeLists.txt 常见内容和结构: 文件中的命令和配置: 官方文档: CMakeLists.txt CMakeLists.txt 文件是用于描述 CMake 构建过程和项目配置的文件。它包含了一系列 CMake 命令、变量设置和流程控制结构,用于告诉 CMake 如何生成适合…

2021 年全国大学生物联网设计竞赛(华为杯)全国总决赛获奖名单

由全国高等学校计算机教育研究会主办,上海交通大学承办,华为技术有限 公司协办,中国电信天翼物联、中国移动中移物联网、霍尼韦尔 Tridium、CSA 联盟、新大陆、德州仪器 (TI)、百度、机械工业出版社华章公司联合支持的 2021 全国大学生物联网…