很早之前的一篇博客写了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. vsCode代码缩略图

    vsCode配置代码缩略图: 文件--首选项--设置 搜索 minimap    true 打开 false 关闭

  2. Csharp:asp.net CheckBoxList databind

    /// <summary> /// CheckBoxList數據源 /// 塗聚文 /// 20130705 /// /// </summary> private void s ...

  3. 前端自动化构建工具Grunt

    一.了解Gurnt(http://www.open-open.com/lib/view/open1433898272036.html) Grunt 是一个基于任务的JavaScript工程命令行构建工 ...

  4. Siebel 开发规范

    Siebel Configuration and Development Guideline 1 2 2.1 2.2 2.3 11. 2.4 2.5 3 3.1 3.2 3.2.1 3.2.2 3.3 ...

  5. 网络威胁防护,Azure 靠的是它?

    在当今数字化转型的浪潮中,越来越多的企业希望转型于云.使用云能帮助企业提高工作效率.降低 IT 成本.增强竞争优势,有效推动企业的业务发展.但是,在向云迁移的过程中,基于云的数据中心更有可能被攻击,所 ...

  6. Sql根据经纬度算出距离

    SELECT  ISNULL((2 * 6378.137 * ASIN(SQRT(POWER(SIN((117.223372- ISNULL(Latitude,0) )*PI()/360),2)+CO ...

  7. Linux下创建vue项目

    前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...

  8. Fiori里花瓣的动画效果实现原理

    Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成.另一种是下图的3/4个圆环不断旋转的效果. 关于前者的效果,可以看我制作的这个视频.这个视频是手动 ...

  9. Xpath定位_1:子找父以及contains的用法

    先上xml代码,如下图,在写自动化脚本时,需要定位到数字为10334的td元素.td元素的父元素.父的父元素以及属性值都一样:只有同胞元素的元素值不同.以此可以通过先定位到同胞元素,在找到父元素下的期 ...

  10. sql语句更新某字段内容中部分数据

    使用到的sql 语句的关键字就是replace, 如下图,把带有zhangjun 的值替换成 user 使用的sql语句就是 update 表名 set 字段名=replace(字段名,‘替换字符内容 ...