call 函数

语法

obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]);

简介

修改obj的this指向为thisObj,后面的参数会当成obj的参数安装顺序传递进去。

我们先来看一下下面这段代码会输出什么：

function say(arg1, arg2) {console.log(this.name, arg1, arg2);
}const obj = {name: "tom",say: function () {console.log(this.name);}
};
say();

输出结果：

我们发现报错了，程序并没有找到name。
现在我们来改动一下，使用call函数来改变this的指向，看看会发生什么：

say.call(obj, "1", "2");

发现输出的结果变成了：

call把say函数的this变为了obj。

实现

下面我们来实现一个call函数

Function.prototype._call = function (context) {// 判断是否是一个函数// this指的是调用的函数if (typeof this !== "function") {throw new TypeError("Error");}context = context || window;context.fn = this;const args = [...arguments].slice(1);const result = context.fn(...args);delete context.fn;return result;
};

验证一下：

say._call(obj, "1", "2");

发现输出结果与期望的相同。

apply函数

语法

obj.call(thisObj[,argArray]);

简介

apply与call函数的用法相同，只是参数的传递变成了数组形式。

say.apply(obj, ["1", "2"]);

输出的结果与调用call相同：

实现

Function.prototype._apply = function (context, args) {// 判断是否是一个函数// this指的是调用的函数if (typeof this !== "function") {throw new TypeError("Error");}context = context || window;context.fn = this;let result = null;if (args) {result = context.fn(...args);} else {result = context.fn();}delete context.fn;return result;};

bind 函数

语法

obj.bind(thisObj,arg[,arg2[,arg3[,...agr]]]);

简介

bind函数会返回一个新函数，但是不会像call和apply一样立即执行函数,bind后面的参数会当成obj的参数安装顺序传递进去。

我们先来看两段代码

const s = say.bind(obj, "1", "2");s();

const s = say.bind(obj);s("1", "2");

发现这两段代码输出的结果是一样的。

实现

我们利用apply来实现一下bind函数：

Function.prototype._bind = function (context) {// 判断是否是一个函数if (typeof this !== "function") {throw new TypeError("Error");}const args = [...arguments].slice(1);const fn = this;const F = function () {},fBound = function () {return fn.apply(this instanceof F && context ? this : context || window,args.concat(...arguments));};F.prototype = this.prototype;fBound.prototype = new F();return fBound;};

JS修改this指向：call、apply和bind函数相关推荐

JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
call、apply、bind函数详解
我们都知道call,apply,bind函数都是为了改变this的指向,那么对于三种函数有什么相同点有什么不太点或者有什么应用呢?下面我们来进行介绍 call与apply函数在javascrip ...
手写 call、apply 及 bind 函数
之前在bind和apply以及call函数使用中详解总结过bind和apply以及call函数的使用,下面手写一下三个函数. 一.首先call函数 Function.prototype.MyCall ...
Atitit.js this错误指向window的解决方案
Atitit.js this错误指向window的解决方案 1.1. 出现地点and解决之道1 1.2. call,apply和bind这三个方法2 1.2.1. Function.prototype ...
call()和apply()及bind( )三者的相同与区别
call( )方法 1.call可以调用函数 fn.call( ) 2.call可以改变this指向(call函数的第一个参数就是call所有调用函数里的this指向) 3.call函数的第二个及以后 ...
实现一个bind函数
目前的打算还是继续深入前端基础知识,所以打算从polyfill开始做起. bind函数 bind函数最常见的用法是绑定函数的上下文,比如在setTimeout中的this一般都是指向window,如果 ...
手写一个bind函数
我们先看代码,bind 函数的使用方法 function test(a, b, c) {console.log(a, b, c);console.log('this', this)return '我是 ...
【JavaScript】bind函数是怎么实现的手动实现bind函数
手动实现bind函数 bind函数语法函数内的this指向原理分析 1.bind函数是函数调用的,而js中函数可以视作对象,当bind作为对象方法时,函数内部this指向该对象本身,那么此时调用t ...
理解js中的this指向以及call，apply，bind方法
<script> function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.lo ...

JS修改this指向：call、apply和bind函数

call 函数

语法

简介

实现

apply函数

语法

简介

实现

bind 函数

语法

简介

实现

JS修改this指向：call、apply和bind函数相关推荐

最新文章

热门文章