当前位置:网站首页>Manually implement call, apply and bind functions
Manually implement call, apply and bind functions
2022-04-23 17:14:00 【MiMenge】
Realization call
Function.prototype.myCall = function (targetObj, ...resule) {
// Judge whether the incoming object exists
targetObj = targetObj || window;
// Hang on to the incoming object this Point to , here this To call myCall function
targetObj.fn = this;
// Call... Internally using an incoming object fn Method , This enables changes this Point to , Point to the target object that is passed in
let value = eval('targetObj.fn(...resule)');
// Delete target object fn Method
delete targetObj.fn
// Returns the result of the call
return value;
}
let obj = {
uname: 'Tom'
}
function demo(a, b){
console.log(this.uname, a, b);
}
demo();// undefined undefined undefined
demo.myCall(obj, 1, 2);
// Tom 1 2
Realization apply ( Subject and call almost , Different ways of passing in parameters )
Function.prototype.myApply = function (targetObj, resule) {
targetObj = targetObj || window;
targetObj.fn = this;
let value = eval('targetObj.fn(...resule)');
delete targetObj.fn
return value;
}
let obj = {
uname: 'Tom'
}
function demo(x, y){
console.log(this.uname, x, y);
}
demo();// undefined undefined undefined
demo.myApply(obj, [1, 2]);
// Tom 1 2
Realization bind
Function.prototype.myBind = function (targetObj, ...resule) {
// Determine whether the called object is a function
if (typeof this !== "function") {
throw new Error("this must be a function");
}
// Create variables to save this Point to
// here this Point to the function called externally
let self = this;
// The function to be created returns
let backFunc = function () {
// First determine the of the calling object this Whether it is the same as this function this
// Yes, change this Point to yourself ,( In fact, the last thing to return is this A function that points to itself )
// If not, change the caller this Point to the incoming object , Pass the parameter to the calling this in .
self.apply(this instanceof self ?
this : targetObj, resule.concat(Array.prototype.slice.call(arguments)));
}
// Judge whether the call has a prototype
if(this.prototype) {
// If so, assign the prototype to the returned function
backFunc.prototype = Object.create(this.prototype);
}
// Return function
return backFunc;
}
let obj = {
uname: 'Tom'
}
function demo(x, y){
console.log(this.uname, x, y);
}
demo();// undefined undefined undefined
demo.myBind(obj, 1, 2)();
// Tom 1 2
版权声明
本文为[MiMenge]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230553027792.html
边栏推荐
- Using quartz under. Net core - [1] quick start
- 1-2 characteristics of nodejs
- Using quartz under. Net core -- operation transfer parameters of [3] operation and trigger
- ASP. Net core configuration options (Part 1)
- Use of shell cut command
- MySQL master-slave configuration under CentOS
- Decimal format decimal / datetime conversion processing
- Using quartz under. Net core - calendar of [6] jobs and triggers
- Basic case of Baidu map
- Baidu Map 3D rotation and tilt angle adjustment
猜你喜欢
Go language, array, string, slice
01-初识sketch-sketch优势
Sub database and sub table & shardingsphere
Detailed explanation of the penetration of network security in the shooting range
Lock lock
ASP. Net core JWT certification
Perception of linear algebra 2
Path environment variable
Change the password after installing MySQL in Linux
Shell脚本——Shell编程规范及变量
随机推荐
The new MySQL table has a self increasing ID of 20 bits. The reason is
Node access to Alipay open platform sandbox to achieve payment function
Collect blog posts
groutine
Variable length parameter__ VA_ ARGS__ Macro definitions for and logging
Use of shell sed command
Shell-sort命令的使用
How does matlab draw the curve of known formula and how does excel draw the function curve image?
New keyword learning and summary
EF core in ASP Generate core priority database based on net entity model
Read a blog, re understand closures and tidy up
Interface document yaml
【WPF绑定3】 ListView基础绑定和数据模板绑定
Self use learning notes - connectingstring configuration
1-2 characteristics of nodejs
El date picker limits the selection range from the current time to two months ago
文件操作《二》(5000字总结篇)
Aiot industrial technology panoramic structure - Digital Architecture Design (8)
Use between nodejs modules
Using quartz under. Net core - [1] quick start