很早之前的一篇博客写了bind的实现,是基于apply的,感兴趣的朋友看完这篇文章可以接着看看bind的实现。

apply 和 call 主要就是传参的区别。这里就不多说了,直接看代码。

    //call 实现
Function.prototype.myCall = function(context) { context.fn = this var args = [...arguments].slice(1) var result = context.fn(...args) delete context.fn return result
}

实例

   var obj = {
name: 'hx'
} function foo(sex, age) {
console.log(sex + ' ' + this.name + ' ' + age);
} foo.myCall(obj, 'boy', '25');// boy hx 25  

 实现原理:其实就是把fn放在obj下面执行(后面得把obj.fn从obj上删除了,保持obj的孑然之身嘛!),context.fn = this,obj这个对象就不止name属性了吧,多了fn属性,就是函数 foo。然后context.fn()执行的时候,由于fn是context也就   是obj调用的,那么在foo内部执行的时候, this.name就会找到obj的name,变相达成了实现this指向的更改或者说是其他对象的劫持。

如果上面关于context.fn还不明白的话,那看下面这个

   var a = {
b:'11',
c:function () {
console.log(this,this.b)
}
}
a.c() // 11  

 接着,apply跟call就是在参数arguments上的处理有一点区别而已

    Function.prototype.myApply = function(context) {

        var context = context || window

        context.fn = this

        var result;

        // 需要判断是否存储第二个参数,如果存在,就将第二个参数展开

        if(arguments[1]) {
result = context.fn(...arguments[1])
} else{
result = context.fn()
} delete context.fn return result
}

 传送门:bind的实现

      

JS apply 和 call 的实现的更多相关文章

  1. 由js apply与call方法想到的js数据类型(原始类型和引用类型)

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  2. [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html

    本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...

  3. Js apply 方法 详解

    Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  4. Js apply() call()使用详解

    Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里 ...

  5. Js apply 方法 具体解释

    Js apply方法具体解释 我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了 ...

  6. Js apply call方法详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  7. Js apply()使用详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  8. Js apply方法详解,及其apply()方法的妙用

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  9. Js apply方法与call方法详解 附ES6新写法

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  10. js apply/call/caller/callee/bind使用方法与区别分析

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, ...

随机推荐

  1. C++里将string类字符串(utf-8编码)分解成单个字(可中英混输)

    最近在建词典,使用Trie字典树,需要把字符串分解成单个字.由于传入的字符串中可能包含中文或者英文,它们的字节数并不相同.一开始天真地认为中文就是两个字节,于是很happy地直接判断当前位置的字符的A ...

  2. JavaScirpt(JS)——BOM浏览器对象模型

    一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...

  3. The twentyth day

    10th Dec 2018 Cause It's hard for me to lose in my life I've found  因为失去你是一种煎熬 Only time will tell a ...

  4. ie7下属性书写不规范造成的easyui 弹窗布局紊乱

    (一)在ie7下 弹窗只是普通页面 (二)控制台报错 (三)原因: (四)解决 去掉 data-options 属性里的  ,   就可以了

  5. 多线程(二)~Thread类相关的API介绍

      一.线程安全问题:     当我们使用多个线程操作统一方法内的局部变量的时候,每个局部变量在当前线程里都有自己的副本,这种情况是不会出现线程安全问题的.当我们两个线程同时操作全局变量的时候,有可能 ...

  6. Informatica学习笔记

    Informatica学习笔记1:UPDATE AS INSERT 问:要求实现每天抽取数据,而且是如果有改变才抽取更新,没有就不更新,因为源表中有最后修改时间的字段,我让它 和SESSION上次运行 ...

  7. jmeter中CSV Data Set Config各项说明

    Config the CSV Data Source: 1)Filename:csv文件的名称(包括绝对路径,当csv文件在bin目录下时,只需给出文件名即可) 2)File encoding:csv ...

  8. 怎样下载YouTube播放列表视频

    YouTube上面的视频种类丰富多彩,要是你想利用上面的资源来学习的话,足够你钻研很长时间了.如果你想在YouTube上面学习一门教程,比如Python,通常这些内容一个视频肯定装不下,会分为好多个视 ...

  9. LeetCode: Recover Binary Search Tree [099]

    [题目] Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without cha ...

  10. 《编程导论(Java)·9.3.1回调·3》回调的实现

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/yqj2065/article/details/31441221 接<9.3.1Java回调 · ...