手写call,apply,bind方法,改变函数中的this

       构造函数Function的原型上分别有call,apply,bind这三个方法,可改变函数中this的指向。从而实现一些业务功能。这三个方法是如何改变this的?下面通过手写call,apply,bind的方式一一进行实现。

1.手写call方法

步骤:

1.1  定义myCall方法
1.2  设置this并返回原函数
1.3  接收剩余参数并返回结果
1.4  使用symbol对this的设置进行优化

运行结果如下:

从中可以发现:函数func自调用时,其内部的this指向window,通过myCall方法,可改变func函数内部的this,使其指向传入的对象。

2. 手写apply方法

2.1  定义myApply方法
2.2  设置this并调用原函数
2.3  接收参数并返回结果

运行结果如下:

myApply函数的入参中,第一个传入的是this指向的对象,通过数组的方式传入原函数的入参。myApply和apply函数一样,一经调用后,就直接执行原函数。

3. 手写bind函数

3.1  定义bind方法
3.2  返回绑定this的新函数
3.3  合并绑定和新传入的参数

执行结果:

myBind函数和以上两个函数不同点在于,1:myBind函数调用后,不会立即执行,而是返回一个新的函数,需执行新函数后,才会改版原始函数中的this。2.调用myBind函数时,可以传入部分入参,在执行返回的新函数时,也可以传入一些入参。

下一章我将介绍一下,如何手写promise,从而让大家对于Promise构造函数以及他的一些应用有更多的了解

好的,我可以帮你手写这三个方法并解析。 1. Call 方法 Call 方法JavaScript 函数对象的一个方法,它可以在指定的 this 值和参数列表的前提下,调用一个函数手写 Call 方法的基本思路是: - 把当前函数设为指定的 this 值; - 执行当前函数,并把参数列表传递进去; - 返回当前函数执行的结果。 下面是一个简单的实现: ```javascript Function.prototype.myCall = function(context, ...args) { // 首先要判断传入的 context 是否为 null 或 undefined,如果是,那么 this 指向全局对象 window context = context || window; // 将当前函数设为传入的 context 的方法 context.fn = this; // 执行当前函数,并将参数列表传递进去 let result = context.fn(...args); // 删除当前函数作为 context 的方法 delete context.fn; // 返回当前函数执行的结果 return result; }; ``` 使用示例: ```javascript function greet(name) { console.log(`Hello, ${name}! My name is ${this.name}.`); } const person = { name: 'John' }; greet.myCall(person, 'Alice'); // 输出:Hello, Alice! My name is John. ``` 2. Apply 方法 Apply 方法和 Call 方法类似,只不过它的参数列表是一个数组或类数组对象。 手写 Apply 方法的基本思路是: - 把当前函数设为指定的 this 值; - 执行当前函数,并把参数列表传递进去; - 返回当前函数执行的结果。 下面是一个简单的实现: ```javascript Function.prototype.myApply = function(context, args) { // 首先要判断传入的 context 是否为 null 或 undefined,如果是,那么 this 指向全局对象 window context = context || window; // 将当前函数设为传入的 context 的方法 context.fn = this; // 执行当前函数,并将参数列表传递进去 let result = context.fn(...args); // 删除当前函数作为 context 的方法 delete context.fn; // 返回当前函数执行的结果 return result; }; ``` 使用示例: ```javascript function add(a, b) { return a + b; } const numbers = [1, 2]; console.log(add.myApply(null, numbers)); // 输出:3 ``` 3. Bind 方法 Bind 方法会创建一个新的函数,它的 this 值被绑定到传入的参数上。新函数调用时,它的 this 值将永久地被绑定到传入的参数上,不会再被改变手写 Bind 方法的基本思路是: - 把当前函数保存起来,以便后面返回一个新的函数; - 返回一个新的函数,这个新函数的 this 值被绑定到传入的参数上; - 当新函数调用时,它会调用原函数,并把传入的参数和绑定的 this 值一起传递进去。 下面是一个简单的实现: ```javascript Function.prototype.myBind = function(context, ...args1) { // 保存当前函数 const fn = this; // 返回一个新的函数 return function(...args2) { // 调用原函数,并绑定 this 值和参数列表 return fn.call(context, ...args1, ...args2); }; }; ``` 使用示例: ```javascript const person = { name: 'John', greet(name) { console.log(`Hello, ${name}! My name is ${this.name}.`); } }; const greet = person.greet.myBind({ name: 'Alice' }, 'Bob'); greet('Charlie'); // 输出:Hello, Bob! My name is Alice. ``` 以上就是手写 Call、ApplyBind 方法的基本实现和解析。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值