首页 > 其他分享 >前端:js中修改this的指向方法整理

前端:js中修改this的指向方法整理

时间:2023-01-28 21:31:58浏览次数:34  
标签:函数 指向 前端 js call 数组 apply 参数 方法


call使用方法:fun.call(thisArg[,arg1[, arg2[, ...]]])

该方法传递一个thisArgs和一个参数列表,thisArgs指定了函数在运行中的调用者,也就是函数中的this对象,而参数列表会被传入调用函数中。

call 方法可以在一个对象上借用另一个对象的方法

案例:Object.prototype.tostring.call([])。一个Array对象借用了Object对象上的方法thisArgs的取值情况:

(1)不传,或者传null,undefined,函数中的this指向window对象。

(2)传递另一个函数的函数名,函数中的this指向这个函数的引用

(3)传递字符串,数值或者不二类型的那个基础数据类型,函数中的this指向其对应的包装对象,如string,number,boolean(4)传递一个对象,函数中的this指向这个对象。

 

前端:js中修改this的指向方法整理_java

 

这是call的核心功能,它允许你在一个对象上调用该对象没有定义的方法,并且这个方法可以访问该对象中的属性

 

前端:js中修改this的指向方法整理_javascript_02

 

还可以通过call方法来调用匿名函数

在下例中的for循环体内,我们创建了一个匿名函数,然后通过调用该函数的call方法,将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法,这个print方法可以打印出各元素在数组中的正确索引号。

当然,这里不是必须得让数组元素作为this值传入那个匿名函数(普通参数就可以),目的是为了演示call的用法。

 

前端:js中修改this的指向方法整理_java_03

 

apply()方法

 

前端:js中修改this的指向方法整理_java_04

 

apply和call的唯一区别是第二个参数的传递方式不同,apply的第二个参数必须是一个数组,而call允许传递一个参数列表。值得你注意的是,虽然apply接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递。

注意:这里的argsArray可以是一个数组或者类数组对象,如果该参数的值为null 或 undefined,则表示不需要传入任何参数。

 

前端:js中修改this的指向方法整理_python_05

 

apply方法的实用写法

 

前端:js中修改this的指向方法整理_python_06

 

当参数是明确知道数量时用call;不确定的时候用apply,然后把参数push进数组传递进去,也可以通过arguments这个数组来遍历所有的参数。

bind()方法

 

前端:js中修改this的指向方法整理_javascript_07

 

bind是ES5新增的一个方法,它的传参和call类似,但又和call/apply有着显著的不同,即调用call或apply都会自动执行对应的函数,而bind不会执行对应的函数,只是返回了对函数的引用。

ES5中新增加的bind方法可以弥补call()和apply()方法的不足,由于call/apply会对目标函数自动执行,从而导致它无法在事件绑定函数中使用,因为事件绑定函数不需要我们手动执行,它是在事件被触发时由JS内部自动执行的。

而bind在实现改变函数this的同时又不会自动执行目标函数,因此可以完美的解决上述问题,我们来看看一个例子:

 

前端:js中修改this的指向方法整理_javascript_08

标签:函数,指向,前端,js,call,数组,apply,参数,方法
From: https://blog.51cto.com/u_8238263/6025167

相关文章

  • AJAX-server.js
    //1.引入expressconstexpress=require('express');//2.创建应用对象constapp=express();//3.创建路由规则//request是对请求报文的封装//response是......
  • JS基础知识
    1.变量  1.1变量语法扩展        1.2变量命名规范   2.数据类型  2.1为什么需要数据类型     2.2变量的数据类型  ......
  • MySQL 支持JSON类型字段
    MySQL支持JSON字段的基本操作、相关函数及索引使用JSON字段基本操作//示例数据//表的基本结构CREATETABLE`t`(`id`INTUNSIGNEDNOTNULL,`js`JSON......
  • js逆向——酷狗音乐&酷狗音乐爬虫
    寒假期间当然要开卷了。今天我们要爬取酷狗音乐的歌曲,个人觉得酷狗还是比较容易的。虽然付费音乐的apl我没找到,但有个会员就能听,能听就能下载,就不用单曲购买了,会员到期了也......
  • React --- jsx语法规则
    jsx语法规则:1、定义虚拟dom时,不要写引号//创建虚拟DOM 1constVDOM=<h1><span>hello,react</span></h1> 2、标签中混入JS表达式时要用{}1//定义属性和标签内容2c......
  • C# 序列化Json时如何忽略JsonProperty(PropertyName =“ someName”)
    前言序列化大家都很常见,就是把一个对象序列化成一串Json字符串。最近对接第三方的时候遇到了一个情况,我们C#都是用骆驼命名,而他们呢需要接收的Json字符串的 key 是 ......
  • Js学习之 ----- 数组sort()排序
    数组的sort()方法会把数组中的元素转为字符串,然后根据字符串首位字符的Unicode码(或ASCII码)值来排序【默认从小到大】【ps:ASCII码是Unicode码的子集~】1、没有参数的情......
  • GRPC与JSON-RPC区别
      GRPC与JSON-RPC都是rpc的一种。 一.RPCRPC是什么RPC(RemoteProcedureCall)指的是远程过程调用,简单的说,RPC就是从一台机器上通过参数传递的方式调用另一台......
  • JS加解密之AES
      demo<scriptsrc="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script><script>alert(aesDecrypt(aesEncrypt("yvioo","wa1234535")......
  • AJAX服务器响应JSON数据&设置响应体数据类型
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>JSON响......