js函数方法apply,bind,call,手写new操作符

2024-08-30 12:44

本文主要是介绍js函数方法apply,bind,call,手写new操作符,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

函数方法

函数方法可以用来改变函数的this指向,对于内置的标准函数来说,改变this就相当于改变了函数的作用目标;比如说,对于一个对象的方法toString(),可以将它的使用目标修改成指定的参数,

这里原本是对obj起作用的tostring方法使用call改成了对‘123’起作用,这就是函数方法的作用,改变函数的作用目标(this指向),理解了这个之后下面介绍一下apply,bind,call的用法以及它们的区别

apply

apply(thisArg,args)   thisArg :函数执行时的this指向 , args:函数执行时的参数集合

apply 会让执行函数实例并改变函数执行时的this目标

// 全局调用的函数,this指向windows(浏览器)或global(node)
function fn() {console.log(this);}fn()
fn.apply('新this指向')// 对象调用的函数,this指向这个对象
const obj = {fn:function (){console.log(this);}
}obj.fn()
obj.fn.apply('新this指向')

 

第一次调用this指向全局(浏览器-window,node-global), 

第二次调用this指向字符串对象 ‘新的this指向’

第三次调用this指向obj对象

第四次调用this指向字符串对象 ‘新的this指向’

call 

call(thisArg,...args)   thisArg:函数执行时的this指向 , ...args:函数执行时的参数

效果和apply一样,会执行函数实例,同时改变this指向,但是区别在call提供的实例参数是零散的而非集合

// call(thisArg,...args) 函数执行时的this指向 , 函数执行时的参数
// 效果和apply一样,会执行函数实例,同时改变this指向,但是区别在call提供的实例参数是零散的而非集合function add(a,b,c){console.log(this,a+b+c);
}add(1,2,3);
add.apply('新this指向',[1,2,3]);
add.call('新this指向',1,2,3);

 

同apply,区别在于apply参数是一个集合,而call是分散的

 bind

bind(thisArg,...args)  thisArg 函数执行时的this指向 , ...args函数执行时的参数

用法和call一样,但是bind不会立刻执行实例函数,而是返回一个新函数,新函数的this指向变成thisArg

// bind(thisArg,...args) 函数执行时的this指向 , 函数执行时的参数
// 用法和call一样,但是bind不会立刻执行实例函数,而是返回一个新函数,新函数的this指向变成thisArgconst bind = {fn(){console.log(this,this.name)},name: '原来的this指向'
}bind.fn();
const newFn = bind.fn.bind({name:'新的this指向'});// 返回了一个函数 ,没有立即执行原函数
newFn();

 

 在使用bind方法时,fn并没有直接执行,而是返回了一个新函数newFn,newFn和fn逻辑一致但this指向不同

区别

applycallbind
立即执行函数立即执行函数不执行函数返回一个新this指向且逻辑相同的函数
参数以单个的可迭代对象(数组)传递参数散列的传递参数散列的传递

使用场景举例,判断引用数据的类型

使用typeof判断类型时,只能区分出function和object,对于数组array,set,map等其他的引用数据类型就无法区分了,这时就可以使用object.toString方法来打印判断,

为什么是object.toString?因为虽然object在原型链的最顶层,所有对象都会继承object的方法,但是它们都重写了toString方法,下面以array举例

// array 类型判断let arr = [1,2,3,4,5];
console.log(arr.toString());
console.log(Object.prototype.toString.call(arr));

array重写了toString方法,在调用tostring时,会使用重写后的而不是object.toString,

array.toString会打印出数组的元素,而Object.toString会打印对象的类型,

通过字符串的分割就可以根据另一半的字符判断出对象的类型 

new操作符

手写new关键字,new Function() new关键字的作用:

1.新建了一个对象,

2.将函数的prototype属性指向新对象,如果函数的原型不是一个对象(为null),则新对象的原型会保持为{}(Object)

3.执行这个函数并将函数的this指向这个对象

4.如果函数没有返回值或者返回值为基本数据类型值则返回新对象,函数返回值为引用数据类型则返回原函数返回值

注意:new的第4步操作表示作为构造函数不应该返回引用数据类型,最好也不要返回基本数据类型

因为要改变this指向所以这里需要使用函数方法

// 实现一个new/*** @param {Function} fn 构造函数* @param {Array} args 构造函数的参数 * @returns {Object} 返回构造的新对象*/
function myNew(fn,args){const obj = {};// 1if(fn.prototype){// 2Object.setPrototypeOf(obj,fn.prototype);}const result = fn.apply(obj,args); // 3// 4if(typeof result !== 'object'&& typeof result !=='function'){// 基本数据类型return obj;}return result;
}function User(name,age){this.name = name;this.age = age;console.log('构造一个user对象')}const user1 = new User('tom',18);
const user2 = myNew(User,['jerry',18])console.log(user1)
console.log(user2)

可以看到成功构造了新对象,和new的效果基本一致

这篇关于js函数方法apply,bind,call,手写new操作符的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120854

相关文章

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Nginx安全防护的多种方法

《Nginx安全防护的多种方法》在生产环境中,需要隐藏Nginx的版本号,以避免泄漏Nginx的版本,使攻击者不能针对特定版本进行攻击,下面就来介绍一下Nginx安全防护的方法,感兴趣的可以了解一下... 目录核心安全配置1.编译安装 Nginx2.隐藏版本号3.限制危险请求方法4.请求限制(CC攻击防御)

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1