JS14：方法的定义和调用、this指向改变

方法就是在对象里面的函数；对象只有两个东西：属性和方法。

定义方法

对象名 = {
    方法名: function() {
        // 执行代码
    }
}

// 或者是
对象名.方法名 = function() {
    // 执行代码
}

调用方法

对象名.方法名()

如果方法名后面没有使用()，则将返回方法定义。

对象名.方法名

实例

// 方法定义
const Jack = {
    name: '杰克',
    birth: 1998,
    // 方法
    age: function() {
        // 今年 - 出生年
        const now = new Date().getFullYear();
        return now - this.birth;
    }
} 

// 方法调用
Jack.age();  // 24

此时的 this 指向的是 Jack 这个对象。

接下来，下面我们将上面的代码进行拆分：

function getAge() {
    // 今年 - 出生年
    const now = new Date().getFullYear();
    return now - this.birth;
}

// 方法定义
const Jack = {
    name: '杰克',
    birth: 1998,
    // 方法
    age: getAge
} 

// 方法调用
Jack.age();  // 24
getAge(); // NaN

为什么 getAge() 的执行结果是 NaN？

其实是 getAge() 就是 window.getAge()，因为 this 默认指向调用它的对象，所以此时 this 指向的也是 window，而 window 中未定义 birth 变量，就返回了 NaN。

在 JavaScript 中提供了 call() 和 apply() 用于改变 this 指向。

call

方法名.call(要指向的对象, ...要传递的参数列表);

function getAge() {
    // 今年 - 出生年
    const now = new Date().getFullYear();
    return now - this.birth;
}

// 方法定义
const Jack = {
    name: '杰克',
    birth: 1998,
    // 方法
    age: getAge
} 

// 方法调用
Jack.age();  // 24
// 此时 this 指向 Jack 对象
getAge.call(Jack); // 24

apply

方法名.apply(要指向的对象, 要传递的参数数组);

function getAge() {
    // 今年 - 出生年
    const now = new Date().getFullYear();
    return now - this.birth;
}

// 方法定义
const Jack = {
    name: '杰克',
    birth: 1998,
    // 方法
    age: getAge
} 

// 方法调用
Jack.age();  // 24
// 此时 this 指向 Jack 对象
getAge.apply(Jack); // 24

call 和 apply 的区别

call() 方法分别接收参数。

apply() 方法接收数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

实例

传递多个参数时，call(指向对象, 参数1, 参数2, ...)

function getAge(name, birth) {
    // 今年 - 出生年
    const now = new Date().getFullYear();
    return name + " 今年：" + (now - this.birth) + " 出生于 " + birth;
}

// 方法定义
const Jack = {
    name: '杰克',
    birth: 1998,
    // 方法
    age: getAge
};

// 方法调用
Jack.age();  // 24
getAge.call(Jack, "杰克", 1998); // 杰克 今年：24 出生于 1998

传递多个参数时，apply(指向对象, [参数1, 参数2, ...])

function getAge(name, birth) {
    // 今年 - 出生年
    const now = new Date().getFullYear();
    return name + " 今年：" + (now - this.birth) + " 出生于 " + birth;
}

// 方法定义
const Jack = {
    name: '杰克',
    birth: 1998,
    // 方法
    age: getAge
};

// 方法调用
Jack.age();  // 24
getAge.apply(Jack, ["杰克", 1998]); // 杰克 今年：24 出生于 1998