call、apply和bind方法

clasnake 發(fā)布于2019-08-21 18:44 / 2131人閱讀

摘要：和和方法非常相似，都是先設(shè)置函數(shù)中的操作符的值，并且執(zhí)行這個(gè)函數(shù)。區(qū)別以數(shù)組形式接受傳遞給函數(shù)的參數(shù)以單個(gè)分開參數(shù)的形式例子使用操作符訪問實(shí)例的和屬性通過和函數(shù)調(diào)用該方法方法也可以設(shè)置操作符的值，但不執(zhí)行它。

1. call和apply call和apply方法非常相似，都是先設(shè)置函數(shù)中的this操作符的值，并且執(zhí)行這個(gè)函數(shù)。

區(qū)別：

apply以數(shù)組形式接受傳遞給函數(shù)的參數(shù)

call以單個(gè)分開參數(shù)的形式

例子：

class Person {
    public name: string;
    public surname: string;
    
    constructor(name: string, surname: string) {
        this.name = name;
        this.surname = surname;
    }
    
    public greet(city: string, country: string) {
        // 使用this操作符訪問實(shí)例的name和surname屬性
        var msg = `Hi, my name is ${this.name} ${this.surname}. `;
        msg += `I"m from ${city} (${country}).`;
        console.log(msg);
    }
}


var person = new Person("Fourteen", "Zhang");

person.greet("Shijiazhuang", "China");
// Hi, my name is Fourteen Zhang. I"m from Shijiazhuang (China).

// 通過call和apply函數(shù)調(diào)用該方法
person.greet.call(person, "Shijiazhuang", "China");
person.greet.apply(person, ["Shijiazhuang", "China"]);

var valueOfThis = { name: "Fourteen", surname: "Zhang" };
person.greet.call(valueOfThis, "Shijiazhuang", "China");
person.greet.apply(valueOfThis, ["Shijiazhuang", "China"]);
// Hi, my name is Fourteen Zhang. I"m from Shijiazhuang (China).

2. bind bind方法也可以設(shè)置this操作符的值，但不執(zhí)行它。

注意：

調(diào)用函數(shù)的bind方法時(shí)，返回一個(gè)和原函數(shù)具有相同函數(shù)體和作用域的新函數(shù)

函數(shù)體內(nèi)部的this操作符指向的值，已被永久地改變?yōu)閭鬟f給bind方法的第一個(gè)參數(shù)，不會(huì)改變

例子：

var person = new Person("Fourteen1", "Zhang");

var greet = person.greet.bind(person);

greet.call(person, "Hebei", "China");
greet.apply(person, ["Hebei", "China"]);
// Hi, my name is Fourteen1 Zhang. I"m from Shijiazhuang (China).

greet.call(null, "Hebei", "China");
greet.apply(null, ["Hebei", "China"]);
// Hi, my name is Fourteen1 Zhang. I"m from Hebei (China).

var valueOfThis = { name: "Fourteen2", surname: "Zhang" };
greet.call(valueOfThis, "Hebei", "China");
greet.apply(valueOfThis, ["Hebei", "China"]);
// Hi, my name is Fourteen1 Zhang. I"m from Hebei (China).

一旦使用bind方法為一個(gè)函數(shù)內(nèi)的this操作符進(jìn)行了綁定，就不能再覆蓋它：

var valueOfThis = { name: "Fourteen3", surname: "Zhang" };

var greet = person.greet.bind(valueOfThis);
greet.call(valueOfThis, "Hebei", "China");
greet.apply(valueOfThis, ["Hebei", "China"]);
// Hi, my name is Fourteen1 Zhang. I"m from Hebei (China).