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

相关文章

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

CentOS 7部署主域名服务器 DNS的方法

《CentOS7部署主域名服务器DNS的方法》文章详细介绍了在CentOS7上部署主域名服务器DNS的步骤,包括安装BIND服务、配置DNS服务、添加域名区域、创建区域文件、配置反向解析、检查配置... 目录1. 安装 BIND 服务和工具2.  配置 BIND 服务3 . 添加你的域名区域配置4.创建区域

mss32.dll文件丢失怎么办? 电脑提示mss32.dll丢失的多种修复方法

《mss32.dll文件丢失怎么办?电脑提示mss32.dll丢失的多种修复方法》最近,很多电脑用户可能遇到了mss32.dll文件丢失的问题,导致一些应用程序无法正常启动,那么,如何修复这个问题呢... 在电脑常年累月的使用过程中,偶尔会遇到一些问题令人头疼。像是某个程序尝试运行时,系统突然弹出一个错误提

电脑提示找不到openal32.dll文件怎么办? openal32.dll丢失完美修复方法

《电脑提示找不到openal32.dll文件怎么办?openal32.dll丢失完美修复方法》openal32.dll是一种重要的系统文件,当它丢失时,会给我们的电脑带来很大的困扰,很多人都曾经遇到... 在使用电脑过程中,我们常常会遇到一些.dll文件丢失的问题,而openal32.dll的丢失是其中比较

python中字符串拼接的几种方法及优缺点对比详解

《python中字符串拼接的几种方法及优缺点对比详解》在Python中,字符串拼接是常见的操作,Python提供了多种方法来拼接字符串,每种方法有其优缺点和适用场景,以下是几种常见的字符串拼接方法,需... 目录1. 使用 + 运算符示例:优缺点:2. 使用&nbsjsp;join() 方法示例:优缺点:3

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一:延迟关联 (Deferred Join)方案二:有序唯一键分页 (Cursor-based Paginatio