#yyds干货盘点# 【js学习笔记二十一】手动封装call

简介: #yyds干货盘点# 【js学习笔记二十一】手动封装call

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


歌谣 歌谣 前端eval的使用


图片.png

代码封装部分

Function.prototype.mycall = function(obj){
      //判断是否为null或者undefined,如果是则默认window;如果
传递的参数不是对象用Object转为对象
        obj = obj ? Object(obj) : window;
      var args = [];
      //注意此处for循环的i是从1开始,因为第1个参数是obj
      for(var i=1,len = arguments.length;i<len;i++){
        args.push("arguments"+"["+i+"]");
      }
       console.log(args,"args");//[ "arguments[1]", 
"arguments[2]", "arguments[3]" ]
      //最重要的一步!说明了两个问题:1.mycall内部的this
是指向调用者fn函数(对象的);2.Obj.func就是fn函数,
     // obj对象调用了fn函数,因此fn函数内部的this指向obj
      console.log(this,"this") //function fn(a, b, c)
      obj.fn = this;
      // console.log(obj.fn(args),"obj.fn")
      // console.log(eval("obj.fn("+args+")"),"eval")
      var result = eval("obj.fn("+args+")");
      delete obj.fn;
      console.log(result,"result"); // 我的老婆是geyao
      return result;
    }


验证

var name = 'fangfang';
        var obj = {
            name: 'geyao'
        };
        function fn(a, b, c) {
            console.log(a + b + c + this.name);
        return a + b + c + this.name
        };
    fn.mycall(obj,"我的", "老婆", "是"); // 我的老婆是geyao


总结


这是es5用的方式 下一节我们来看看es6的封装简化



相关文章
|
3月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
277 1
crypto-js中AES的加解密封装
|
4月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
38 0
|
2月前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
11 1
|
2月前
|
JavaScript 前端开发
js 中call()和apply()
js 中call()和apply()
29 1
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
3月前
|
自然语言处理 JavaScript 前端开发
JS中this的应用场景,再了解下apply、call和bind!
该文章深入探讨了JavaScript中`this`关键字的多种应用场景,并详细解释了`apply`、`call`和`bind`这三个函数方法的使用技巧和差异。
|
3月前
|
JavaScript 前端开发
this指向的几种情况以及js简单实现call、apply、bind___六卿
本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。
17 0
this指向的几种情况以及js简单实现call、apply、bind___六卿
|
3月前
|
JavaScript
js的this与call,apply,bind
js的this与call,apply,bind
|
3月前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
|
2月前
|
JavaScript 前端开发
【干货分享】JavaScript学习笔记分享
【干货分享】JavaScript学习笔记分享
57 0