聊聊call apply bind的故事

2022-03-08 02:15:13 字數 1841 閱讀 4615

實際上它們真正的樣子是這樣的:

它們幾個的作用都是改變this的指向。

.bind()與另外兩個的區別則是前者改變this,不立即呼叫函式;而後者改變this,立即呼叫函式。

以下例子在非嚴格模式下,

// 注釋的是各個情況this的指向

let test =

}test.foo();

test.foo.call(null, 1, 2);//this->window

test.foo.call('', 1, 2);// this->string

test.foo.call(undefined, 1, 2); //this->window

test.foo.bind(null, 1, 2);

test.foo.bind('', 1, 2);

test.foo.bind(undefined, 1, 2);

在嚴格模式下,

// 注釋的是各個情況this的指向

'use strict'

let test =

}test.foo();

test.foo.call(null, 1, 2);//this->null

test.foo.call('', 1, 2);// this->

test.foo.call(undefined, 1, 2); //this->undefined

test.foo.bind(null, 1, 2);

test.foo.bind('', 1, 2);

test.foo.bind(undefined, 1, 2);

那麼為什麼要模擬實現呢?

.mycall()的實現

function.prototype.mycall = function(context, ...arg) 

var foo =

var bar = function(name, age)

// bar.mycall(foo, 'zenquan', 23);

bar.mycall(null, 'zenquan', 23)

// 改變this指向

// 1. 通過this獲取函式,

var context = object(context) || window;

context.fn = this;

var result = null;

// 執行函式

if(![...arg]) else

// 2. 刪除函式

delete context.fn;

return result;

}var bar = function(name, age)

.mybind()的實現

function.prototype.mybind = function (context) 

var self = this;

var args = array.prototype.slice.call(arguments, 1);

var fnop = function () {};

var fbound = function ()

fnop.prototype = this.prototype;

fbound.prototype = new fnop();

return fbound;

}

emmm,說好了聊聊故事,結果還是說了一大堆乾巴巴的知識,可能我是個不會講故事的標題黨吧。

聊聊call apply bind的故事

實際上它們真正的樣子是這樣的 它們幾個的作用都是改變this的指向。bind 與另外兩個的區別則是前者改變this,不立即呼叫函式 而後者改變this,立即呼叫函式。以下例子在非嚴格模式下,注釋的是各個情況this的指向 let test test.foo test.foo.call null,1,...

call, apply, bind方法詳解

function a x,y var c a.call c,5,6 5 6 arguments 5,6 再看例子 function person age,male var person1 person.call person1,20,female person1 var person var per...

手寫call,apply,bind函式

涉及面試題 考慮兩點 function.prototype.mycall function context context context window 和上面的 一樣 context.fn this const args arguments slice 1 const result context...