JavaScript

JavaScript 知识量:26 - 101 - 483

9.4 函数内部><

arguments- 9.4.1 -

arguments是一个类数组对象,它代表被传递给一个函数的参数。可以通过索引来访问参数,比如 arguments[0] 是第一个参数,arguments[1] 是第二个参数,等等。

下面是一个简单的函数示例,它使用 arguments:

function add() {  
  var sum = 0;  
  for (var i = 0; i < arguments.length; i++) {  
    sum += arguments[i];  
  }  
  return sum;  
}  
  
console.log(add(1, 2, 3, 4, 5));  // 输出:15

在这个例子中,函数 add 没有指定参数,所以可以传递任意数量的参数给它。然后,使用 arguments 对象,函数内部的循环可以访问所有传递的参数,并将它们加起来。

注意 arguments 对象有一些有趣的特性:

  • 尽管它看起来像一个数组,但是它并没有数组的所有方法。它是一个类数组对象,而不是真正的数组。要将其转换为数组,可以使用 Array.from() 或者展开语法(...arguments)。

  • 即使没有传递任何参数给函数,arguments 对象仍然存在。它的长度是传递给函数的参数的数量。如果没传递任何参数,它的长度为0。

  • arguments 对象的“length”属性是一个数字,表示传递给函数的参数的数量。如果想知道函数被调用时传递了多少个参数,可以使用 arguments.length。

this- 9.4.2 -

this 关键字在函数内部具有特殊的含义。它指向的是调用函数的对象。

this 的具体值取决于函数是如何被调用的。在全局作用域,或者在函数中直接调用 this,通常指向全局对象(在浏览器中是 window)。而在对象的方法中,this 通常指向该方法所属的对象。例如:

function func() {  
  console.log(this);  
}  
  
func(); // 输出全局对象,在浏览器中是 window  
  
const obj = {  
  method: function() {  
    console.log(this); // 输出 obj  
  }  
}  
  
obj.method();

在箭头函数中,this 是从定义时候的上下文继承的,也就是说箭头函数中的 this 不会绑定到调用它的对象上,而是从它的词法环境中获取 this 的值。

const obj = {  
  value: "对象",  
  getThis: () => {  
    console.log(this.value);  
  }  
}  
  
obj.getThis(); // 输出 "对象"

在事件处理程序或回调函数中,如 click 事件或 Promise 的 then 方法,this 通常也指向全局对象。

button.addEventListener('click', function() {  
  console.log(this); // 输出全局对象,在浏览器中是 window  
});

在 JavaScript 中,可以通过 Function.prototype.call(),Function.prototype.apply() 或 Function.prototype.bind() 来改变函数的 this。例如:

const obj = { value: "对象" };  
  
function func() {  
  console.log(this.value);  
}  
  
func.call(obj); // 输出 "对象"

在这个例子中,使用 call() 方法并传入 obj 作为上下文,所以 func 内部的 this 指向了 obj。

new.target- 9.4.3 -

new.target是一个特殊的内置属性,当一个函数被作为构造函数调用时,它会被自动填充。它的主要用途是在构造函数中确定调用它的方式(例如,是否通过new关键字调用)。

下面是一个例子:

function MyClass() {  
  if (new.target === MyClass) {  
    console.log("This is being called as a constructor.");  
  } else {  
    console.log("This is not being called as a constructor.");  
  }  
}  
  
MyClass(); // "This is not being called as a constructor."  
new MyClass(); // "This is being called as a constructor."

在这个例子中,当MyClass作为构造函数调用时(即,当使用new关键字调用它时),new.target的值是MyClass。如果MyClass不是作为构造函数调用,那么new.target的值则不是MyClass。

这个特性在ES6中引入,因此,如果环境支持ES6,就可以使用这个特性。如果环境不支持,那么new.target将会是undefined。