扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript深入理解系列之call与apply
  • 874

0
分享到

JavaScript深入理解系列之call与apply

2024-04-02 19:04:59 874人浏览 泡泡鱼
摘要

目录定义模拟步骤1模拟步骤2模拟步骤3第一个参数传null或undefined，this指向为window函数执行call方法，有返回值，那就返回。最终版实现call代码实现appl

定义

call和apply：函数调动call()方法在执行的时候，函数的里面的this会指向第一个参数值，除第一个参数值后面的若干支都是传进该函数，简而言之就是改变函数运行时的this指向。

使用示例： fn.call(obj, args1, args2...), fn.apply(obj, [arg1, arg2 ...]), call与apply调用除了第二个传参方式不一样，其余一样。

举个例子1：

var  obj = {
    name: '程序员米粉'
};
function fn() {
    console.log(this.name)
}
fn() // this.name => undefined
fn.call(obj) // this.name => '程序员米粉'

总结：

1、fn函数调动call方法执行时候，函数的this指向了obj
2、call方法和fn函数都执行了。

如果还看不明白，fn.call(obj)执行的时候，可以看作在obj对象里面有个fn函数执行。那么fn函数里面的this指向就是obj

再举个例子2：

var  obj = {
    name: '程序员米粉',
    fn: function() {
        console.log(this.name)
    }
};
obj.fn(); // this.name => '程序员米粉'

总结：

1、例子1中的 fn.call(obj)执行的时候，相当于例子2 obj.fn(); call方法被调用的时候，会改变当前调用函数的执行上下文（就是改变this指向）。

模拟步骤1

例子1：

var  obj = {
    name: '程序员米粉'
};
function fn() {
    console.log(this.name)
}
fn.call(obj) // this.name => '程序员米粉'

例子2：

var  obj = {
    name: '程序员米粉',
    fn: function() {
        console.log(this.name)
    }
};
obj.fn(); // this.name => '程序员米粉'

要实现自己的myCall方法，首先观察例子1和例子2中测 obj对象，有什么不一样。

不一样：

1、例子2中obj添加了fn函数方法。
2、例子2执行方法是obj.fn()执行，而例子1中执行方法是 fn.call(obj)。

这就好办了，我们如何把例子1改造成例子2呢？

我们总结一下步骤：

1、把fn函数设置为对象的一个属性
2、调用fn函数执行。
3、调用完毕之后，从对象中删除fn属性（函数）。 （给对象增加了属性，我们调用完就可以删掉）

思路有了，那代码我们可以写成这样：

```js
obj.fn = fn;
obj.fn();
delete obj.fn; // 删除属性
```

根据上述思路，那按照这个思路，写一个我们自己的myCall方法：

