this的基本概念,call/bind/apply的使用，手写call/bind/apply方法

已于 2023-10-17 10:43:31 修改
阅读量141 收藏 1
点赞数
分类专栏： JS高级 文章标签： this
于 2023-10-14 16:37:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34569497/article/details/133823989
版权

1.this的基本概念

  • 1. this不能在执行期间被赋值（不能直接赋值整个对象this = a;但可以this.a = '1'）
  • 2. js中的this它不是固定不变的，是随着它执行环境的变化而改变
        var bar = 1;
        let obj = {
            bar: 2,
            foo: function(){
                console.log(this.bar);
            }
        }
        var fn =  obj.foo;
        obj.foo();//2 this指向obj
        fn();//1 this执行全局对象window中的bar

2.this在面向对象中的使用

3.js严格模式下的this

严格模式下直接函数中直接调用this为undefined，非严格模式下为window

4.this指向问题

  • 1. 在一般函数调用时，this指向的window
  • 2. 在构造函数中，this指向实例化出来的对象
  • 3. 作为对象方法调用，this指向调用对象
  • 4. call和apply调用，this指向第一个调用的对象

 4.1在一般函数调用时，this指向的window

        function fn(){
            console.log(this);//window
        }
        fn();

4.2在构造函数中，this指向实例化出来的对象

        function Fn(){
            this.a = 1;
            console.log(this); //Fn {a: 1}
        }
        console.log(new Fn());//Fn {a: 1}

4.3 作为对象方法调用，this指向调用对象

        var bar = 1;
        let obj = {
            bar: 2,
            foo: function(){
                console.log(this);//{bar: 2, foo: ƒ}
            }
        }
        obj.foo();//2 this指向obj

4.4call和apply调用，this指向第一个调用的对象

        var x = 0;
        var obj1 = {
            x:1
        }
        var obj2= {
            x:2
        }

        function fn(){
            console.log(this, this.x);
        }
        obj2.fn = fn;
        obj2.fn(); //2 this执行obj2
        obj2.fn.call(obj1); //1 this执行obj1
  obj2.fn.call(); //0 不写参数，执行window

5.call、bind、apply的使用

5.1 call方法

语法： function.call(thisArg, arg1, arg2, ...)。 其中thisArg是要设置为函数执行上下文的对象，也就是this要指向的对象，从第二个参数开始，arg1, arg2, ... 是传递给函数的参数。通过使用call方法，可以将一个对象的方法应用到另一个对象上。

注意 如果省略第一个 thisArg 参数，则默认为 undefined。在非严格模式下，this 值将被替换为 globalThis（类似于全局对象）

"use strict"
const person1 = {
    fn: function () {
        console.log(this)
    }
}

const person2 = {
    name: 'person2'
}
person1.fn.call()

 5.2 apply

语法：function.apply(thisArg, [argsArray])。 其中thisArg是要设置为函数执行上下文的对象，也就是this要指向的对象，argsArray是一个包含参数的数组。通过使用apply方法，可以将一个对象的方法应用到另一个对象上，并使用数组作为参数。

使用场景：ES5下将一个数组的元素合并到另一个数组，arr.push.apply(arr,arr2)

        let arr = ['a','b'];
        let arr2 = [1,2];
        // 通过call方法可以将arr和arr2进行合并到arr中（ES6中可以使用扩展运算符）
        // arr.push(...arr2);
        // console.log(arr);//['a', 'b', 1, 2]
        // ES5中可以使用apply
        arr.push.apply(arr,arr2);
        console.log(arr);//['a', 'b', 1, 2]

5.3 bind

语法：function.bind(thisArg, arg1, arg2, ...)。 其中thisArg是要绑定到函数执行上下文的对象，也就是this要指向的对象，从第二个参数开始，arg1, arg2, ...是传递给函数的参数。与call和apply方法不同，bind方法并不会立即执行函数，而是返回一个新函数，可以稍后调用。这对于事件处理程序和setTimeout函数等场景非常有用。

