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 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

Go语言中make和new的区别及说明

《Go语言中make和new的区别及说明》:本文主要介绍Go语言中make和new的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1 概述2 new 函数2.1 功能2.2 语法2.3 初始化案例3 make 函数3.1 功能3.2 语法3.3 初始化

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字