探究Javascript中的new、apply、bind、call，揭秘this的奥秘

2024-01-28 07:56:58

Javascript作为一门强大的编程语言，在前端开发领域有着广泛的应用。其中，new、apply、bind、call方法是相当重要的概念，并且与this的指向密切相关。为了帮助读者深入理解Javascript中的对象、函数和方法，本文将深入探讨这个关键词的作用，并尝试进行手动编写复现。

一、Javascript中的对象

在Javascript中，对象是一种复杂的数据类型，它可以包含多个键值对，每个键值对由一个属性名和一个属性值组成。对象可以用来存储和组织数据，并且可以通过属性名来访问对象中的数据。

二、Javascript中的函数

函数是Javascript中的一种特殊的对象，它可以接收参数，并执行一系列操作。函数可以通过函数名来调用，并且可以将值作为参数传递给函数。函数还可以返回一个值，这个值可以被调用函数使用。

三、Javascript中的this

this在Javascript中是一个特殊的存在，它指向当前正在执行的代码所在的上下文对象。this关键字的值可以是window对象、document对象、某个函数对象或者某个对象实例。this关键字在Javascript中有着广泛的应用，例如，它可以用来访问对象的属性和方法，也可以用来调用函数。

四、Javascript中的new、apply、bind、call方法

new、apply、bind、call方法都是Javascript中常用的方法，它们可以用来调用函数并改变this关键字的指向。

new 方法用于创建一个新的对象实例，并且自动执行对象的构造函数。
apply 方法用于调用一个函数，并且可以指定this关键字的指向和参数。
bind 方法用于创建一个新的函数，这个函数的this关键字指向指定的对象，并且可以指定参数。
call 方法用于调用一个函数，并且可以指定this关键字的指向和参数。

五、手动编写复现new、apply、bind、call方法

为了更好地理解new、apply、bind、call方法的作用，我们可以尝试手动编写复现这些方法。

// 手动编写复现new方法
function new(fn, ...args) {
  const obj = {};
  obj.__proto__ = fn.prototype;
  const result = fn.apply(obj, args);
  return result instanceof Object ? result : obj;
}

// 手动编写复现apply方法
Function.prototype.apply = function(obj, args) {
  obj.fn = this;
  const result = obj.fn(...args);
  delete obj.fn;
  return result;
};

// 手动编写复现bind方法
Function.prototype.bind = function(obj, ...args) {
  const fn = this;
  return function(...bindArgs) {
    return fn.apply(obj, [...args, ...bindArgs]);
  };
};

// 手动编写复现call方法
Function.prototype.call = function(obj, ...args) {
  obj.fn = this;
  const result = obj.fn(...args);
  delete obj.fn;
  return result;
};