1. 程式人生 > >apply、call、bind小結

apply、call、bind小結

相似點

首先,這三個都是用來改變函式的this物件的指向的;

然後,他們第一個引數都是要指向的物件;

最後,後續的引數用來傳參。

區別之處

有個例子特別好:

var xw = {
       name : "小王",
       gender : "男",
       age : 24,
       say : function() {
           alert(this.name + " , " + this.gender + " ,今年" + this.age);                                
       }
}
var xh = {
       name : "小紅",
       gender : "女",
       age : 18
}
xw.say();

那麼結果當然不用說,顯示是       小王,男,今年24.

那麼我們如何顯示xh的資料呢。

如果用call

xw.say.call(xh);	//即xw中的say方法的呼叫者改成了xh,改變了this的指向。

如果用apply

xw.say.apply(xh);	//即xw中的say方法的呼叫者改成了xh,改變了this的指向。

如果用bind

xw.say.bind(xh)();	//此處,bind返回的是一個函式,如果要執行,需要()進行呼叫。

上面可以看出,三者都改變了原方法的this指向,apply、call和bind的區別也很明顯

那麼apply和call的區別

那我們修改一下上面的這個例子

var xw = {
        name : "小王",
        gender : "男",
        age : 24,
        say : function(school,grade) {
            alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                                
        }
 }
var xh = {
        name : "小紅",
        gender : "女",
        age : 18
}

ok,多個兩個引數

如果用call

xw.say.call(xh,”XX小學”,”六年級”);

如果用apply

xw.say.apply(xh,[”XX小學”,”六年級”]);

區別就是apply後面傳陣列,call是一個個傳參,一一對應

當然bind也可以傳參

xw.say.bind(xh)(”XX小學”,”六年級”);

解釋同上,因為bind返回的是一個函式,所以我們是在呼叫的時候傳參。

所以最大的區別就是apply、call是立即呼叫函式,bind不是

使用小技巧

1、巧用apply

Math.max函式用於取得最大值,但是它必須以一個傳入引數,而不是陣列形式。So

const arr = [1,2,3,4,5,6]
const max = Math.max.apply(null, arr)
console.log(max)    // 6

2、驗證陣列(前提是toString()方法沒有被重寫過)

function   isArray(obj){ 
    return Object.prototype.toString.call(obj) === '[object Array]' ;
}

原型鏈找到末端的函式進行呼叫,就是obj呼叫了原型鏈上的公共函式toString。

3、讓類陣列擁有陣列的方法

比如arguments物件,獲取到的文件節點等,並沒有陣列的那些方法:

Array.prototype.slice.apply(argument);

//理論上來說這個比較快,直接在原型上查詢slice方法

//但實際上比較慢

或者

[].slice.apply(arguments);

//理論上來說這個比較慢,因為要Array做一個例項化再查詢slice方法

//實際上比較快,因為現在的各種自動化工具會把上一種方法轉換為這種,而第二種程式碼比較簡潔,所以會比較快

也就是說:不是陣列,但是卻可以使用陣列的函式

相關推薦

applycallbind小結

