資訊專(zhuān)欄INFORMATION COLUMN
摘要：使用模擬實(shí)現(xiàn)的方式探究和的原理作用方法就是在使用一個(gè)指定值和若干個(gè)指定的參數(shù)值的前提下調(diào)用某個(gè)函數(shù)或者方法。如果不對(duì)進(jìn)行綁定執(zhí)行會(huì)返回也就是說(shuō)改變了的指向到了。
使用模擬實(shí)現(xiàn)的方式探究call 和 apply 的原理 call
作用：
call() 方法就是在使用一個(gè)指定 this 值和若干個(gè)指定的參數(shù)值的前提下調(diào)用某個(gè)函數(shù)或者方法。
var foo = {
value : 1
}
function bar() {
console.log(this.value)
}
// 如果不對(duì)this進(jìn)行綁定執(zhí)行bar() 會(huì)返回undefined
bar.call(foo) // 1
也就是說(shuō)call()改變了 this 的指向到了 foo 。
下面進(jìn)行一下模擬實(shí)現(xiàn)試想當(dāng)調(diào)用 call 的時(shí)候，也就是類(lèi)似于
var foo = {
value: 1,
bar: function() {
console.log(this.value)
}
}
foo.bar() // 1
這樣就把 this 指向到了 foo 上，但是這樣給 foo 對(duì)象加了一個(gè)屬性，有些瑕疵，不過(guò)不要緊，執(zhí)行完刪除這個(gè)屬性就可以完美實(shí)現(xiàn)了。
也就是說(shuō)步驟可以是這樣：
將函數(shù)設(shè)為對(duì)象的屬性
執(zhí)行這個(gè)函數(shù)
刪除這個(gè)函數(shù)
下面就試著去實(shí)現(xiàn)一下：
Function.prototype.call2 = function(context) {
context.fn = this // this 也就是調(diào)用call的函數(shù)
var result = context.fn()
delete context.fn()
return result
}
var foo = {
value: 1
}
function bar() {
console.log(this.value)
}
bar.call2(foo) // 1
但是這樣有一個(gè)小缺陷就是call() 不僅能指定this到函數(shù)，還能傳入給定參數(shù)執(zhí)行函數(shù)比如：
var foo = {
value: 1
}
function bar(name, age) {
console.log(name)
console.log(age)
console.log(this.value)
}
bar.call(foo, "black", "18")
// black
// 18
// 1
特別要注意的一點(diǎn)是，傳入的參數(shù)的數(shù)量是不確定的，所以我們要使用arguments 對(duì)象，取出除去第一個(gè)之外的參數(shù)，放到一個(gè)數(shù)組里：
Function.prototype.call2 = function(context) {
context.fn = this // this 也就是調(diào)用call的函數(shù)
var args = [...arguments].slice(1)
var result = context.fn(...args)
delete context.fn()
return result
}
var foo = {
value: 1
}
function bar(name, age) {
console.log(name)
console.log(age)
console.log(this.value);
}
bar.call2(foo, "black", "18") // black 18 1
還有一點(diǎn)需要注意的是，如果不傳入?yún)?shù)，默認(rèn)指向?yàn)?window，所以最終版代碼：
Function.prototype.call2 = function(context) {
var context = context || window
context.fn = this // this 也就是調(diào)用call的函數(shù)
var args = [...arguments].slice(1)
var result = context.fn(...args)
delete context.fn()
return result
}
var value = 1
function bar() {
console.log(this.value)
}
bar.call2()
apply
apply的方法和 call 方法的實(shí)現(xiàn)類(lèi)似，只不過(guò)是如果有參數(shù)，以數(shù)組形式進(jìn)行傳遞，直接上代碼：
Function.prototype.apply2 = function(context) {
var context = context || window
context.fn = this // this 也就是調(diào)用apply的函數(shù)
var result
// 判斷是否有第二個(gè)參數(shù)
if(arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn()
return result
}
var foo = {
value: 1
}
function bar(name, age) {
console.log(name)
console.log(age)
console.log(this.value);
}
bar.apply2(foo, ["black", "18"]) // black 18 1
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97094.html
摘要：接下來(lái)，我們換一種思路，用一個(gè)相對(duì)較新的來(lái)實(shí)現(xiàn)方法。從這道題目看出，相比考察死記硬背，這樣的實(shí)現(xiàn)更有意義。對(duì)數(shù)組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們?cè)倏聪律鐓^(qū)上著名的和的實(shí)現(xiàn)。 有不少剛?cè)胄械耐瑢W(xué)跟我說(shuō)：JavaScript 很多 API 記不清楚怎么辦？數(shù)組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！ 甚至有的開(kāi)發(fā)...
摘要：接下來(lái)，我們換一種思路，用一個(gè)相對(duì)較新的來(lái)實(shí)現(xiàn)方法。從這道題目看出，相比考察死記硬背，這樣的實(shí)現(xiàn)更有意義。對(duì)數(shù)組的操作我們不能陌生，其中方法更要做到駕輕就熟。最后，我們?cè)倏聪律鐓^(qū)上著名的和的實(shí)現(xiàn)。 有不少剛?cè)胄械耐瑢W(xué)跟我說(shuō)：JavaScript 很多 API 記不清楚怎么辦？數(shù)組的這方法、那方法總是傻傻分不清楚，該如何是好？操作 DOM 的方式今天記，明天忘，真讓人奔潰！ 甚至有的開(kāi)發(fā)...
摘要：跨域請(qǐng)求詳解從繁至簡(jiǎn)前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。異步編程入門(mén)道典型的面試題前端掘金在界中，開(kāi)發(fā)人員的需求量一直居高不下。 jsonp 跨域請(qǐng)求詳解——從繁至簡(jiǎn) - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題...
閱讀 3246·2021-11-24 10:43
閱讀 4209·2021-11-24 10:33
閱讀 3789·2021-11-22 09:34
閱讀 2136·2021-10-11 10:58
閱讀 3757·2021-10-11 10:58
閱讀 870·2021-09-27 13:36
閱讀 3588·2019-08-30 15:54
閱讀 2975·2019-08-29 18:41