const person1 = {
    name: 'allen',
    fn: function () {
        console.log(this.name)
    }
}

const fn = person1.fn
fn() // undefined

// 改写成，this指向person1
// const fn = person1.fn.bind(person1)

6.利用bind解决定时器参数的问题

        // 利用bind给定时器传值
        function fn(name){
            console.log("Hello, "+name);
        }
        // delayFn(name); //直接传值是会报错的
        const delayFn = fn.bind(null, 'lmf');
        setTimeout(delayFn,1000);

8.call、bind、apply区别

  1. call和apply都是直接调用函数，bind不会立即调用

  2. call和bind的参数为参数列表，apply的参数需要以数组的形式传递

7.手写call、bind、apply

7.1手写call方法

原理：

  1. 首先，通过 Function.prototype.myCall 将自定义的 myCall 方法添加到所有函数的原型对象上，使得所有函数实例都可以调用该方法。

  2. 在 myCall 方法内部，首先通过 typeof this !== "function" 判断调用 myCall 的对象是否为函数。如果不是函数，则抛出一个类型错误。

  3. 然后，判断是否传入了上下文对象 context。如果没有传入，则将 context 赋值为全局对象；ES11 引入了 globalThis，它是一个统一的全局对象，无论在浏览器还是 Node.js 中，都可以使用 globalThis 来访问全局对象。

  4. 接下来，使用 Symbol 创建一个唯一的键 fn，用于将调用 myCall 的函数绑定到上下文对象的新属性上。

  5. 将调用 myCall 的函数赋值给上下文对象的 fn 属性，实现了将函数绑定到上下文对象上的效果。

  6. 调用绑定在上下文对象上的函数，并传入 myCall 方法的其他参数 args（因为call方法是立即执行函数所以需要调用方法并执行）。

  7. 将绑定在上下文对象上的函数删除，以避免对上下文对象造成影响。

  8. 返回函数调用的结果。

为什么要将调用 myCall 的函数绑定到上下文对象的新属性上？

        let obj1 = {
            fn: function(){}
        };
        let obj2 = {
            name:'lmf'
        }
        // 将obj1.fn的this执行改为obj2，且obj2的所有属性name也绑定到this上下文执行对象上
        obj1.fn.call(obj2);

手写方法：

        // 1.Function.prototype.myCall
        Function.prototype.myCall = function (context, ...args) {
            // 2.判断调用者是否为一个函数(如，obj1.fn.call这里的this即为obj1.fn函数)
            if (typeof this !== 'function') {
                throw new TypeError("Function.prototype.myCall - 被调用的对象必须是函数");
            }

            // 3.判断是否传入上下文对象（第一个参数）
            // 如果没有传入上下文对象，则默认为全局对象
            // ES11 引入了 globalThis，它是一个统一的全局对象
            // 无论在浏览器还是 Node.js 中，都可以使用 globalThis 来访问全局对象。
            context = context || globalThis;

            // 4.通过Symbol创建唯一的fn防止命名冲突，用于调用函数的上下文对象绑定到新的属性上
            let fn = Symbol('key');

            // 5.将上下文对象绑定到新的属性上
            context[fn] = this;

            // 6.调用绑定好上下文的新函数，并传入参数，并接受
            const result = context[fn](...args);

            // 7.删除通过Symbol绑定的上下文新属性，以防对原有属性产生影响
            delete context[fn];

            // 8.返回调用的函数结果
            return result;
        }

        // 测试手写的call方法
        let obj1 = {
            fn: function () {
                console.log(this.name);

            }
        };
        let obj2 = {
            name: 'lmf'
        }
        // 将obj1.fn的this执行改为obj2，且obj2的所有属性name也绑定到this上下文执行对象上
        obj1.fn.call(obj2); //lmf
        obj1.fn.myCall(obj2); //lmf

7.2手写apply方法

