call、apply和bind方法

clasnake 發布于2019-08-21 18:44 / 2128人閱讀

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

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

區別：

apply以數組形式接受傳遞給函數的參數

call以單個分開參數的形式

例子：

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操作符訪問實例的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函數調用該方法
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方法也可以設置this操作符的值，但不執行它。

注意：

調用函數的bind方法時，返回一個和原函數具有相同函數體和作用域的新函數

函數體內部的this操作符指向的值，已被永久地改變為傳遞給bind方法的第一個參數，不會改變

例子：

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方法為一個函數內的this操作符進行了綁定，就不能再覆蓋它：

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).

云服務器 GPU云服務器 JS中bind、call和apply的作 js中的call和apply apply與call的區別 apply()方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90759.html

JS基礎篇--call、apply、bind方法詳解

摘要：首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。而則會立即執行函數。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 評論0 收藏0
JS中的call、apply、bind方法詳解

摘要：不能應用下的等方法。首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 評論0 收藏0
前端基礎:call,apply,bind的的理解

摘要：和區別其實他們的作用是一樣的，只是傳遞的參數不一樣而已。接受個參數，第一個參數指定了函數體內對象的指向，第二個參數為數組或者一個類數組。看個栗子一個有意思的事在中，多次是無效的。而則會立即執行函數。背景前兩天在做小程序的需求的時候用到bind的時候才想起自己對這三的東西的了解比較淺薄，這個時候用的時候就有點怕。時候還是要好好學習下，理解下怎么玩。正文先說call 和 apply...

netmou 2019-08-20 17:01 評論0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：輸出的作用與和一樣，都是可以改變函數運行時上下文，區別是和在調用函數之后會立即執行，而方法調用并改變函數運行時上下文后，返回一個新的函數，供我們需要時再調用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改變函數運行時上下文，最終的返回值是你調用的方法的返回值，若該方法沒有返回值，則返回undefined。這幾個方法...

chaosx110 2019-08-26 12:23 評論0 收藏0
this總結【2】—— call/apply和bind

摘要：和概覽我們要將歸為一類，單獨歸為一類三者的共同點是都可以指定和都是綁定在的原型上的，所以的實例都可以調用這三個方法至于為什么，看完這篇文章你就懂了如果你不懂什么是實例的話，請移步深入淺出面向對象和原型概念篇深入淺出面向對象和原型概念篇第一個 1.call/apply和bind概覽我們要將call/apply歸為一類，bind單獨歸為一類三者的共同點是都可以指定this call/...

wudengzan 2019-08-26 11:48 評論0 收藏0
js 面試官想了解你有多理解call,apply,bind?

摘要：返回值這段在下方應用中有詳細的示例解析?；卣{函數丟失的解決方案綁定回調函數的指向這是典型的應用場景綁定指向，用做回調函數。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函數原型鏈中的 apply，call 和 bind 方法是 JavaScript 中相當重要的概念，與 this...

wuaiqiu 2019-08-26 10:33 評論0 收藏0