```js
Function.prototype.myCall = function(context) {
    context.fn = this;
    context.fn();
    delete context.fn;
};
var  obj = {
    name: '程序员米粉'
};
function fn() {
    console.log(this.name);
}
fn.myCall(obj) // this.name => '程序员米粉'
 ````

执行一下myCall方法，可以得出来，this指向obj对象，并打印了期望的值，所以这个方法第一步完成了！

模拟步骤2

继续完善一下myCall方法，把fn方法改一下，增加2个参数, 再执行一下方法。

function fn(index, value) {
	console.log(this.name);
    console.log(index, value);
}

fn.myCall(obj, 111, '我是一个值');
// this.name => '程序员米粉'
// undefined, undefined

执行一个fn函数，只打印一个值出来，传进入的参数，没有打印出来。那需要改造一下方法，使参数也能打印出来。我们可以从arguments对象中取值，arguments对像代表函数传进来的对象，打印看看就知道了。

Function.prototype.myCall = function(context) {
    console.log(arguments);
	context.fn = this;
	context.fn();
	delete context.fn;
};

打印出来的 arguments对象：

我们可以看到 arguments 对象结构是：

{ 
    '0': { name: '程序员米粉' }, 
    '1': 111, 
    '2': '我是一个值' 
}

0代表传进来的第1个参数，1代表第2个参数，以此类推。我们看到arguments是一个类数组，那就可以用数组方法，存储起来， 由于我们只是获取参数，所以从1开始取值。

var args = [];
for (var i = 1; i < arguments.length; i++) {
    args.push('arguments[' + i + ']');
}
// args为 ["arguments[1]", "arguments[2]", "arguments[3]"]

取值的参数的问题解决了，我们下一步解决一下，如何把这些参数传给函数执行。

// 思考一下，怎样才能这样传参给fn函数执行
context.fn(arguments[1], arguments[2]);

可能有人想到如下方法：

// 把数组里的元素通过join方法，传进函数的形参里
context.fn(args.join(','))

// 这样的话，其实 context.fn(args.join(','))执行变成：context.fn("arguments[1]", "arguments[2]");
// 变成了一个字符串，变成了一个死值了，无论传什么，都变成字符串 "arguments[1]", "arguments[2]" 。。。。

可以有人又想到用es6方法来解决。这个call是ES3的方法，所以还是不用ES6方法解决。

其实我们可以用 eval方法来解决。查文档得知 eval() 函数会将传入的字符串当做 javascript 代码进行执行。这到底是什么意思？

eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。

举个例子：

console.log(eval('2 + 2')); // 2 + 2 => 4, 最后输出是2
console.log(eval('context.fn(' + args +')')) // 相当于运行 context.fn(arguments[1], arguments[2], ...)，使用eval执行一串 JavaScript 语句。
  • eval更详细链接；

args 会自动调用 Array.toString() 这个方法。通过eval自动执行变成context.fn(arguments[1], arguments[2])这样执行。

代码如下：

var  obj = {
	name: '程序员米粉'
};

function fn(index, value) {
	console.log(this.name); // 程序员米粉
	console.log(index, value); // 111 我是一个值
}

Function.prototype.myCall = function(context) {
	context.fn = this;
	var args = [];
	for (var i = 1; i < arguments.length; i++) {
		args.push('arguments[' + i + ']');
	}
	eval('context.fn(' + args + ')');
	delete context.fn;
};

fn.myCall(obj, 111, '我是一个值'); // this.name => '程序员米粉'

执行一下方法，输入完全符合我们的预期，我们终于搞定了！

模拟步骤3

第一个参数传null或undefined，this指向为window

举个例子：

var name = '程序员米粉'

function fn() {
	console.log(this.name); // 程序员米粉
}

fn.call(null); // this.name => '程序员米粉'

fn执行的时候，还是输出 this.name = '程序员米粉'，说明了什么，只要第一个参数传 null或者undefined，那函数调用call方法，this指向window

函数执行call方法，有返回值，那就返回。

举个例子：

var name = '程序员米粉'

function fn() {
	console.log(this.name); // 程序员米粉
    return {
        name: this.name
    }
}

fn.call(null); // this.name => '程序员米粉'
// 执行fn函数直接返回对象
// {
//    name: '程序员米粉'
// }

最终版实现call代码

var obj = {
	name: '程序员米粉'
};

function fn(index, value) {
	console.log(this.name); // 程序员米粉
	console.log(index, value); // 111 我是一个值
	return {
		name: this.name,
		index: index,
		value: value
	};
}

Function.prototype.myCall = function(context) {
	var context = context || window;
	context.fn = this;
	var args = [];
	for (var i = 1; i < arguments.length; i++) {
		args.push('arguments[' + i + ']');
	}
	var result = eval('context.fn(' + args + ')');
	delete context.fn;
	return result;
};

fn.myCall(obj, 111, '我是一个值'); // this.name => '程序员米粉'
// 最终输出
// {
//     name: "程序员米粉"
//     index: 111
//     value: "我是一个值"
// }

实现apply代码

由于apply与call实现原理基本一样，那就不详细叙述了，直接上代码：

Function.prototype.myApply = function(context, arr) {
	var context = context || window;
	context.fn = this;
	var result;
	if (!arr) {
		result = context.fn();
	} else {
		var args = [];
		for (var i = 0; i < arr.length; i++) {
			args.push('arr[' + i + ']');
		}
		result = eval('context.fn(' + args + ')');
	}
	delete context.fn;
	return result;
};

结语

希望看完这篇文章对你有帮助：

  • 理解call和apply原理
  • 实践自己写一个call和apply方法

到此这篇关于JavaScript深入理解系列之call与apply的文章就介绍到这了,更多相关js call与apply内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript深入理解系列之call与apply

本文链接: https://lsjlt.com/news/146056.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript深入理解系列之call与apply
    目录定义模拟步骤1模拟步骤2模拟步骤3第一个参数传null或undefined，this指向为window函数执行call方法，有返回值，那就返回。最终版实现call代码实现appl...
    99+
    2024-04-02
  • JavaScript中call、apply、bind实现原理详解
    目录前言call用法实现简单的实现版本：升级版：apply用法实现bind用法基本版：升级版：总结前言 众所周知 call、apply、bind 的作用都是‘改变'作用域，但是网上对...
    99+
    2024-04-02
  • JavaScript函数之call、apply以及bind方法案例详解
    总结 1、相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 ...
    99+
    2024-04-02
  • Android源码系列之深入理解ImageView的ScaleType属性
    做Android开发的童靴们肯定对系统自带的控件使用的都非常熟悉，比如Button、TextView、ImageView等。如果你问我具体使用，我会给说：拿ImageView来...
    99+
    2022-06-06
    scaletype Android
  • JavaScript深入理解节流与防抖
    目录一、js防抖和节流二、为什么滚动scroll、窗口resize等事件需要优化三、滚动和页面渲染前端性能优化的关系四、防抖Debounce1 防抖Debounce情景2 防抖原理3...
    99+
    2024-04-02
  • 深入理解Java序列化与反序列化
    目录一、前言1.1 String1.2 Integer二、案例2.1 编写大象类2.2 大象测试类三、运行结果一、前言 序列化：将对象转换为二进制序列在网络中传输或保存到磁盘 反序列...
    99+
    2024-04-02
  • Netty序列化深入理解与使用
    目录序列化与反序列化序列化模式其他对象序列化方式使用json协议实现对象的传输MessagePack编码器在Netty框架中使用序列化与反序列化 序列化：把对象转换成字节的过程，称为...
    99+
    2022-11-13
    Netty 序列化 Netty 序列化协议
  • Android Mms之:深入理解对话列表管理
    Conversation这个类主要表示对话的数据结构，其内持有一个Thread所有的相关信息，如Recipients，ThreadId等等，也用于管理Thread，比如查询Th...
    99+
    2022-06-06
    列表 Android
  • Java数据结构与算法之稀疏数组与队列深入理解
    目录一、数据结构和算法简介二、稀疏数组稀疏数组的应用实例二维数组与稀疏数组的转换二维数组 转 稀疏数组的思路稀疏数组 转 原始的二维数组的思路三、队列数组模拟队列代码优化：数组模拟环...
    99+
    2024-04-02
  • 深入理解Java并发编程之LinkedBlockingQueue队列
    前面一篇文章我们介绍了使用CAS算法实现的非阻塞队列ConcurrentLinedQueue, 下面我们来介绍使用独占锁实现的阻塞队列LinkedBlockingQueue。 Lin...
    99+
    2024-04-02
  • 【Java系列】深入解析Stream API
    序言 你只管努力，其他交给时间，时间会证明一切。 文章标记颜色说明： 黄色：重要标题红色：用来标记结论绿色：用来标记论点蓝色：用来标记论点 希望这篇文章能让你不仅有一定的收获，而且可以愉快的学习，如果有什么建议，都可以留...
    99+
    2023-09-01
    java 算法 python
  • Spring之DI深入理解
    本篇内容主要讲解“Spring之DI深入理解”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Spring之DI深入理解”吧!DI概念IoC 其实有两种方式，一种就...
    99+
    2024-04-02
  • 深入了解JavaScript中递归的理解与实现
    目录前言递归的基本理解实例解析求斐波那契数时间复杂度分析空间复杂度分析执行顺序分析前言 我们在写业务代码的时候，或多或少都会遇到需要使用递归的场景，比如在遍历树形结构时。 本文将通过...
    99+
    2024-04-02
  • Flink系列之：Flink CDC深入了解MySQL CDC连接器
    Flink系列之：Flink CDC深入了解MySQL CDC连接器 一、增量快照特性1.增量快照读取2.并发读取3.全量阶段支持 checkpoint4.无锁算法5.MySQL高可用性支持 ...
    99+
    2023-09-10
    Flink系列 Flink CDC MySQL CDC连接器
  • Java深入了解数据结构之栈与队列的详解
    目录一，栈1，概念2，栈的操作3，栈的实现①入栈②出栈③获取栈顶元素④判断栈是否为空 4，实现mystack二，队列1，概念2，队列的实现①入队②出队③获取队首元素3，实现...
    99+
    2024-04-02
  • Android Mms之:深入理解Compose
    Mms中的ComposeMessageActivity（以下简称Composer）是整个Mms中最重要的一个组件，它负责编辑信息，发送信息，管理信息，接收信息，与外部应用接口。...
    99+
    2022-06-06
    Android
  • 深入理解C#之接口
    目录C#之接口接口的特性：接口的继承：接口的覆盖：接口和抽象类的区别。C#中的接口和类有什么异同。总结C#之接口 在编程中，我们经常会用到接口，那什么是接口呢？ 接口描述的是可属于任...
    99+
    2024-04-02
  • 深入理解C#之继承
    目录C#之继承能够阻止某个类被其他类继承吗？那么我们该如何获得基类的构造函数和自身的构造函数呢？都定义有构造函数时，那么执行顺序会怎样呢？总结C#之继承 继承、封装和多态是面向对象编...
    99+
    2024-04-02
  • 深入理解C#之枚举
    目录一、在学习枚举之前，首先来听听枚举的优点。二、枚举说明1、简单枚举2、标志枚举三、枚举的使用建议总结一、在学习枚举之前，首先来听听枚举的优点。 1、枚举能够使代码更加清晰，它允许...
    99+
    2024-04-02
  • Java反射之深入理解
    目录一、Java反射机制概述二、理解Class类并获取Class实例关于java.lang.Class类的理解三、通过反射创建对应的运行时类的对象(反射的应用1)四、获取运行时类的完...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作