JavaScript-手写abc函数

简介: JavaScript-手写abc函数

手写abc函数

apply

使用方式:Fn.apply(obj, argArray)

作用:修改函数 this 指向

函数执行时 this 指向:谁调用指向谁,直接调用指向全局对象(window / global

应用场景:当我们想把另一个对象的值应用在当前函数中,但又不想让函数成为另一个对象的属性

如下代码:

function Fn() {
    console.log(this.name);
    console.log(arguments);
}
var name = "Lily";
Fn(1, 2, 3); // output Lily
let obj = {
    name: "Jack"
};
Fn.apply(obj, [1, 2, 3]); // output Jack

手写实现:

Function.prototype.myApply = function(obj, argArray) {
    if (!obj || typeof obj === 'number') {
        return;
    }
    if (typeof obj === "string") {
        obj = new String(obj);
    }
    if (argArray){
        if(!Array.isArray(argArray)){
            throw Error(`The second arg need array, but ${typeof argArray} given`);
        }
    }
    const fn = Symbol('fn');
    obj[fn] = this;
    const res = obj[fn](...argArray);
    delete obj[fn];
    return res;
}
// 测试代码
function Fn() {
    console.log(this.name);
    console.log(arguments);
}
var name = "Lily";
Fn(1, 2, 3); // output Lily
let obj = {
    name: "Jack"
};
Fn.apply(obj, [1, 2, 3]); // output Jack
Fn.myApply(obj, [1, 2, 3]); // output Jack

bind

applycall 不同,它返回的是一个函数,与 call 类似,可以传入多个参数,并且支持返回的函数传参

这就需要考虑:this指向、两个函数的 arguments ,内部实现则可以直接调用已经实现的 apply 函数

使用方式:Fn.bind(obj, args1, args2, .....)(args3, args4, ......)

如下代码:

function Fn(a, b, c, d) {
    console.log(this.name);
    console.log(a, b, c, d);
}
var name = "Jack";
let obj = {
    name: "Lily"
};
Fn(1, 2, 3, 4); // output Jack 1, 2, 3, 4

Fn.bind(obj, 1, 2)(3, 4); // output Lily 1, 2, 3, 4

手写实现

Function.prototype.myBind = function(obj) {
    if(!obj || typeof obj === "number") {
        return;
    }
    if(typeof obj === "string") {
        obj = new String(obj);
    }
    // es5 写法
    let _this = this, inArgs = Array.prototype.slice.call(arguments, 1), outArgs = null;
    return function() {
        // this != _this 这个函数的this是全局对象,没有对象调用它
        outArgs = Array.prototype.slice.call(arguments);
        _this.apply(obj, inArgs.concat(outArgs));
    }
    // // es6 箭头函数写法
    // let inArgs = Array.prototype.slice.call(arguments, 1);
    // return (...args) => {
    //     this.apply(obj, [...inArgs, ...args]);
    // }
}


function Fn(a, b, c, d) {
    console.log(this.name);
    console.log(a, b, c, d);
}

var name = "Jack";

let obj = {
    name: "Lily"
};

Fn(1, 2, 3, 4); // output Jack 1, 2, 3, 4

Fn.bind(obj, 1, 2)(3, 4); // output Lily 1, 2, 3, 4

Fn.myBind(obj, 1, 2)(3, 4);

call

apply 相似,apply第二个参数为参数数组,call为多个参数

使用方式:Fn.call(obj, arg1, arg2, arg3, ......);

如下代码

var name = "Jack";
function Fn() {
    console.log(this.name);
}
Fn(); // output Jack
var obj = {
    name: "Lily"
};
Fn.call(obj); // output Lily

手动实现

// obj:需要修改的指向,args:将多个参数合并成
Function.prototype.myCall = function(obj, ...args) {
    if (!obj || typeof obj === 'number') {
        return;
    }
    if (typeof obj === "string") {
        obj = new String(obj);
    }
    // 防止覆盖原obj中的fn属性
    const fn = Symbol('fn');
    // 为传入的对象增加一个fn的属性,指向this(this指调用myCall函数的函数)
    obj[fn] = this;
    // args:展开传入的多个参数
    let res = obj[fn](...args); // 获取函数执行结果
    // 传入的obj是引用,不应该修改对象的属性
    delete obj[fn];
    return res;
}

// 测试代码
let obj = {
    name: 'lily'
};
var name = 'jack';

function Fn() {
    console.log(this.name);
    if(arguments.length > 0){
        console.log('arguments', arguments);
    }
}

Fn();
Fn.call(obj, 1, 2, 3, 4)
Fn.myCall(obj, 1, 2, 3, 4);
目录
相关文章
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
153 19
|
6月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
8月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
166 32
|
7月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
11月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
12月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
12月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
12月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
250 4
|
12月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
102 5