当前位置:网站首页>Explain in detail the implementation of call, apply and bind in JS (source code implementation)
Explain in detail the implementation of call, apply and bind in JS (source code implementation)
2022-07-07 00:35:00 【Cut potatoes into shreds】
stay JavaScript in ,call、apply and bind yes Function Object comes with three methods , The main purpose of these three methods is to change the this Point to .
call、apply、bind Common ground of methods :
1. It's all about changing functions this Object's pointing to ;
2. The first parameter is this Object to point to ;
3. You can use subsequent parameters to transfer parameters ;
difference :
bind Yes returns the corresponding function , Easy to call later ;apply 、call Call immediately .
call() Methods and apply() The method works the same , The only difference is the way parameters are accepted .
One 、call Source code implementation
//call The source code to achieve
function demo(){
console.log(this);
console.log(arguments);
}
var obj = {
neme:"lcy",
age:2
}
Function.prototype.myCall = function(){
// Find the first parameter , Determine whether the first parameter is empty , If it is empty this Or point to window
var target = arguments[0] || window// Short-circuit operation
// Get the parameters passed
var _arg = Array.from(arguments).slice(1)
target.fn = this;
target.fn(..._arg);
// Delete fn attribute
delete target.fn;
}
demo.myCall(obj,1,2,3)
// demo.call(obj,1,2,3);
Two 、apply Source code implementation
//apply The source code to achieve
function demo(){
console.log(this);
console.log(arguments);
}
var obj = {
neme:"lcy",
age:2
}
Function.prototype.myApply = function(){
// Find the first parameter , Determine whether the first parameter is empty , If it is empty this Or point to window
var target = arguments[0] || window// Short-circuit operation
// Get the parameters passed
var _arg = arguments[1]
target.fn = this;
target.fn(..._arg);
// Delete fn attribute
delete target.fn;
}
demo.myApply(obj,[1,3,3])
// demo.apply(obj,[1,2,3]);
3、 ... and 、bind Source code implementation
// bind The source code to achieve
function demo(){
console.log(this);
console.log(arguments);
}
var obj = {
neme:"lcy",
age:2
}
Function.prototype.myBind = function(){
// Record function's this Point to
var target = arguments[0] || window;
// Get the parameters passed
var _args = Array.from(arguments).slice(1);
// Record calls bind Function of
var that = this;
// Returns a new function
return function(){
if(!new.target){
var arg = Array.from(arguments);
// Splicing parameter
arg = _args.concat(arg);
target.fn = that;
target.fn(...arg);
delete target.fn;
}else{
return new that();
}
}
}
var fn = demo.myBind(obj,1,2);
fn(3,4);
// var fn1 = demo.bind(obj,1,2);
// fn1(3,4)
This is recorded for future use , I also hope the big guys can communicate more , Leave more messages , Point out my shortcomings !
You can study it if you need it !!
边栏推荐
- Why should a complete knapsack be traversed in sequence? Briefly explain
- Leecode brush questions record interview questions 32 - I. print binary tree from top to bottom
- Testers, how to prepare test data
- GPIO简介
- Geo data mining (III) enrichment analysis of go and KEGG using David database
- Model-Free Prediction
- Amazon MemoryDB for Redis 和 Amazon ElastiCache for Redis 的内存优化
- MySQL learning notes (mind map)
- X.509 certificate based on go language
- Use mujoco to simulate Cassie robot
猜你喜欢
2021 SASE integration strategic roadmap (I)
Introduction au GPIO
MySQL learning notes (mind map)
Mujoco Jacobi - inverse motion - sensor
Uniapp uploads and displays avatars locally, and converts avatars into Base64 format and stores them in MySQL database
What is a responsive object? How to create a responsive object?
2022 PMP project management examination agile knowledge points (9)
@TableId can‘t more than one in Class: “com.example.CloseContactSearcher.entity.Activity“.
GEO数据挖掘(三)使用DAVID数据库进行GO、KEGG富集分析
【vulnhub】presidential1
随机推荐
How can computers ensure data security in the quantum era? The United States announced four alternative encryption algorithms
【vulnhub】presidential1
Jenkins' user credentials plug-in installation
TypeScript增量编译
Use package FY in Oracle_ Recover_ Data. PCK to recover the table of truncate misoperation
Compilation of kickstart file
GPIO簡介
37頁數字鄉村振興智慧農業整體規劃建設方案
Devops can help reduce technology debt in ten ways
【vulnhub】presidential1
kubernetes部署ldap
How to use vector_ How to use vector pointer
How to judge whether an element in an array contains all attribute values of an object
Policy Gradient Methods
[CVPR 2022] semi supervised object detection: dense learning based semi supervised object detection
Leecode brush question record sword finger offer 58 - ii Rotate string left
Leecode brushes questions and records interview questions 01.02 Determine whether it is character rearrangement for each other
Mujoco second order simple pendulum modeling and control
2021 SASE integration strategic roadmap (I)
Wechat applet UploadFile server, wechat applet wx Uploadfile[easy to understand]