JS 中 call apply bind 那些事

2021-07-31 20:18:25 字數 1444 閱讀 5931

雖然網上有很多關於這方面的部落格和文章,但還是決定寫一篇自己對這方面知識的理解。

01-作用

首先問個問題,這三個函式的存在意義是什麼?答案是改變函式執行時的上下文,再具體一點就是改變函式執行時的this指向。有了這個認識,接下來我們來看一下,怎麼使用這三個函式。

舉個栗子

function person(name)

person.prototype = }

var person = new person('qianlong');

person.showname();

上面的**中person呼叫showname方法後會在瀏覽器的控制台輸出qianlong

接下來var animal =

// 1 call

person.showname.call(animal);

// 3 bind

person.showname.bind(animal)();

啦啦啦,有木有很神奇,控制台輸出了三次cat

我們拿別人的showname方法,並動態改變其上下文幫自己輸出了資訊,說到底就是實現了復用

02-區別

上面看起來三個函式的作用差不多,幹的事幾乎是一樣的,那為什麼要存在3個傢伙呢,留乙個不就可以。所以其實他們幹的事從本質上講都是一樣的動態的改變this上下文,但是多少還是有一些差別的..

fn.call(obj, arg1, arg2, arg3...);

03-應用

var arr = [34,5,3,6,54,6,-67,5,7,6,-8,687];

math.max.call(math, 34,5,3,6,54,6,-67,5,7,6,-8,687);

math.min.call(math, 34,5,3,6,54,6,-67,5,7,6,-8,687);

var arraylike =

上面就是乙個普通的物件字面量,怎麼把它變成乙個陣列呢?最簡單的方法就是

var arr = array.prototype.slice.call(arraylike);

上面arr便是乙個包含arraylike元素的真正的陣列啦( 注意資料結構必須是以數字為下標而且一定要有length屬性 )

在js中要往陣列中新增元素,可以直接用push方法,

var arr1 = [1,2,3];

var arr2 = [4,5,6];

// arr1 [1, 2, 3, 4, 5, 6]

// arr2 [4,5,6]

判斷變數型別

對於物件型的資料型別,我們可以借助call來得知他的具體型別,例如陣列

function isarray(obj)

isarray() // true

isarray('qianlong') // false

✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦

This學習實現call apply bind

不說太多,直入主題 由淺入比淺深一點 function test str let obj 才疏學淺,歡迎補充與建議 實現步驟 只在函式上實現該功能 確定所傳物件有效 將當前函式this繫結到該物件上 執行該物件繫結的此函式 function.prototype.mycall function con...

如何模擬實現乙個call apply bind函式

call模擬實現 首先我們實現繫結this功能。比如我們有乙個foo函式 function getname 還有乙個wechat物件 const wechat 我們希望實現 getname.call wechat fedaily以wechat和getname這個為例,這裡的this即getname,...

js之旅(七)js中this

本文講述js中this的指向 介紹es5和es6中this的不同 在js es5中,使用的是function函式,誰在呼叫function,this就指向誰,有以下幾個特點 1.1 this最終指向的是呼叫它的物件 這個特點的就是es5中this的指向,其它特點都是對它的補充,如下示例 functi...