（十六）call、apply、bind介绍、区别和实现

十一ge哆啦A梦

已于 2024-04-22 10:15:26 修改

阅读量1.1k

点赞数 19

分类专栏：面试题文章标签： javascript 开发语言 ecmascript

于 2024-04-19 18:14:55 首次发布

本文链接：https://blog.csdn.net/qq_43498878/article/details/137963396

版权

面试题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细解析了JavaScript中函数的this指向机制，介绍了call、apply和bind方法的区别与用法，以及类数组对象arguments的作用。特别关注了它们如何影响函数调用的上下文和参数传递，以及bind方法的返回值特性。

摘要由CSDN通过智能技术生成

函数中的this指向：

函数中的this指向是在函数被调用的时候确定的，也就是执行上下文被创建时确定的。在一个执行上下文中，this由调用者提供，由调用函数的方式来决定。

类数组对象arguments：

arguments只在函数（除了箭头函数）中存在的类数组参数对象，储存了我们传入的所有参数。

一、call

call(this, 参1, 参2, ...)，第一个参数为this，后面是函数的一系列参数
当第一个this参数为null、undefind时，默认this指向window
函数立即调用
原理：实际就是把函数放到call传入的第一个参数上，然后再调用该函数。
实现：

/**
 * 手写call
 * @param {*} context
 * @param  {...any} args
 * @returns
 */
Function.prototype.mycall = function (context, ...args) {
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  //context不传，默认window
  let _this = context || window;

  //假如原来的context上存在fn属性会产生冲突，暂存一下。
  let temp = null;
  if (_this.fn) {
    temp = _this.fn;
  }

  _this.fn = this;
  // 调用函数
  let res = _this.fn(...args);

  if (temp) {
    //恢复_this对象上的原来的fn属性
    _this.fn = temp;
  } else {
    //删除_this对象上的fn属性
    delete _this.fn;
  }

  return res;

// 测试
let num = 1;
let obj = {
  num: 2,
  fn: "this is obj.fn",
};
function test(a, b, c, d) {
  let num = 1;
  console.log(this.num, "test参数", a, b, c, d);
}
test(4, 3, 2, 1);
// 调用myCall函数
test.mycall(obj, 4, 3, 2, 1);

// 检查obj本身的fn是否被修改
console.log(obj.fn);
};

在这里插入图片描述

注意：这个 undefind，是由于我使用 let 声明的变量。var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性。let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性，而是在一般声明环境 declsEnv 中。

从ES6开始，全局变量和顶层对象的属性开始分离，这意味着使用let和const声明的全局变量不再属于顶层对象的属性，如window对象。这是为了提供更好的模块化和封装，避免全局命名空间的污染。

二、apply

applyl(this, arr)，第一个参数为this，第二个参数是一个参数数组
当第一个this参数为null、undefind时，默认this指向window
函数立即调用
原理：和call类似，区别就是参数不同，call方法接受的参数是一个参数列表，而apply接受的是一个包含多个参数的数组。
实现：

// 和myCall的不同之处1：参数
Function.prototype.myApply=function(context){
  	if(typeof this!== 'function'){
        throw new TypeError('type error')
    }
  	console.log("myApply", arguments, context, this);
  	let _this = context || window;

  	let temp = null;
  	if (_this.fn) {
    	temp = _this.fn;
  	}
  	_this.fn = this;
  	let res;
  	//   判断是否存在第二个参数
  	if (arguments[1]) {
    	res = _this.fn(...arguments[1]);
  	} else {
    	res = _this.fn();
  	}
 // 删除context对象上的fn属性
  	if (temp) {
    	_this.fn = temp;
  	} else {
    	delete _this.fn;
  	}
 	 return res;
}

// 测试
let num = 1;
let obj = {
  num: 2,
  fn: "this is obj.fn",
};
function test(a, b, c, d) {
  let num = 1;
  console.log(this.num, "test参数", a, b, c, d);
}
test(4, 3, 2, 1);
// 调用myCall函数
test.myApply(obj, [4, 3, 2, 1]);

// 检查obj本身的fn是否被修改
console.log(obj.fn);

结果：
在这里插入图片描述

三、bind

bind(this, 参1, 参2, ...)，第一个参数为this，后面是函数的一系列参数
当第一个this参数为null、undefind时，默认this指向window
bind方法的返回值是函数，不会立即调用
原理：（1）bind返回的函数作为构造函数使用的时候，bind绑定的this会失效，到那时参数有效。（2）如何判断bind 是正常使用还是当构造函数，根据this。当为构造函数时，this指向实例对象（this的prototype在该构造函数上）
实现：

Function.prototype.myBind = function (_this) {
  if (typeof this !== "function") {
    throw new TypeError("_this must be a function");
  }
  //获取参数
  let args0 = [...arguments].slice(1);
  //保存this,如果作为构造函数使用，此时this会指向实例
  let that = this;
  let context = _this||window;
  return function Fn(...args) {
    // 如果是new的形式来使用绑定函数的
    if (this instanceof Fn) {
      return new that(...args0, ...args);
    } else {
      return that.call(context , ...args0, ...args);
    }
  };
};

//测试：
function Point(x, y) {
  this.x = x;
  this.y = y;
}

// 情况1：正常调用bind函数
let testObj = {};
let MyPoint = Point.myBind(testObj, 0);
MyPoint(1);
console.log(testObj);
//情况2：bind返回的函数作为构造函数
let newObj = new MyPoint(2);
console.log(newObj);