JS学习之理解函数调用

隐式参数

当调用函数时,除了传入在函数定义中显式声明的参数之外,同时还传入了两个隐式参数: arguments与this。

arguments

它是传入函数所有参数的集合。具有length属性，表示传入参数的个数。通过arguments可获取那些与函数形参不匹配的实参。

在非严格模式下，arguments对象是函数参数的别名，修改arguments对象会修改函数实参，可以通过严格模式避免函数实参的修改。

// 通过arguments来获取所有参数
function sum1() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
console.log(sum1(1, 2, 3, 4));  // 10

// 通过arguments修改实参
function getName1(name) {
    arguments[0] = "Lucy";
    return name;
}
function getName2(name) {
    "use strict";
    arguments[0] = "Lily";
    return name;
}

console.log(getName1("Jack"));  // Lucy
console.log(getName2("Tom"));   // Tom

this

表示函数上下文，即与函数调用相关联的对象。函数的定义方式和调用方式决定了this的取值。

函数调用与`this`的取值

作为函数调用，在非严格模式下，this指向全局window对象；在严格模式下，this指向undefined。

function f1() {return this;}
function f2() {
    "use strict";
    return this;
}
console.log(f1());  // window
console.log(f2());  // undefined

作为方法调用，this通常指向调用的对象。

let ninja1 = {
    whoAmI: function () {
        return this;
    }
};

let ninja2 = {
    whoAmI: ninja1.whoAmI
};

let identify = ninja2.whoAmI;

console.log(ninja1.whoAmI() === ninja1);//true
console.log(ninja2.whoAmI() === ninja2);//true
// 函数表达式作为函数被调用与作为函数调用一样
console.log(identify() === window);//true

作为构造函数调用，this指向新创建的对象。

function F3() {
    this.name = function () {
        return this;
    }
}
let f3 = new F3();
console.log(f3.name() === f3);          // true

function F5() {
    "use strict";
    this.name = function () {
        return this;
    };
}
// 在严格槿式下调用会报错，因为作为函数调用，this是指向undefined的
// F5();

function F4() {
    this.name = function () {
        return this;
    };
    return 1;
}
let f4_1 = new F4();
// 如果构造函数返回的是非对象类型，则忽略返回值，返回新创建的对象
console.log(f4_1.name() === f4_1);      // true
// 作为函数调用
let f4_2 = F4();
console.log(f4_2);                      // 1

let test2 = {
    name: "Lucy"
};
function F6() {
    this.name = "Lily";
    return test2;
}
let f6 = new F6();
console.log(f6 === test2);              // true
// 如果构造函数返回一个对象，则该对象将作为整个表达式的值返回，
// 而传入构造函数的this将被丢弃
console.log(f6.name === "Lily");        // false

通过call或apply调用，this指向call或apply的第一个参数

function sum3() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    this.result = sum;
}

let obj1 = {};
let obj2 = {};
sum3.call(obj1, 1, 2, 3);
console.log(obj1.result === 6);     // true
sum3.apply(obj2, [4, 5, 6]);
console.log(obj2.result === 15);    // true

箭头函数没有单独的this值，this在箭头函数创建时确定

先看一个问题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>强制指定上下文</title>
</head>
<body>

<div>
<button id="testClick">点击</button>
</div>

<script>
    function Button() {
        this.clicked = false;
        this.click = function () {
            this.clicked = true;
            console.log(button.clicked);            // false
            console.log(this === clickButton);      // true
        }
    }
    
    let button = new Button();
    let clickButton = document.getElementById("testClick");
    clickButton.addEventListener("click", button.click);

</script>

</body>
</html>

由console可知，浏览器的事件处理系统将把调用的上下文定义为事件触发的目标元素，也就是clickButton对象，很显然我们将单击状态设置到了错误的对象上了。那怎么改了？可以使用上面说过的call或apply的方式来解决。

clickButton.addEventListener("click", function () {
    button.click.call(button);
});

当然我们还可以使用更简单的方式：箭头函数

this.click = () => {
    this.clicked = true;
    console.log(button.clicked);            // true
    console.log(this === button);           // true
};

所有函数均可使用bind方法创建新函数，并绑定到bind方法传入的参数上。被绑定的函数与原始函数具有一致的行为。

还是上面那个button点击事件，第一种方式使用call或apply的方式将指定对象与函数绑定；第二种方式使用箭头函数将指定对象与函数绑定，第三种方式就是使用bind方法。

clickButton.addEventListener("click", button.click.bind(button));

JS学习之理解函数调用

隐式参数

函数调用与this的取值

推荐阅读更多精彩内容

函数调用与`this`的取值