当前位置:网站首页>Call, apply, bind rewrite, easy to understand with comments
Call, apply, bind rewrite, easy to understand with comments
2022-07-06 06:46:00 【Carpool steed】
Don't talk too much nonsense, just go to the code , Please point out any errors and problems
call Realization
;(() => {
Function.prototype.myCall = function (ctx) {
ctx = ctx ? Object(ctx) : window
// take Add an object above the parameter object , So make sure that ctx It's the object
ctx.pointer = this
// Declare an empty array
const param = []
for (let i = 1; i < arguments.length; i++) {
param.push(`arguments[${
i}]`)
}
// Receive the return value of the next norm
const ret = eval(`ctx.pointer(${
param.toString()})`)
// Delete the newly added attribute above
delete ctx.pointer
// Go back out again
return ret
}
// test
function test() {
console.log(this, arguments)
return 'value'
}
test.myCall({
a: 1, b: 2 }, ' Parameters 1', ' Parameters 2')
})()
apply Realization
;(() => {
Function.prototype.myApply = function (ctx, args) {
ctx = ctx ? Object(ctx) : window
let ret
// take Add an object above the parameter object , So make sure that ctx It's the object
ctx.pointer = this
// Judge args type
const type = Object.prototype.toString.call(args).slice(8, -1)
if (type === 'Array') {
// Receive the return value of the next norm , utilize ... Expand expression expand parameter
ret = eval('ctx.pointer(...args)')
// Delete the newly added attribute above
delete ctx.pointer
} else if (
type === 'Null' ||
type === 'Undefined' ||
type === 'Function'
) {
ret = eval('ctx.pointer()')
// Delete the newly added attribute above
delete ctx.pointer
} else {
throw new TypeError('CreateListFromArrayLike called on non-object')
}
// Go back out again
return ret
}
// test
function test() {
console.log(this, arguments)
return 'value'
}
test.myApply({
a: 1, b: 2 }, function () {
})
})()
bind Realization : This is a bit hard to understand , Just look at the note number
// characteristic :
// 1 . Returns a new function
// 2. bind -> The first parameter -> change this Point to
// 3. Receive parameter separation
// 4.bind and call Function parameters are passed in the same way
// 5. Instantiate the new function returned -> this. The point is test Constructed instance
// 6. Instances should inherit test Prototype on constructor
Function.prototype.myBind = function (ctx) {
// 1. preservation this
const pointer = this
// 2. Parameters passed for the first time
const params = [].slice.call(arguments, 1)
// Create a new intermediate function for Assignment prototype
const _typeFn = function () {
}
// Return new function
const newFn = function (param) {
// 3.param Parameters passed for the second time utilize concat Splicing
const args = params.concat(param)
// 4. Call function If test If there is a return value, you need to return 5. Judge this
return pointer.apply(this instanceof newFn ? this : ctx, args)
}
// 6. Copy prototype
_typeFn.prototype = pointer.prototype
newFn.prototype = new _typeFn()
return newFn
}
// test
function test(user, car) {
console.log(this)
console.log(user + ' Just bought one ' + car + ' vehicle ')
}
test.prototype.fun = ' Method '
const t = test.myBind({
a: 1, b: 2 }, ' Zhang San ')
const t1 = new t(' Mercedes ')
console.log(t1)
Try to integrate ideas into development , cheer up !!!
边栏推荐
- 生物医学本地化翻译服务
- 雲上有AI,讓地球科學研究更省力
- LeetCode每日一题(1870. Minimum Speed to Arrive on Time)
- 国产游戏国际化离不开专业的翻译公司
- 利用快捷方式-LNK-上线CS
- Apache dolphin scheduler source code analysis (super detailed)
- Summary of leetcode's dynamic programming 4
- 机器学习植物叶片识别
- [English] Grammar remodeling: the core framework of English Learning -- English rabbit learning notes (1)
- Market segmentation of supermarket customers based on purchase behavior data (RFM model)
猜你喜欢

基于购买行为数据对超市顾客进行市场细分(RFM模型)

AttributeError: Can‘t get attribute ‘SPPF‘ on <module ‘models.common‘ from ‘/home/yolov5/models/comm

金融德语翻译,北京专业的翻译公司

My daily learning records / learning methods

In English translation of papers, how to do a good translation?

Facebook AI & Oxford proposed a video transformer with "track attention" to perform SOTA in video action recognition tasks

Transfert des paramètres de la barre d'adresse de la page de liste basée sur jeecg - boot

Leetcode - 152 product maximum subarray

雲上有AI,讓地球科學研究更省力

Pallet management in SAP SD delivery process
随机推荐
Brief introduction to the curriculum differences of colleges and universities at different levels of machine human major -ros1/ros2-
Leetcode daily question (1997. first day where you have been in all the rooms)
利用快捷方式-LNK-上线CS
How do programmers remember code and programming language?
SSO流程分析
How to convert flv file to MP4 file? A simple solution
[unity] how to export FBX in untiy
Day 246/300 ssh连接提示“REMOTE HOST IDENTIFICATION HAS CHANGED! ”
How to translate professional papers and write English abstracts better
自动化测试环境配置
Luogu p2089 roast chicken
Apache dolphin scheduler source code analysis (super detailed)
Summary of leetcode's dynamic programming 4
Fledgling Xiao Li's 103rd blog CC2530 resource introduction
Cobalt Strike特征修改
MySQL5.72. MSI installation failed
Modify the list page on the basis of jeecg boot code generation (combined with customized components)
AttributeError: Can‘t get attribute ‘SPPF‘ on <module ‘models.common‘ from ‘/home/yolov5/models/comm
My daily learning records / learning methods
Day 245/300 JS forEach 多层嵌套后数据无法更新到对象中