原理：apply的实现思路跟call类似，就是apply传入参数是以数组的形式传入，所以多了一步判断传入的参数是否为数组以及在调用方法的时候使用扩展运算符 ... 将传入的参数数组 argsArr 展开

        Function.prototype.myApply = function (context, argsArr) {
            if (typeof this !== 'function') {
                throw new TypeError("Function.prototype.myCall - 被调用的对象必须是函数");
            }

            if(argsArr && !Array.isArray(argsArr)){
                throw new TypeError("Function.prototype.myApply - 第二个参数必须是数组")
            }

            context = context || globalThis;

            let fn = Symbol('key');

            context[fn] = this;

            // 判断argsArr是否为一个数组（apply方法参数必须是一个数组），不是数组直接执行
            const result = Array.isArray(argsArr) ? context[fn](...argsArr) : context[fn]();

            delete context[fn];

            return result;
        }

        // 测试手写的apply方法
        let obj1 = {
            fn: function () {
                console.log(this.name);

            }
        };
        let obj2 = {
            name: 'lmf-apply'
        }
        // 将obj1.fn的this执行改为obj2，且obj2的所有属性name也绑定到this上下文执行对象上
        obj1.fn.apply(obj2); //lmf-apply
        obj1.fn.myApply(obj2); //lmf-apply

7.3手写bind方法

原理：

  1. 首先，通过 Function.prototype.myBind 将自定义的 myBind 方法添加到所有函数的原型对象上，使得所有函数实例都可以调用该方法。

  2. 在 myBind 方法内部，首先通过 typeof this !== "function" 判断调用 myBind 的对象是否为函数。如果不是函数，则抛出一个类型错误。

  3. 然后，判断是否传入了上下文对象 context。如果没有传入，则将 context 赋值为全局对象；ES11 引入了 globalThis，它是一个统一的全局对象，无论在浏览器还是 Node.js 中，都可以使用 globalThis 来访问全局对象。

  4. 保存原始函数的引用，使用 _this 变量来表示。（因为调用bind后返回的函数可能会用new的方式再创建）

  5. 返回一个新的闭包函数 fn 作为绑定函数（bind方法不是立即执行函数）。这个函数接受任意数量的参数 innerArgs。

  6. 在返回的函数 fn 中，首先判断是否通过 new 关键字调用了函数。这里需要注意一点，如果返回出去的函数被当作构造函数使用，即使用 new 关键字调用时，this 的值会指向新创建的实例对象。通过检查 this instanceof fn，可以判断返回出去的函数是否被作为构造函数调用。这里使用 new _this(...args, ...innerArgs) 来创建新对象。

  7. 如果不是通过 new 调用的，就使用 apply 方法将原始函数 _this 绑定到指定的上下文对象 context 上。这里使用 apply 方法的目的是将参数数组 args.concat(innerArgs) 作为参数传递给原始函数。

  8. args表示myBind()创建时的23,12，使用...args是因为bind函数需要参数列表。而后面再次调用_This.apply(context, args.concat(innerArgs))时，apply参数是数组。arg就表示没有展开的数组

        Function.prototype.myBind = function(context, ...args){
            if(typeof this !== 'function'){
                throw new TypeError("Function.prototype.myCall - 被调用的对象必须是函数");
            }

            context =  context || globalThis;

            // bind函数不会立即执行，所以不需要绑定新属性并执行
            let _This =  this;

            // bind函数会返回一个函数，所以通过匿名函数方法返回。innerArgs表示调用bind后返回的函数执行时传入的参数
            return function fn(...innerArgs){
                // 判断如果fn通过new Fn()形式被调用( new delayFn(2,3))
                if(this instanceof fn){ //判断fn在this的原型上
                   return new _This(...args,...innerArgs);
                }

                // 使用apply方法将原函数绑定到指定的上下文对象上
                return _This.apply(context, args.concat(innerArgs));
            }
        }
               // 测试手写的bind方法
        let obj1 = {
            hello: function () {
                console.log(this.name);
            }
        };
        let obj2 = {
            name: 'lmf-bind'
        }
        // 将obj1.fn的this执行改为obj2，且obj2的所有属性name也绑定到this上下文执行对象上
        let delayFn1 = obj1.hello.bind(obj2); //lmf-bind
        let delayFn2 = obj1.hello.myBind(obj2,23,12); //lmf-bind

        delayFn1(1,2);
        delayFn2(1,2);
        console.log(new delayFn1(3,4));
        console.log(new delayFn2(3,4));

