原生JS模拟实现call、apply、bind

function call_mock (obj) {
    var aim_fun = this;
    var argument = [];
    for (var i = 1; i < arguments.length; i++) {
        argument.push(arguments[i]);
    }
    obj.aim_fun = aim_fun;
    var result = eval(‘obj.aim_fun(‘+ argument.join() + ‘)‘);
    delete obj.aim_fun;
    return result;
}

Function.prototype.call_mock = call_mock;

function apply_mock (obj, args) {
    var aim_fun = this;
    obj.aim_fun = aim_fun;
    var result = eval(‘obj.aim_fun(‘+ args.join() + ‘)‘);
    delete obj.aim_fun;
    return result;
}

Function.prototype.apply_mock = apply_mock;

function bind_mock (obj) {
    var aim_fun = this;
    var argument = [];
    for (var i = 1; i < arguments.length; i++) {
        argument.push(arguments[i]);
    }
    var fNOP = function () {};
    var fBound = function () {
        return aim_fun.apply_mock(obj, argument)
    }
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

Function.prototype.bind_mock = bind_mock;

var a = {
    c:1,
    see(a, b) {
        console.log(`${this.c}${a}${b}`);
    }
}

c = 0;

a.see.bind_mock(global, 1, 2);

原文地址:https://www.cnblogs.com/xcxjy/p/10441142.html

时间: 2024-12-12 18:08:55

原生JS模拟实现call、apply、bind的相关文章

原生JS模拟百度搜索框

近期有个新入行的小伙伴一直在问一些基础知识,突然觉得人的记忆力有限,有些平常很少用到的知识点虽简单却也其实很容易模糊,或者是一个单词,或者是一个语法.所以想着应该利用一下工作之余的碎片时间,记录一些工作上的问题和一些有趣的小案例,于是开通了播客,一方面便于自己日后翻阅,一方面给刚学习的小伙伴一个参考. 今天先写一个简单的小案例:原生JS模拟百度搜索框. 需求: 1.当在输入框输入时,每输入一个文字,就会在下方展示相关内容列表 2.每一次输入框输入,清空上一次内容 3.鼠标移入列表内容时,对应的内

原生JS模拟JQuery封装Ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

js中的call apply bind简单总结

首先来看一个问题: 那如果此时就想要获取button按钮这个对象怎么解决? 结果: 还可以这样解决? 所以简单来说: call apply bind 的作用就是 改变函数内部this的指向.但是各自有点小区别. 再看: 如果不需要改变this的指向,就传入一个null就行. 应用: 原文地址:http://blog.51cto.com/11871779/2133119

JS中的call(),apply(),bind()方法

call,apply和bind到底有何用? 改变函数的this对象的指向 相似之处 1.都是用来改变函数的this对象指向 2.第一个参数都是this要指向的对象 3.都可以利用后续参数传参 先看下面例子: 例1: var name = "小王", age = 17; var obj = { name:"小张", objAge:this.age, myFun:function(){ console.log(this.name + "年龄" + t

原生JS:Function对象(apply、call、bind)详解

Function对象(apply.call.bind) 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) Function 构造器会创建一个新的 Function 对象. 在 JavaScript 中每个函数都是一个Function对象. 构造器 new Function ([arg1[, arg2[, ...argN]],] functionBody) arg1, arg2, .

js中的call,apply,bind区别

在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:apply . call .bind 三者都是用来改变函数的this对象的指向的:apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值--本次调用的上下文(context)--这就是this关键字的值.):apply . ca

JS中的call/apply/bind

<script> var obj = { a:1 } var a = 2; function test(a) { alert(a); alert(this.a); } </script> 1.test(3); 结果:"3"."2"; 解释:实参3传递给形参a,函数内部的形参a覆盖全局变量a,所以第一个为3,函数中this为window对象,所以this.a为2 2.test.call(thisObject,param1,param2...);

简单的原生js 模拟jquery方法

仓促的模拟敲一下就上传来保存了. Object.prototype.fadeIn = function(speed) { var that = this; setTimeout(function() { that.style.display = "block" }, speed) return that; } //原生模拟jq中 fadeOut()方法: Object.prototype.fadeOut = function(speed) { var that = this; setT

js 难点之call,apply,bind实现

call 一句话介绍 call: call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法. 举个例子: var foo = { value: 1 }; function bar() { console.log(this.value); } bar.call(foo); // 1 注意两点: call 改变了 this 的指向,指向到 foo bar 函数执行了 模拟实现第一步 那么我们该怎么模拟实现这两个效果呢? 试想当调用 call 的时候,把 foo