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

相关文章

Spring 基于XML配置 bean管理 Bean-IOC的方法

《Spring基于XML配置bean管理Bean-IOC的方法》:本文主要介绍Spring基于XML配置bean管理Bean-IOC的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录一. spring学习的核心内容二. 基于 XML 配置 bean1. 通过类型来获取 bean2. 通过

基于Python实现读取嵌套压缩包下文件的方法

《基于Python实现读取嵌套压缩包下文件的方法》工作中遇到的问题,需要用Python实现嵌套压缩包下文件读取,本文给大家介绍了详细的解决方法,并有相关的代码示例供大家参考,需要的朋友可以参考下... 目录思路完整代码代码优化思路打开外层zip压缩包并遍历文件:使用with zipfile.ZipFil

Python处理函数调用超时的四种方法

《Python处理函数调用超时的四种方法》在实际开发过程中,我们可能会遇到一些场景,需要对函数的执行时间进行限制,例如,当一个函数执行时间过长时,可能会导致程序卡顿、资源占用过高,因此,在某些情况下,... 目录前言func-timeout1. 安装 func-timeout2. 基本用法自定义进程subp

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

Python中判断对象是否为空的方法

《Python中判断对象是否为空的方法》在Python开发中,判断对象是否为“空”是高频操作,但看似简单的需求却暗藏玄机,从None到空容器,从零值到自定义对象的“假值”状态,不同场景下的“空”需要精... 目录一、python中的“空”值体系二、精准判定方法对比三、常见误区解析四、进阶处理技巧五、性能优化

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

C++中初始化二维数组的几种常见方法

《C++中初始化二维数组的几种常见方法》本文详细介绍了在C++中初始化二维数组的不同方式,包括静态初始化、循环、全部为零、部分初始化、std::array和std::vector,以及std::vec... 目录1. 静态初始化2. 使用循环初始化3. 全部初始化为零4. 部分初始化5. 使用 std::a

如何将Python彻底卸载的三种方法

《如何将Python彻底卸载的三种方法》通常我们在一些软件的使用上有碰壁,第一反应就是卸载重装,所以有小伙伴就问我Python怎么卸载才能彻底卸载干净,今天这篇文章,小编就来教大家如何彻底卸载Pyth... 目录软件卸载①方法:②方法:③方法:清理相关文件夹软件卸载①方法:首先,在安装python时,下

电脑死机无反应怎么强制重启? 一文读懂方法及注意事项

《电脑死机无反应怎么强制重启?一文读懂方法及注意事项》在日常使用电脑的过程中,我们难免会遇到电脑无法正常启动的情况,本文将详细介绍几种常见的电脑强制开机方法,并探讨在强制开机后应注意的事项,以及如何... 在日常生活和工作中,我们经常会遇到电脑突然无反应的情况,这时候强制重启就成了解决问题的“救命稻草”。那