8.问题

手写call方法时第4步，为什么要将调用 myCall 的函数绑定到上下文对象的新属性上？

我的理解比如将obj1.fn的this改变为obj2,那么obj1的fn里面就可以通过this调用到obj2的name属性

但是obj1.fn.call(obj2);这句话真正的目的是想要将obj1.fn的this指向obj2，即通过obj2.fn也能调用obj1.fn的方法

当然最后是能实现将obj1.fn的this改变为obj2,那么obj1的fn里面就可以通过this调用到obj2的name属性

let obj1 = {
            fn: function(){}
        };
        let obj2 = {
            name:'lmf'
        }
        // 将obj1.fn的this执行改为obj2，且obj2的所有属性name也绑定到this上下文执行对象上
        obj1.fn.call(obj2);（可以调用obj1上的fn）

Jyann~
关注
专栏目录
手写函数 bind、call、apply
m0_38066007的博客
05-25 135
bind 应用 - 返回一个新的函数（旧函数不会更改），但不执行 - 绑定 `this` 和部分参数 - 如果是箭头函数，无法改变 `this` ，只能改变参数 function fn(a, b, c) { console.log(this, a, b, c) } const fn1 = fn.bind({x: 100}) fn1(10, 20, 30) // {x: 100} 10 20 30 const fn2 = fn.bind({x: 100}, 1, 2) fn2(10, 20,
最详细的apply、call、bind手写实现教学
weixin_45819276的博客
08-19 552
1、call Function.prototype.call 语法 fun.call(thisArg[,arg1[,arg2[, ...]]]) 参数 thisArg 在fun运行时指定的this值。 arg1, arg2, ... 给到fun的参数列表（每个参数都写出来）。 返回值 使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined。 2、apply Function.prototype.apply 语法 fun.apply(thisArg, [ar
面试官：手写一个call、apply、bind？
weixin_44665959的博客
07-04 171
手写call、apply、bind
深入理解this、call、apply、bind
qq_45923489的博客
04-21 203
call、apply、bind作用是改变函数执行时的上下文，就是改变函数运行时的this指向 一、this this关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象。this在函数执行过程中，this一旦被确定了，就不可以在更改。 1、this默认绑定 全局环境中，内部使用this关键字，指向Window对象 var name = "Tong" function person(){ return this.name } console.log(person(
this，call，bind，apply的异同点
weixin_42380440的博客
03-02 127
一、this 1.什么是this this 关键字在大部分语言中都是一个重要的存在，JS中自然不例外，其表达的意义丰富多样甚至有些复杂，深刻理解this是学习JS、面向对象编程非常重要的一环。 2.this 代表什么 this代表函数（方法）执行的上下文环境（上下文，类似与你要了解一篇文章，了解文章的上下文你才能清晰的了解各种关系）。 但在 JavaScript 中 this 不是固定不变的，它会...
一文搞懂 this、apply、call、bind
Echoyya、的博客
03-10 48
码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14506269.html 目录码文不易，转载请带上本文链接，感谢~ https://www.cnblogs.com/echoyya/p/14506269.htmlthis 的指向怎样改变 this 的指向(1)使用ES6中箭头函数(2)函数内部使用 _this = this(3)使用cal...
js代码-手写call/bind/apply
07-14
在JavaScript中，`call()`, `bind()`, 和 `apply()` 是三个非常重要的函数，它们都与函数的上下文（即`this`关键字）有关，用于改变函数执行时的环境。本文将深入探讨这三个方法的原理、用途及其实现方式。 首先，`...
手写 call、apply 及 bind 函数
weixin_47450807的博客
02-26 4646
手写 call、apply 及 bind 函数
this绑定与call、apply以及bind详解
henu_GM的博客
07-29 638
在JavaScript中this的概念较为抽象，一共可以分为五种场景： 默认绑定 隐式绑定 显式绑定 new绑定 箭头函数绑定 先讲一下this的概念吧，this实际上是在函数被调用的时候才发生的绑定，也就是说this具体指向什么，取决于你怎么调用函数。 而apply和call是属于函数应用，指定this的同时也执行方法，bind则不同，它只是负责绑定this并返回一个新的方法，不会执行，所以我们经常看到bind后面会加一个()。 ...
【THE LAST TIME】this：call、apply、bind
全栈前端精选
10-17 264
前言 The last time, I have learned【THE LAST TIME】一直是我想写的一个系列，旨在厚积薄发，重温前端。也是给自己的查缺补漏和技术分...
「前端料包」一文彻底搞懂JavaScript中的this、call、apply和bind
Jake Zhang
12-02 479
前言 关于JavaScript中this又是一个老生常谈的话题，也是面试绕不开的经典考题。「前端料包」 系列第三篇就一起聊聊关于this的话题。写的很小白，如有不对，欢迎各路大佬指正~ 在讲this之前，先得说说环境 这个概念。一门语言在运行的时候，需要一个环境，叫做宿主环境。对于JavaScript，宿主环境最常见的是web浏览器，另一个最为常见的就是 Node 了，同样作为宿主环境，node ...
this,bind,call,apply三者之间的区别
weixin_46174785的博客
09-01 305
this this的指针作用域： 1、在全局中使用this，表示全局的global对象，在浏览器中this指向window对象； 2、当在函数执行环境中使用this时,如果函数没有明显的作为非window对象的属性，而只是定义了函数，不管这个函数是不是定义在另一个函数中，这个函数中的this仍然表示window对象。如果函数显示地作为一个非window对象的属性，那么函数中的this就代表这个对象； 3、当通过new运算符来调用函数时，函数被当做一个构造函数，this指向构造函数创建出来的对象; 4、th
this以及bind、apply与call
CamilleZJ的博客
05-27 343
call、apply、bind的作用是改变函数运行时this的指向。 一、this 1、普通函数中的this function fn1(){ console.log(this) //window } fn1() var a = 1; function fn(){ console.log(this.a); } fn(); //输出1 setTimeout(function() { console.log(this) //window function fn(){ ..
this以及apply,call,bind之间的区别
我在长安长安
05-28 3702
关于this对象this对象是在运行时基于函数的执行环境绑定的：在全局环境中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window。------《Javascript高级程序设计》除了书里的解释，再来几个直白的例子:// 定义一个全局变量var type = "全局"; // 定义函数aafu...
call、apply、bind三者的用法和区别
热门推荐
hexinyu_1022的博客
09-21 6万+
1. call call、apply、bind都是改变this指向的方法 fn.call 当前实例(函数fn)通过原型链的查找机制，找到function.prototype上的call方法，function call(){[native code]} fn.call() 把找到的call方法执行 当call方法执行的时候，内部处理了一些事情 1.首先把要操作的函数中的this关键...
深入理解 js this 绑定 (尾部有总结和面试题解析 )
肖肖肖丽珠的博客
09-20 418
链接地址在这里：https://segmentfault.com/a/1190000011194676?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly JavaScript this 关键字 面向对象语言中 this 表示当前对象的一个引用。 但在 JavaScript 中 this 不是固定不变...
手写call apply bind方法
最新发布
03-17
手写call方法: ``` Function.prototype.myCall = function(context) { context = context || window; context.fn = this; var args = [...arguments].slice(1); var result = context.fn(...args); delete ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值