JS对象Object的常用函数

JS Function对象API call

[TOC]

## 1. JS对象Function对象API

### 1.1. call

**作用：**`call` 是一个函数调用语法，它的作用是调用一个函数并且设置调用函数中的 `this` 关键字指向传入的参数。

> call 的主要作用是改变函数执行时的上下文（this 值）。在 JavaScript 中，函数的 this 值取决于如何调用该函数。使用 call 可以明确指定 this 的值

**call 的语法如下：**

```javascript
functionName.call(thisArg, arg1, arg2, ...);
// thisArg 是 functionName 函数运行时使用的 this 值。
// arg1, arg2, ... 是传递给 functionName 的参数列表。
```

#### 1.1.1. call 无参

如果`call()`没有传入参数，函数内部的this根据执行的环境表示不同，如果是浏览器环境，这时的this是window对象，如果是node环境这时this表示global，这里可以理解为`call`函数将全局的this当作参数传给了`A`函数

```javascript
function A(){
     console.log(this)  // 这里输出的当前环境的this，如果浏览器环境则是window，如果是node则返回的是global
 }
 A.J = function(){ console.log(this)}
 A.call()
 A()
```

> **思考：**如果上面的示例`A`函数是一个定义好的对象中的一个属性，那么这时使用无参call执行后，函数内的this又是什么？
```javascript
var o = {
    A : function(){
        console.log(this) // 这里输出的当前环境的this，如果浏览器环境则是window，如果是node则返回的是global
    }
}
o.A.call()
```
**执行结果：**这时的this函数返回的还是，如果浏览器环境则是window，如果是node则返回的是global。这里也印证了无参的时候call是将全局this传给了A函数

#### 1.1.2. call 参数是函数

在下面的示例中定义了两个函数`A`，`B`。在B函数中使用了call函数，当执行到`A`函数的代码时，这时`A`函数中的this将不再是`A`自身了，而是`B`函数，这就是call函数的作用

```javascript
function A(a, b) {
    console.log(this)  // 输出：[Function: B] { J: [Function (anonymous)] }
    console.log(this.J(a, b))  // 输出：10
    // console.log(this.K(a, b))  // 输出：TypeError: this.K is not a function
    console.log(a + b)  // 输出：30
}
function B(e, f) {
    this.K = function (c, d) {
        return c - d;
    }
    console.log(this)  // 输出：B { K: [Function (anonymous)] }
    A.call(B, e, f)
}
B.J = function (c, d) {
    return c - d;
}
let b = new B(20, 10)
```

> **思考：**上面的示例中在`B`函数中还为其this添加了一个函数属性`K`，并且在函数外为函数添加了一个函数属性`J`，通过执行`A.call(B, e, f)`能否访问到`K`和`J`函数？
**执行结果：**可以访问到`J`函数，无法访问到`K`函数。这是因为示例中call的参数是`B`这个函数，而非`B`的实例，这样在`A`函数中的this指向的是`B`这个函数

> Tip：示例中B函数同时具有构造函数与对象函数的身份

#### 1.1.3. call 参数是函数实例

在下面的示例中定义了两个函数`A`，`B`。在B函数中使用了call函数，当执行到`A`函数的代码时，这时`A`函数中的this将不再是`A`自身了，而是`B`函数的实例`b`

```javascript
function A(a, b) {
    console.log(this) // 输出：B { K: [Function (anonymous)] }
    // console.log(this.J(a, b))  // 输出：TypeError: this.J is not a function
    console.log(this.K(a, b))  // 输出：25
    console.log(a + b)  // 输出：45
}
// let a = new A(1, 2)
function B(e, f) {
    this.K = function (c, d) {
        return c - d;
    }
    console.log(this) // 输出：B { K: [Function (anonymous)] }
    // A.call(this,e, f) 等效下面的 A.call(b, 35, 10)
}
B.J = function (c, d) {
    return c - d;
}
let b = new B(35, 10)
A.call(b, 35, 10)
```

> **思考：**上面的示例中在`B`函数中还为其this添加了一个函数属性`K`，并且在函数外为函数添加了一个函数属性`J`，通过执行`A.call(b, 35, 10)`能否访问到`K`和`J`函数？
**执行结果：**可以访问到`K`函数，无法访问到`J`函数。这是因为示例中call的参数是`B`这个函数的实例b，而非`B`这个函数，这样在`A`函数中的this指向的是`b`这个函数实例

#### 1.1.4. call 实现继承

在下面的示例中，`Animal.call(this, name)` 调用了 `Animal` 构造函数并将 `this` 指向了 `Dog` 构造函数中的 `this`。

```JS
// 定义基类 Animal
function Animal(name) {
    console.log(this)  //  输出：Function：Dog
    this.name = name;  //  给 Dog这个实例添加了一个name属性，这时的this就是Dog实例 
}
// 定义子类 Dog
function Dog(name, breed) {
    // 调用基类 Animal 的构造函数以初始化基类属性
    Animal.call(this, name);
    // 子类特有属性
    this.breed = breed;
}
// 创建一个 Dog 实例
var myDog = new Dog("Buddy", "Golden Retriever");
// 调用基类方法
console.log(myDog); // 输出：Dog对象，对象中有两个属性，breed = Golden Retriever，name = Buddy，其中name这个属性是从Animal类继承来的
```

具体来说，这行代码的作用如下：

+ 1 `Animal.call(this, name)` 告诉 JavaScript 在当前执行环境中执行 `Animal` 构造函数。
+ 2 `this` 关键字在这里表示当前的 `Dog` 实例，因为它是在 `Dog` 构造函数内部调用的。
+ 3 `name` 参数被传递给 `Animal` 构造函数，以便在 `Animal` 类中进行初始化。这是为了确保 `Dog` 实例不仅具有 `Dog` 类的属性（如 `breed`），还具有 `Animal` 类的属性（如 `name`）。

这种方式允许你在子类的构造函数中调用父类的构造函数，并且在初始化子类对象时，确保父类的属性和逻辑也被正确地执行。这是实现继承和复用代码的一种常见模式。

> **思考：**如果将 `Animal.call(this, name);` 修改为 `Animal.call(Dog, name);`那还能实现继承吗？

#### 1.1.5. call 执行系统函数

使用call执行数学函数，在一堆数种找最大的数据

```javascript
let arr = [1,2,3]
console.log(Math.max.call(null,...arr))  // 输出：3
```

在这个例子中，我们使用了 call 方法来调用 Math.max 函数，并将数组 numbers 的元素作为参数传递给它。注意这里 thisArg 为 null，因为 Math.max 不依赖于任何对象的上下文。