call、apply、bind 原理、區別及原生js模擬。

vpants 發布于2019-08-22 15:36 / 3198人閱讀

摘要：的原型上存放著實例的一些共有方法。每個函數都可以調用方法，來改變當前這個函數執行的關鍵字，并且支持傳入參數我們用原生模擬方法，來更加深刻了解它。和方法類似，作用都是改變當前函數執行的指向，并且將函數執行。

Function的prototype原型上存放著 Function實例的一些共有方法。
A.Function的原型不像其他類(Array、Object...)的原型一樣是個對象，Fuction的原型是一個空函數，是可以執行的，只不過返回undefined，Function.prototype();但是這并不影響它作為一個對象擁有自己的屬性方法
B.Function這個類，同時也是Function的一個實例，所以它也具備__proto__屬性，這個屬性指向它自己的原型

1.call方法。每個函數都可以調用call方法，來改變當前這個函數執行的this關鍵字，并且支持傳入參數;我們用原生js模擬call方法，來更加深刻了解它。
a.第一個參數為調用call方法的函數中的this指向
b.第二個及以后的參數為給調用call方法的函數傳入的參數
c.執行這個函數，call方法返回的結果就是調用他的函數返回的結果
d.將this指向銷毀。

Function.prototype.mycall = function(context){
    context = context || window;
    context.fn = this;
    var arr = [];
    for(var i = 1;i
2.apply和call方法類似，作用都是改變當前函數執行的this指向，并且將函數執行。
唯一不同就是 call方法給當前函數傳參是一個一個傳。而apply是以數組方式傳入參數
Function.prototype.myApply =function(context,arr){
context = Object(context) || window;
context.fn = this;
var result;
if(!arr){
    result= context.fn();
}else{
    var args = [];
    for(var i=0;i
3.bind方法，是改變當前調用bind方法的函數this指向，但是不會立即執行當前函數，而是返回一個新的函數。并且支持給新的函數傳入參數執行，從而出發之前調用bind方法的函數執行，并且參數透傳進去。bind方法是高階函數的一種。
Function.prototype.myBind = function(){
var context = arguments[0];
var self = this;
return function (){
    self.myApply(context,arguments)
}
};
var j = {name:1};
var k = [123]
function drink (k){
    console.log(this.name,k);
}
var fn = drink.myBind(j);
fn(k);


實現原生 call、apply、bind方法的重點:
1.改變this指向:函數執行，點.前面是誰，this就是誰的原理改變this指向
2.參數透傳:通過eval將字符串轉變成js語法 去執行。
3.bind方法返回一個函數，返回的函數執行，會進行作用域查找context對象；并且通過原型鏈查找調用apply方法
call、apply、bind相同和區別
相同：都能改變函數執行的this指向
不同:callapply 是立即執行 bind是不執行
call傳參是一個一個傳入，apply是數組形式傳入

GPU云服務器云服務器 JS中bind、call和apply的作 apply與call的區別 js中的call和apply 原生js選項卡原理

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

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

可能遇到假的面試題：不用call和apply方法模擬實現ES5的bind方法

摘要：來自朋友去某信用卡管家的做的一道面試題，用原生模擬的方法，不準用和方法。他們的用途相同，都是在特定的作用域中調用函數。不同之處在于，方法傳遞給調用函數的參數是逐個列出的，而則是要寫在數組中。本文首發我的個人博客：前端小密圈，評論交流送1024邀請碼，嘿嘿嘿?。來自朋友去某信用卡管家的做的一道面試題，用原生JavaScript模擬ES5的bind方法，不準用call和bind方法。 ...

李世贊 2019-08-29 12:31 評論0 收藏0
可能遇到假的面試題：不用call和apply方法模擬實現ES5的bind方法

摘要：來自朋友去某信用卡管家的做的一道面試題，用原生模擬的方法，不準用和方法。他們的用途相同，都是在特定的作用域中調用函數。不同之處在于，方法傳遞給調用函數的參數是逐個列出的，而則是要寫在數組中。本文首發我的個人博客：前端小密圈，評論交流送1024邀請碼，嘿嘿嘿?。來自朋友去某信用卡管家的做的一道面試題，用原生JavaScript模擬ES5的bind方法，不準用call和bind方法。 ...

ConardLi 2019-08-22 11:03 評論0 收藏0
【進階3-3期】深度解析 call 和 apply 原理、使用場景及實現

摘要：之前文章詳細介紹了的使用，不了解的查看進階期。不同的引擎有不同的限制，核心限制在，有些引擎會拋出異常，有些不拋出異常但丟失多余參數。存儲的對象能動態增多和減少，并且可以存儲任何值。這邊采用方法來實現，拼成一個函數。之前文章詳細介紹了 this 的使用，不了解的查看【進階3-1期】。 call() 和 apply() call() 方法調用一個函數, 其具有一個指定的 this 值和分...

godlong_X 2019-08-23 14:31 評論0 收藏0
面試官:你能手寫實現call,apply,bind方法嗎?

摘要：前言實踐系列主要是讓我們通過實踐去加深對一些原理的理解。求求三兄弟的作用都是為了改變函數運行時上下文指向而存在的。不會立即調用其他兩個會立即調用。如果有幫助到你請給我一個就算是對我的感謝啦前言 [實踐系列] 主要是讓我們通過實踐去加深對一些原理的理解。實踐系列-前端路由實踐系列-Babel原理實踐系列-Promises/A+規范實踐系列-瀏覽器緩存機制有興...

Warren 2019-08-23 15:37 評論0 收藏0