手写call和apply方法实现

朴灿烈づ我的快乐病毒、 2023-07-13 08:21 7阅读 0赞

[call方法实现视频讲解地址][call]  
[apply方法实现视频讲解地址][apply]

**call**

var name = 'flten';
    		var obj = { 
    		    name: '轩灵'
    		};
    
    		function fn(a, b, c) { 
    		    console.log(a + b + c + this.name);
    		};
    
    		Function.prototype.mycall = function(obj){ 
    			//判断是否为null或者undefined,如果是则默认window;如果传递的参数不是对象用Object转为对象
        		obj = obj ? Object(obj) : window;
    			var args = [];
    			
    			//注意此处for循环的i是从1开始，因为第1个参数是obj
    			for(var i=1,len = arguments.length;i<len;i++){ 
    				args.push("arguments"+"["+i+"]");
    			}
    			// console.log(args);
    			//最重要的一步！说明了两个问题：1.mycall内部的this是指向调用者fn函数（对象的）；2.Obj.func就是fn函数，obj对象调用了fn函数，因此fn函数内部的this指向obj
    			obj.fn = this;
    			var result = eval("obj.fn("+args+")");
    			delete obj.fn;
    			return result;
    		}
    
    		//1.函数也是对象，因此这里的fn作为函数对象调用了mycall
    		//2.this总是指向他的调用者
    		fn.mycall(obj,"我的", "名字", "是"); // 我的名字是轩灵

**apply**

var name = 'flten';
    		var obj = { 
    		    name: '轩灵'
    		};
    
    		function fn(a, b, c) { 
    		    console.log(a + b + c + this.name);
    		};
    
    		Function.prototype.myApply = function(obj,arr){ 
    			//判断是否为null或者undefined,如果是则默认window;如果传递的参数不是对象用Object转为对象
        		obj = obj ? Object(obj) : window;
    
        		//判断是否传入了数组
        		if (!arr) { 
            		result = obj.fn();
            	}else{ 
    				var args = [];
    				//注意此处和call不同，i直接从0开始
    				for(var i=0,len = arr.length;i<len;i++){ 
    					args.push("arr"+"["+i+"]");
    				}
    				// console.log(args);
    				//最重要的一步！说明了两个问题：1.mycall内部的this是指向调用者fn函数（对象的）；2.Obj.func就是fn函数，obj对象调用了fn函数，因此fn函数内部的this指向obj
    				obj.fn = this;
    				var result = eval("obj.fn("+args+")");
    				delete obj.fn;
    				return result;
    			}
    		}
    
    		//1.函数也是对象，因此这里的fn作为函数对象调用了mycall!
    		//2.this总是指向他的调用者
    		fn.myApply(obj,["我的", "名字", "是"]); // 我的名字是轩灵

[call]: https://www.bilibili.com/video/av95377977
[apply]: https://www.bilibili.com/video/av95392321/

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关手写call,apply,bind实现

call,apply,bind函数其本质是实现改变函数上下文环境,即改变this call实现 Function.prototype._call = f...

待我称王封你为后i/ 2024年04月17日 13:53/ 0 赞/ 66 阅读

相关 JS 手写实现call,apply方法

大概思路就是将你要调用的方法添加为对象里面的属性方法，这样就改变了方法里面的htis指向obj,然后调用该对象里面的方法，调用完成后，再将对象里面的此方法删除delete,

客官°小女子只卖身不卖艺/ 2023年10月10日 20:54/ 0 赞/ 36 阅读

相关手写call和apply方法实现

[call方法实现视频讲解地址][call] [apply方法实现视频讲解地址][apply] call var name = 'flten'; v

朴灿烈づ我的快乐病毒、/ 2023年07月13日 08:21/ 0 赞/ 8 阅读

相关 JS手写call、apply的实现方式

`call()`、`apply()`、`bind()()`三种方法主要用来改变`this`指向，区别在于三种方法的使用方式不同。 1. `call(obj, ...)`方法

谁践踏了优雅/ 2022年12月25日 11:54/ 0 赞/ 191 阅读

相关手写实现call(), apply()

一、call() 1. ES6之前 Function.prototype.myCall = function (_context){

╰半橙微兮°/ 2022年11月21日 09:40/ 0 赞/ 170 阅读

相关【手撕原理】前端面试题手写call、apply、bind方法

手写call 、apply 、bind方法实现call方法思路 1.在Function原型上增加\_call方法，接受两个参数。第一个参数为指定的this值，默认值为

短命女/ 2022年11月04日 15:26/ 0 赞/ 193 阅读

相关手写实现call、apply和bind方法超详细！！！

文章目录实现call 第一步第二步第三步实现apply 实现bind 参考 > 不了解call、

Love The Way You Lie/ 2022年10月07日 13:55/ 0 赞/ 163 阅读

相关手写 call、apply 及 bind 函数

手写 call、apply 及 bind 函数一、介绍 1）call apply bind 功能：重定义 this 对象 bind 返回的是一个新函数，必须调

川长思鸟来/ 2022年09月08日 06:20/ 0 赞/ 186 阅读

相关 JS手写代码Call、apply、bind

call 一句话介绍 call： > call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。举个例子： var

r囧r小猫/ 2022年01月26日 07:49/ 0 赞/ 260 阅读

相关 call() 方法和apply() 方法

call() 方法 > call() 方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作 this 的对象。其他参数都直接传递给函数自身。例如：

妖狐艹你老母/ 2021年10月01日 11:56/ 0 赞/ 470 阅读