相似點 首先,這三個都是用來改變函式的this物件的指向的; 然後,他們第一個引數都是要指向的物件; 最後,後續的引數用來傳參。 區別之處 有個例子特別好: var xw = { name : "小王", gender : "男",

深入淺出 妙用Javascript中applycallbind

com alt apply all 如何使用 name 深入 期待 單體模式   網上文章雖多,大多復制粘貼,且晦澀難懂,我希望能夠通過這篇文章,能夠清晰的提升對apply、call、bind的認識,並且列出一些它們的妙用加深記憶。  apply、call   在 ja

bindcallapply的區別與實現

const 瀏覽器 mas font else turn 結果 div function 1、簡單說一下bind、call、apply的區別   三者都是用於改變函數體內this的指向,但是bind與apply和call的最大的區別是:bind不會立即調用,而是返回一個新函

thisapplycallbind

這又是一個面試經典問題~/(ㄒoㄒ)/~~也是 ES5中眾多坑中的一個,在 ES6 中可能會極大避免 this 產生的錯誤,但是為了一些老程式碼的維護,最好還是瞭解一下 this 的指向和 call、apply、bind 三者的區別。 本文首發於我的個人網站:cherryblog.sit

JavaScript applycallbind 方法的使用

首先,這三個方法都是改變函式的this物件的指向來擴充套件函式賴以執行的作用域。 每個函式都包含這三個非繼承而來的方法。 他們的用途相同,都是在特定的作用域中呼叫函式。 第一個引數都是this要指向的物件。 都可以傳遞引數,傳參方式不同。 apply

JavaScript中的thisapply()call()bind()

this this是函式執行時基於函式的執行環境繫結的,指向最後呼叫它的那個物件。 例1: function a(){ var name= "Carol"; console.log(this.user); //undefined console.log(t

【作用域】applycallbind的區別

一、apply、call、bind三者的區別 方法: Function.prototype.apply(thisArg, argArray) Function.prototype.call(thisA

javascript中applycallbind的區別

在JS中,這三者都是用來改變函式的this物件的指向的,他們有什麼樣的區別呢。在說區別之前還是先總結一下三者的相似之處: 都是用來改變函式的this物件的指向的。 第一個引數都是this要指向的物件。 都可以利用後續引數傳參。 區別在哪裡的,先看一個例子 var xw

this(他喵的)到底是什麼 — 理解 JavaScript 中的 thiscallapplybind

javaScript 中最容易被誤解的一點就是 this 關鍵字。在這篇文章中,你將會了解四種規則,弄清楚 this 關鍵字指的是什麼。隱式繫結、顯式繫結、new 繫結和 window 繫結。在介紹這些技術時,你還將學習一些 JavaScript 其他令人困惑

JavaScript中this關鍵字改變指向的三種方法(applycallbind

首先,瞭解一下this關鍵字。this關鍵字就涉及到函式呼叫的內容。函式的幾種呼叫方式: 普通函式呼叫 作為方法來呼叫 作為建構函式來呼叫 使用apply/call方法來呼叫 Function.prototype.bind方法 ES6箭頭函式 但是不管

bindcallapply的區別與實現原理

const con ons 運行時 模擬實現 原理 支持 包裝 ofo 1、簡單說一下bind、call、apply的區別   三者都是用於改變函數體內this的指向,但是bind與apply和call的最大的區別是:bind不會立即調用,而是返回一個新函數,稱為綁定函數,

applycallbind區別用法

apply和call都是為了改變某個函式執行時的上下文而存在的(就是為了改變函式內部this的指向); 如果使用apply或call方法,那麼this指向他們的第一個引數,apply的第二個引數是一

JavaScript中bindcallapply函式用法詳解

在給我們專案組的其他程式介紹 js 的時候,我準備了很多的內容,但看起來效果不大,果然光講還是不行的,必須動手。前幾天有人問我關於程式碼裡 call() 函式的用法,我讓他去看書,這裡推薦用js 寫伺服器的程式猿看《javascript程式設計精粹》 這本書,crockfo

【轉】javascript筆記之applycallbind用法

原文地址:https://www.cnblogs.com/coco1s/p/4833199.html   apply、call  在 javascript 中,call 和 apply 都是為了改變某個函式執行時的上下文(context)而存在的,換句話說,就是為了改變函式體內

細說applycallbind

apply、call和bind 我們可以使用函式物件的apply和call來應用函式,切換其執行上下文(this指標)。call和bind本質上是apply方法的語法糖。 call和apply 基本用法 略。 區別 二者的區別在於

淺談bindcallapply區別,使用方法及場景

談到bind、call、apply,首先想到的是改變this全域性上下文指向,但三者的區別,就自己的使用淺談心得。 首先,直接呼叫三個方法並列印,獲取直觀對比,demo程式碼如下: <script> var objA = { name:

javascirpt之 thisapplycallbind

this、apply、call、bind 這又是一個面試經典問題~/(ㄒoㄒ)/~~也是 ES5中眾多坑中的一個,在 ES6 中可能會極大避免 this 產生的錯誤,但是為了一些老程式碼的維護,最好還是瞭解一下 this 的指向和 call、apply、bind 三者的區別。 this 的指向

thiscallapplybind

This指標 每一個方法或函式都會有一個this物件,this物件是方法(或函式)在執行時的那個環境,也可以說是這個函式在那個作用域下執行的。說的更通俗一點:this就相當於咱們平時說話時候說的“我”,“我家”的概念。就是說當一個方法在執行的時候,它是屬於誰的。它在執行的時候它的家是誰家。

JavaScript對bindcallapply函式用法的理解

我們知道,在 js 裡,函式其實也是一個物件,那麼函式自然也可以擁有它自己的方法,有點繞,在 js 裡,每個函式都有一個公共的 prototype —— Function,而這個原型自帶有好幾個屬性和方法,其中就有這裡困惑的 bind、call、apply 方法。先說 apply 方法,它讓我們構造一個引數陣

applycallbind的區別

在JS中,這三者都是用來改變函式的this物件的指向的,他們有什麼樣的區別呢? 在說區別之前還是先總結一下三者的相似之處: 都是用來改變函式的this物件的指向的。 第一個引數都是this要指向的物件。 都可以利用後續引數傳參。 那麼他們的區別在哪裡的,