Comments (13)
Function.prototype._call = function (obj, ...args) {
!obj && (obj = globalThis);
// this代表要执行的函数
obj._fn = this;
const res = obj._fn(...args);
delete obj._fn;
return res;
};
Function.prototype._apply = function (obj, args) {
// 第二个参数必须为数组或类数组对象, 否则初始化为空对象
const arr = [];
for (let i = 0; i < args?.length; ++i) {
arr.push(args[i]);
}
return this._call(obj, ...arr);
};
Function.prototype._bind = function (obj, ...args1) {
!obj && (obj = globalThis);
return (...args2) => {
obj._fn = this;
const res = obj._fn(...[...args1, ...args2]);
delete obj._fn;
return res;
};
};
from js-challenges.
Function.prototype.myCall = function(context, ...args) {
context = context || window;
const fn = Symbol();
context[fn] = this;
const result = context[fn](...args);
delete context[fn];
return result;
}
Function.prototype.myApply = function(context, args) {
context = context || window;
const fn = Symbol();
context[fn] = this;
const result = context[fn](...args);
delete context[fn];
return result;
}
Function.prototype.myBind = function(context, ...args) {
const self = this;
return function(...args2) {
return self.apply(context, args.concat(args2));
}
}
from js-challenges.
Function.prototype._myCall = function(thisArg, ...args) {
thisArg =
thisArg !== null && thisArg !== undefined ? Object(thisArg) : window;
let fn = Symbol();
thisArg[fn] = this;
const res = thisArg[fn](...args);
delete thisArg[fn];
return res;
};
Function.prototype._myapply = function(thisArg, args = []) {
thisArg =
thisArg !== null && thisArg !== undefined ? Object(thisArg) : window;
let fn = Symbol();
thisArg[fn] = this;
const res = thisArg[fn](...args);
delete thisArg[fn];
return res;
};
Function.prototype._mybind = function(thisArg, ...args) {
let fn = this;
return (...args) => {
return fn._myCall(thisArg, ...args);
};
};
//最好使用symbol进行处理一下,以及对于apply传递的数组考虑一下为空的情况
from js-challenges.
// 该代码为上面同学提交的,虽然考虑到了边界条件,更加严谨,但是是有问题的,会使始终指向全局对象window
// 问题就出在这个箭头函数,因为箭头函数的特性,会无法获得到正确的this,即调用call的函数
// !!!处理方式:更改为function(){}即可
Function.prototype._myCall = (thisArg, ...args) => {
thisArg =
thisArg !== null && thisArg !== undefined ? Object(thisArg) : window;
let fn = Symbol();
thisArg[fn] = this;
const res = thisArg[fn](...args);
delete thisArg[fn];
return res;
};
// 同理
Function.prototype._myapply = (thisArg, args = []) => {
thisArg =
thisArg !== null && thisArg !== undefined ? Object(thisArg) : window;
let fn = Symbol();
thisArg[fn] = this;
const res = thisArg[fn](...args);
delete thisArg[fn];
return res;
};
// 同理
Function.prototype._mybind = (thisArg, ...args) => {
let fn = this;
return (...args) => {
return fn._myCall(thisArg, ...args);
};
};
//最好使用symbol进行处理一下,以及对于apply传递的数组考虑一下为空的情况
from js-challenges.
// 该代码为上面同学提交的,虽然考虑到了边界条件,更加严谨,但是是有问题的,会使始终指向全局对象window // 问题就出在这个箭头函数,因为箭头函数的特性,会无法获得到正确的this,即调用call的函数 // !!!处理方式:更改为function(){}即可 Function.prototype._myCall = (thisArg, ...args) => { thisArg = thisArg !== null && thisArg !== undefined ? Object(thisArg) : window; let fn = Symbol(); thisArg[fn] = this; const res = thisArg[fn](...args); delete thisArg[fn]; return res; }; // 同理 Function.prototype._myapply = (thisArg, args = []) => { thisArg = thisArg !== null && thisArg !== undefined ? Object(thisArg) : window; let fn = Symbol(); thisArg[fn] = this; const res = thisArg[fn](...args); delete thisArg[fn]; return res; }; // 同理 Function.prototype._mybind = (thisArg, ...args) => { let fn = this; return (...args) => { return fn._myCall(thisArg, ...args); }; }; //最好使用symbol进行处理一下,以及对于apply传递的数组考虑一下为空的情况
收到,已改正,感谢
from js-challenges.
用Object.create继承context也许可以避免污染原来的context
from js-challenges.
Function.prototype.myapply = function (context, args) {
context = context || window;
args = args || [];
const key = Symbol();
context[key] = this;
const res = context[key](...args); //扩展运算符对参数进行深拷贝的浅层拷贝
delete context[key];
return res;
};
Function.prototype.mycall = function (context, ...args) {
context = context || window;
args = args || [];
const key = Symbol();
context[key] = this;
const res = context[key](...args);
delete context[key];
return res;
};
Function.prototype.mybind = function (context, ...args) {
let self = this;
args = args || [];
return function (...newargs) {
const key = Symbol();
context[key] = self;
const res = context[key](...args, ...newargs);
delete context[key];
return res;
};
};
from js-challenges.
Function.prototype.myCall = function (context, ...args) {
context = context || window
args = args || []
const key = new Symbol()
context[key] = this
const res = context[key](...args)
delete context[key]
return res
}
Function.prototype.myApply = function (context, args) {
context = context || window
args = args || []
const key = new Symbol()
context[key] = this
const res = context[key](...args)
delete context[key]
return res
}
Function.prototype.myBind = function (context, ...args) {
let self = this
args = args || []
return function (...newargs) {
const key = Symbol()
context[key] = self
const res = context[key](...args, ...newargs)
delete context[key]
return res
}
}
from js-challenges.
Function.prototype.call = function (context, ...args) {
context.fn = this;
return context.fn(...args);
};
Function.prototype.apply = function (context, args) {
context.fn = this;
return context.fn(...args);
};
Function.prototype.bind = function (context, ...args) {
context.fn = this;
return function (...args1) {
return context.fn(...args, ...args1);
};
};
from js-challenges.
前面有一个bind写错了
Function.prototype._mybind = (thisArg, ...args) => {
let fn = this;
return (...args) => {
return fn._myCall(thisArg, ...args);
};
};
======================================>
Function.prototype._mybind = function (thisArg, ...arg1) {
let fn = this
return function (...arg2) {
return fn._myCall(thisArg, ...arg1, ...arg2)
}
}
from js-challenges.
💯 仍然是不太严谨,原始类型值作为 context时,需要转为对象
Function.prototype.myCall = function(context, ...args) {
context = (context === undefined || context === null) ? window : context
if (Object(context) !== context) {
context = Object(context)
}
context.fn = this
const result = context.fn(...args)
delete context.fn
return result
}
function add(params) {
return this.a + params
}
console.log(add.myCall(0, 2))
console.log(add.call(0, 2, 3, 4))
from js-challenges.
apply的话,第二个参数要求类数组,为 null 的话要不报错,边界条件比较多 😢
Function.prototype.myApply = function(context, args = []) {
context = (context === undefined || context === null) ? globalThis : context
if (Object(context) !== context) {
context = Object(context)
}
args = args === null ? [] : args
if (!Array.isArray(args)) {
args = Array.from(args)
}
context.fn = this
const result = context.fn(...args)
delete context.fn
return result
}
// test case
const array = ["a", "b"];
const elements = [0, 1, 2];
array.push.myApply(array, 0);
console.log('myApply', array);
console.log('myApply', Math.max.myApply(null, null))
console.log('apply', Math.max.apply(null, null))
from js-challenges.
这个更复杂点,只因规范要求 如果使用 new 运算符构造绑定函数,则忽略该值(指context参数)。
参考 core-js 的实现,并用 es6 语法简化
Function.prototype.myBind = function (that, ...partArgs) {
var F = this
var Prototype = F.prototype
var boundFunction = function bound(...newArgs) {
var args = [...partArgs, ...newArgs]
/**
* 若被 new 调用时,this 为即将生成的实例 bound,走 new F(...)
*/
return this instanceof boundFunction ? new F(...args) : F.myApply(that, args)
}
if (Prototype && typeof Prototype === 'object') boundFunction.prototype = Prototype
return boundFunction
}
from js-challenges.
Related Issues (20)
- 正则表达式匹配URL HOT 1
- repeat
- add
- CamelCase
- 洗牌算法 HOT 1
- 工厂模式
- 代理模式 HOT 1
- 装饰器模式 HOT 1
- 手写new关键字 HOT 1
- 实现有序数组生成平衡二叉搜索树,ACM模式(2023美团暑期实习一面手撕)
- 版本号排序(2023美团暑期实习一面) HOT 2
- 将html字符串转为树状结构
- 对象去重 HOT 2
- 【开源自荐】推荐一个每日更新的前端面试题库
- bind
- 我的解决方案
- 【开源自荐】SolidUI 一句话生成任何图形
- 百度2023秋招:把数组排成最小的数 HOT 5
- 实现简易版的useState HOT 1
- 手写Instanceof详细 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from js-challenges.